Monday, July 11, 2011

Isolating Big Blue Button Video

This is a quick how to on manually connecting to a BBB video stream. Before we begin, here's a very, very quick background.
  • Video streams are grouped under a conference-room specific url that has for format rtmp://host/video/roomID
  • Each streaming component under BBB is available as a separate stream (ie, video, desktop, sip/audio, etc)
  • BBB uses red5 under the hood to manage these streams
  • Grab flowplayer here and the flowplayer rtmp client here
  1. Connect to your room and start your webcam.
  2. Tail /usr/share/red5/log/bigbluebutton.log and uou should see the following log lines:
    2011-07-11 18:14:54,871 [NioProcessor-1] DEBUG o.b.c.s.p.ParticipantsEventRecorder - A participant's status has changed 141 streamName 640x480141
    2011-07-11 18:14:54,919 [NioProcessor-1] DEBUG o.b.c.s.p.ParticipantsService - Setting participant status ec0449a0-b5d1-4ca5-bfdf-d118d8bc2299 141 hasStream true
    • ec0449a0-b5d1-4ca5-bfdf-d118d8bc2299 or similar is the room id
    • 640x480141 is the stream id you need
  3. Download and place flowplayer-...swf, flowplayer.rtmp-...swf, and flowplayer-...min.js into a directory.
  4. Create a web page as follows:
  5. <meta equiv="content-type" content="text/html; charset=UTF-8">
           <script type="text/javascript" src="flowplayer-3.2.6.min.js"></script>
           <title>Minimal Flowplayer setup</title>
    
    
    <div id="player"></div>
    
    <script language="javascript">
    $f("player", "flowplayer-3.2.7.swf",
    {
    clip: {
            url: '640x480141',
            live: true,
            autoBuffering: false,
            bufferLength: 1,
            provider: 'rtmp'
          },
    
           plugins: {
    
                   // here is our rtpm plugin configuration
                   rtmp: {
                           url: 'flowplayer.rtmp-3.2.3.swf',
                           netConnectionUrl: 'rtmp://your_server/video/ec0449a0-b5d1-4ca5-bfdf-d118d8bc2299'
                   }
           }
    });
    </script>
    
  6. Load up your web page and you should see the streaming video.