0

I'm rather new to the whole WebRTC thing, and I've been reading a ton of articles and about different APIs about how to handle video recording. It seems the more I read the more confusing the whole thing is. I know I can use solutions such as Nimbb, but I'd rather keep everything "in house", so to speak. The way I've got the code right now, the page loads and the user clicks a button to determine the type of input (text or video). When the video button is clicked, the webcam is initialized and turned on to record. However, the stream from the webcam doesn't show up in the page itself. It seems this is because the src of the video is actually an object. The weird thing is that when I try to get more info about the object by logging to console, I only get an object attribute called currentTime. How does this object create the actual source for the video element? I've tried many different variations of the code below to no avail, so I'm just wondering what I'm doing wrong.

var playerId = 'cam-'+t+'-'+click[1]+'-'+click[2];

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

if(navigator.getUserMedia){
    function onSuccess(stream){
        var video = document.getElementById(playerId);
        var vidSource;

        if(window.webkitURL || window.URL){
            vidSource = (window.webkitURL) ? window.webkitURL.createObjectURL(stream) : window.URL.createObjectURL(stream);
        }else{
            vidSource = stream;
        }

        video.autoplay = true;
        video.src = vidSource;
    }

    function onError(e){
        console.error('Error: ', e);
    }

    navigator.getUserMedia({video: true, audio: true}, onSuccess, onError);
}else{
    //flash alternative
}
chaoskreator
  • 889
  • 1
  • 17
  • 39
  • try [this fiddle](http://jsfiddle.net/57gf5m9m/20/), does it help – mido Apr 28 '15 at 02:19
  • @mido22 it's not a matter of targeting the correct video id. the video src is indeed added, as I can see from the developer console. I've tested both `stream` and `vidSource` getting the `currentTime` from the `LocalMediaStream` object. And, yes, I did try the suggestion, but it didn't change anything. – chaoskreator Apr 28 '15 at 03:30
  • Have you tried video.play() after setting the source – mido Apr 28 '15 at 03:34
  • @mido22 yes, that was one of the variations I had tested before posting. I just tested again, with no change. – chaoskreator Apr 28 '15 at 03:37
  • Are you testing on Chrome from a local file? – mido Apr 28 '15 at 03:38
  • No, I'm on Firefox with everything on a remote server. Interesting note - I just tested in Chrome out of curiosity, and it doesn't work either. Upon closer inspection dev console shows that there's an Uncaught TypeError: Cannot set property 'autoplay' of null – chaoskreator Apr 28 '15 at 03:39
  • Probably the reason is you are checking for webkit URL, but it is fox, so it is directly setting stream as video src, but you should do something like window.URL... Like the fiddle example – mido Apr 28 '15 at 03:43

1 Answers1

0

The webkit check actually was the problem as pointed out by mido22 in the comments

chaoskreator
  • 889
  • 1
  • 17
  • 39