Best way to handle multiple video records in the same page load?

[benwells]

We are initializing bbcore on page load, and then we have a record button on our page that spawns a modal where the user can record their video and enter a video title. Each time the modal appears, we want to record a brand new video.

When the modal appears, we are calling startVideoRecorder(). When the modal closes, we destroy the video recorder's target element to get rid of the recorder.

When a user records 2 videos in a row, we call startVideoRecorder() a 2nd time, and the problem is that the method's callback is storing and holding onto the video ID of the first video the user recorded, not the new video. This causes us to pass the wrong video id to saveRecordedVideo when the user chooses to save the new video.

What is the best way to handle this situation? I see the getVideoRecorder and getEmbeddedRecorderUrl methods in the README but there is no explanation or example of what these methods are used for or when I should use them. Are they the answer?

Is there a "stop video recorder" method that needs to be called in between startVideoRecorder calls? Do I need to somehow destroy window.bb and re-initialize the session for each video the user wants to record a new video?

Thanks for your help, sorry for blowing up your github.

[benwells]

I discovered I could get startVideoRecorder to associate with a new video ID by setting bb.currentVideoId to null before calling startVideoRecorder. Is this a recommended way to associate the video recorder with a new video each time we need to record a video?

The only issue I see is that I get JS errors with each subsequent video because a 'message' event listener that gets attached to the window object with each recorder is looking for an element with the old video ID. I don't think these listeners get removed with each recorder, so they keep piling on with each video. I'd be happy to have a google hangout or a call and show you what I mean in more detail.

workaround?:

      window.bb.currentVideoId = null;
      window.bb.startVideoRecorder({ target: '#bombbomb-recorder-container'}, function (vidInfo) {
      });

console output with JS error on second startVideoRecorder call

startVideoRecorder :56d5de1a-3d24-3b9f-3ae6-40e91b444f60
paragon.js?cb=20160229-0916:38 Console logging enabled.
swf-frame.php?videoId=56d5de1a-3d24-3b9f-3ae6-40e91b444f60:35 Flash: 21.0.0
paragon.js?cb=20160229-0916:44 BombBomb Paragon Media Controller Version 1.4.0
paragon.js?cb=20160229-0916:44 initialize camera with resolution '512x384'.
paragon.js?cb=20160229-0916:25 fireEvent ["onReady"]
VM37962:8 Uncaught TypeError: Cannot read property 'clientWidth' of null
all-20150101.js?131036511900000000:3 Uncaught Error: Syntax error, unrecognized expression: Uncaught TypeError: Cannot read property 'clientWidth' of null

[ehippy]

@benwells, where did you end up with this?

[benwells]

Hi @ehippy, I don't believe i was able to get around the JS errors I mentioned previously. The previous comment is where we ended up. When the recording modal closes, we set bb.currentVideoId to null, so that opening the modal a 2nd time (and calling startVideoRecorder a 2nd time) will associate the recorder with a new video ID.

Something in the bb code still hangs onto some unique ID (or some other reference) of the first iframe/video, and throws that syntax error Cannot read property 'clientWidth' of null when that first recorder/iframe/video doesn't exist anymore.

Let me know if there is any other info I can provide to help.