Question

I am developing a metro app using JavaScript and am trying to display two videos from the webcam simultaneously (one of them will, in the end, have a filter applied to it). However, I get an error whenever I try to set them both to use the webcam as a source,,,, Is there a good way to hand this situation?

Thanks!

Edit: Here is some code:

(Javascript)

var mediaCaptureMgr = new Windows.Media.Capture.MediaCapture();
var captureInitSettings = new Windows.Media.Capture.MediaCaptureInitializationSettings();
//...set properties of captureInitSettings...


mediaCaptureMgr.initializeAsync(captureInitSettings).then(function (result) {
            var video1 = id("Video1"); //function to get html element with id
            video1.src = URL.createObjectURL(mediaCaptureMgr, false); //does not matter if false is switched to true
            var video2 = id("Video2");
            video2.src = video1.src;//could also use var x = URL.create... then set video1.src/video2.src = x; still won't work.
        },
    errorHandler);

(HTML)

<video id="Video1" autoplay></video>
<video id="Video2" autoplay></video>

I can fire the JS through a Click event or Load event–doesn’t matter–only Video1 gets the webcam video. Video2 doesn’t work. Thoughts?

Thanks!

Answer 1

Been playing a bit with getUserMedia in a similar fashion in Chrome lately, and I’m wondering if canvas in Metro is acceptable for your second video playback, seeing as you’re planning on doing filtering anyway, seems like you may have to go this route regardless?

That said, I don’t know anything about the Metro javascript environment, but looking at your example and knowing how I’d do it in a supported browser:

var video1 = id("Video1");
var canvas = id('canvas');

var context = canvas.getContext('2d');

context.drawImage(video1, 0, 0);

Of course, this would only work if you are drawing that image for each frame of video, which would be a breeze if there’s some analog of window.requestAnimationFrame.