1. One should be able to record a live event session and create courses from it.
2. Users enrolled to the course should be able to view the recorded sessions inside the course player.
With the 0.8 version of BBB, the recording and playback works like this - http://code.google.com/p/bigbluebutton/wiki/RecordPlaybackSpecification
To summarize, all the events in the meeting are stored in a file events.xml. The video and slides (as images) are saved in different directories. Processing scripts take audio as base time line and then construct an xmls which are passes as input to popcorn.js to play them back.
The following are the limitations -
1. The moderator will not be able to start/stop record and playback.
2. Only the slides, slide transitions, and audio are captured. The white board drawing and zoom in/out etc are not recorded.
3. Only slides, chat and audio can be played back by default.
The webcam, deskshare are recorded as seperate files but to have them processed & played back matter horn integration is needed.(http://code.google.com/p/bigbluebutton/wiki/MatterhornIntegration). One major limitation here is both webcam and deskshare should be running in order to process them by matter horn. The processing fails if atleast one of the two is not present any time.
4. Playback happens using popcorn.js (HTML5 based js library). So, playing the recordings is supported only on modern browsers which support HTML5.
* In the initial version, we just support presentations and audio.
* Matterhorn integration is avoided in the first cut, due to the limitations mentioned above (3).
There will be an option provided to user to say whether to record or not while creating the live event. If the use chooses to record, then once the event ends, a background job runs which creates a content of type 'LiveEventRecording'. This is a sub type of 'Video' so for the users this will be filtered along with the other video content. We go with a new model as it is needed in the code level.
Once this content is created, it can be added to any course like other content.
1. Add required columns and associations to live event model.
2. Read the recording option from the UI and pass this to BBB API while creating meetings.
3. Background processing to create content.
Do we need to delete this recording if the corresponding live event is deleted ? MM: No. This will remain a part of the library and can be reused to create another course. Library feature will be introduced soon.
The slides recorded by BBB are nothing but images with an XML describing the timeline during which they should appear. The audio is recorded as .wav and .ogg files.
We can go ahead with one of the following playback methods to play the content in the course player.
We can use the HTML5 playback provided by BBB. All we need to know here is the playback url which can be obtained from GetRecordings API call http://code.google.com/p/bigbluebutton/wiki/API#Get_Recordings
The above URL can be launched in an iframe inside our course player.
The following Changes are needed to suit our course player.
1. Hide the chat panel and change the presentation size to 640×480.
* Easier and faster implementation.
* As changes are on the BBB, no more changes needed for other apps if they use the same BBB server.
* We need to write the logic to update the progress information.
* As it is a pure HTML5 based solution, it may not support older browsers. It does not support playing back on IE at all.
The IE support for HTML5 can be achieved using Google's Chrome frame - https://developers.google.com/chrome/chrome-frame/.
This plays the HTML5 videos using Chrome's engine inside IE. A down side of this is user must have it installed on his machine. This is a very good solution and works for BBB playback too. But i observed that this playback had issues on IE and Chrome on Winxp machines we have. Also some random crashes are observed on Windows 7 with IE 9 when i tried to play the recorded sessions.
An alternative we can use in our case is to get all the recordings down loaded to crossbow app and then play them using a jwplayer plugin. This uses flash for all the broswers that do not support HTML5 and thus a true crossbow solution.
The following Changes are needed to suit our course player.
1. Logic to download all the recordings and convert .wav to .mp3 (as jwplayer does not support .wav/.ogg across all browsers).
2. Write a jwplayer plugin to play the slides as per timeline.
* True cross browser solution and we have control of complete implementation.
* All the jwplayer plugins we use can be used and progress can be tracked effectively.
* With future versions of BBB we may need to change this to support in case new playback elements are added.
* Implementation may take a little longer than the other method.
1. Converting .wav to .mp4 is done using lame (http://lame.sourceforge.net/). This comes with ffmpeg on most of the machines.
lame -V input.wav output.mp3
2. Jwplayer plugin plays the live event audio and shows the presentations as per the time line present in slides.xml.
Sample slides.xml
<?xml version="1.0"?>
<popcorn>
<timeline>
<image in="0" out="11" src="logo.png" target="slide" width="200"/>
<image in="14" out="51" src="presentation/default/slide-1.png" target="slide" width="200"/>
<image in="54" out="68" src="presentation/mc_qs_ee_en/slide-1.png" target="slide" width="200"/>
<image in="68" out="225" src="presentation/mc_qs_ee_en/slide-2.png" target="slide" width="200"/>
<image in="229" out="360" src="presentation/mc_qs_ee_en/slide-1.png" target="slide" width="200"/>
</timeline>
</popcorn>
Sample embed code for jwplayer plugin
jwplayer('playerId').setup({
height: '100%',
width: '100%',
id: 'playerId',
allowfullscreen: true,
allowscriptaccess: 'always',
flashplayer: '/jwplayer/player.swf',
file: "/jwplayer/live_event_3/audio/audio.mp3", //link to the audio file of the live event
source: '/jwplayer/player.swf',
icons: true,
image: "",
plugins : '/javascripts/jwplayer_live_event_playback.js' : {
slide_list: #{slides[:timeline].to_json} //slides is a ruby hash constructed from slides.xml
}
});