=^.^=

Stream Webcams and Sound in Flash via RTMP with JW Player

• karma

WARNING A lot of folks have reported they can't get the audio working. I dropped this method for http://code.google.com/p/flash-videoio/ and wouldn't recomment wasting your time with jwplayer. flash-videoio has JavaScript hooks that let you configure most player/recorder settings on-the-fly which has huge potential when mixed with AJAX.

JW Player is a popular extensible flash (now also available in HTML5) video player. Until versions 4.5 and up it supported grabbing video and audio sources locally attached to the client machine and publishing them to a streaming server (like Flash Media Server, Red5 or C++ RTMP Server) via RTMP. This feature was abandoned due to inherent limitations of the built-in encoding capabilities of Flash Player vs. stand-alone encoding software like Flash Live Media Encoder. This situation doesn't suit everyone however; in a video conferencing scenario users must be able to connect with as little hassle as possible and forcing them to download specialized software presents a significant enough accessibility barrier to warrant swallowing the quality losses associated with Flash Player encoding.

Using version 4.4.198 available at http://developer.longtailvideo.com/trac/browser/tags/mediaplayer-4.4?rev=885, an RTMP server and the latest version of JW Player (available here) we will make a simple broadcast and view page. Extract the contents of these archives to jwpublisher/ and jwplayer/ respectively.

Let rtmp://xxx.xxx.xxx.xxx/live be the URI to your working FMS/Red5/C++ RTMP Server application and livestream be the name of our stream. Create an index.html in jwpublisher/ to reflect:

<html lang="en">
  <head>
    <script src="swfobject.js"></script>
    <script type="text/javascript">
      var flashvars =
      {
        'streamer':                     'rtmp://xxx.xxx.xxx.xxx/live',
        'file':                         'livestream',
        'type':                         'camera',
        'controlbar':                   'bottom',
        'stretching':                   'none',
        'frontcolor':                   '86C29D',  // text & icons                  (green)
        'backcolor':                    '849BC1',  // playlist background           (blue)
        'lightcolor':                   'C286BA',  // selected text/track highlight (pink)
        'screencolor':                  'FFFFFF',  // screen background             (black)
        'id':                           'playerID',
        'autostart':                    'true'
      };

      var params =
      {
        'allowfullscreen':              'true',
        'allowscriptaccess':            'always',
        'bgcolor':                      '#FFFFFF'
      };

      var attributes =
      {
        'id':                           'playerID',
        'name':                         'playerID'
      };
      swfobject.embedSWF('player.swf', 'player', '320', '260', '9.0.124', false, flashvars, params, attributes);
    </script>
  </head>
  <body>
    <div id="playercontainer" class="playercontainer"><a id="player" class="player" href="http://get.adobe.com/flashplayer/">Get the Adobe Flash Player to see this video.</a></div>
  </body>
</html>

Now create an index.html in jwplayer/:

<html>
<head>
<script type='text/javascript' src='jwplayer.js'></script>
</head>
<body>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
  jwplayer('mediaspace').setup({
    'flashplayer': 'player.swf',
    'type': 'rtmp',
    'streamer': 'rtmp://xxx.xxx.xxx.xxx/live',
    'autostart': 'true',
    'bufferlength': '3,
    'file': 'livestream',
    'controlbar': 'none',
    'width': '320',
    'height': '260'
  });
</script>
</body>
</html>

Load jwpublisher/ in your browser. Flash will ask for access to your webcam if it can find one. Once the video appears load jwplayer/ and allow a few seconds for buffering. If your streaming server works you should now be watching a slightly delayed version of the video being captured from your webcam.

Comments

• karma

@Elis
The flash-videoio package I linked to publishes lots of statistics like bytes used to its JavaScript API. You could also use some AJAX to send this data to your site.

• karma

@Elis
Use setInterval() and AJAX on the page showing the video. Maintain a database of IPs and the last time they polled the server. Find the number of IPs that polled within the last interval*2 and you have a rough idea of how many people are watching.

• Elis

how to show statistic of users on stream on some website?

• Tyler

Thanks, I'll try it out tomorrow.

• karma

My sincere apologies, the link I meant to post was http://code.google.com/p/flash-videoio/

• Tyler

The link you published points to a solid state hd utility?@?????

• karma

@Arun
I guess you missed the two comments where I pointed out the superior flashio components instead...

• Arun

Hey you ?????,Im damn sure that the sound willnot work on this f***ing code.Then what the hell you talking about??????????

• name

Did you get the problem of video quality ?
@Iron Star

• Iron Star

Hi, It works well, but is there a way to improve video quality?

• freeman

I've made same changes and now microphone and webcam work great.
Link to github
https://github.com/freeman1988/media_player

I hope the creators of jw player will not mind.

• karma

@Sixshot
I've been using the flash components at the link I just posted above your comment for a few months now and they work great for both audio and video, with full support for adjusting the bitrate.

• Sixshot

@Unyil

I am having the same issue where video will play fine but no audio. Whatever the problem is it has something to do with the jwplayer 4.4 broadcaster because if I originate the webcam stream from Flash Media Live Encoder, jwplayer plays both audio and video fine that way.

Is there any other simple broadcasters besides jwplayer 4.4? I have been looking and not having much luck. I tried the red5 samples but for some reson the webcam never wants to display with them. The jwplayer did very easily broadcast the video, just without audio. I would think by now there must be some more modern decent webcam broadcast script for red5 out there?

Also , with jwplayer is there any way to control the bitrate, resolution or quality of the stream being broadcast?

• karma

Try with these little badboys instead of jwplayer, I abandoned it a long time ago: https://code.google.com/p/flashio/

• Arunlal

I too can’t hear my voice when i stream it to wowza . Video worked fine.
Thanks in advance

• Pratik

helo...

i just create folder live in application folder
adn i just write L rtmp://127.0.0.1/live/

but...it nw showing error...sreame not found:livestream

isnt wowza itself create stream ?

• Pratik

Hello,

i am new to jwplayer..

i just wanat to record video of 60 second by webcam in jw player.

i just insta wowza server in my machine...

i am trying this example but it shwoing error rtmpt:s80/live

all are in my local machine..tne hw i solve it plz help me...

• nepturne

big thanks for work. i want to know if it is possible to use it on windows because i'm not working on linux.
i'm have a problem with C++ RTMP Server

• karma

C++ RTMP Server is not provided for Windows by the developer. You will have better luck with Red5.

• Unyil

Thanks, when I click the microphone tab, i can hear my voice from /jwpublisher. But my voice is not stream to red5, i can't hear my voice in /jwplayer index.html. Is there only video that stream to rtmp server?
when I open the ActionScript, there is no microphone attached to the stream.

• karma

Interesting; I'm pretty sure I was able to get sound but I don't have this set up any more to verify.

• karma

Right click on the broadcasting instance, click settings, click the microphone tab and select the correct input source. Also check that the volume slider is not all the way down. Try toggling the Reduce Echo checkbox. See also: http://wiki.yiffy.tk/Video_Chat#Troubleshooting

• Unyil

I can't hear my voice when i stream it to red5 and play it. Anybody can solve my problem?

• jrmkr

@jrmkr

its ok it is working well. i fix the mistake. i just apply server ip without any port to find the port itself. so it works now.

many thanks for this thread. you fix my all problem with live streaming in a simple way.

• jrmkr

all of those work well but i see server not found rtmpt:serverip:80/live

but i write in the script rtmp not rtmpt. and also 1935. not 80

what is the error for this issue?

• Anjupriya

I want to know that how to use this code....

• Igor

Thanks/ Very good! It help me to finnish.