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.

Be Sociable, Share!