WebRTC: how to get the webcam data as a stream of data?

Question

I have a simple webpage where you can stream your webcam. I would like to take this stream and send it somewhere, but apparently I can't really access the stream itself. I have this code to run the stream:

navigator.webkitGetUserMedia({video: true}, gotStream, noStream);

And in gotStream, I tried many things to "redirect" this stream somewhere else, for example:

function gotStream(stream) {   
    stream_handler(stream)
    //other stuff to show webcam output on the webpage
}

or

function gotStream(stream) {   
    stream.videoTracks.onaddtrack = function(track){
        console.log("in onaddtrack");
        stream_handler(track);
    }
    //other stuff to show webcam output on the webpage
}

But apparently the gotStream function gets called only once at the beginning, when the user grants permissions to the webcam to stream. Moreover the stream variable is not the stream itself but an object with some properties inside. How am I supposed to access the stream itself and redirect it wherever I want?

EDIT: You may be familiar with webglmeeting, a sort of face2face conversation apparently developed on top of WebRTC. I think that script is sending somehow the stream of data from one point to the other. I would like to achieve the same by understanding how to get the stream of data in the first place.

RE-EDIT: I don't want a conversion to image and sending the latter, I would like to work with the stream of data itself.

Battalion

Hi Maisiar, I want to do something similar, did you ever figure out a solution to your problem? – Ogren

Hello @jpihl, unfortunately not. Whenever I need to do that, I simply take a snapshot of the canvas where the webcam is and send it as a string through the WebRTC datachannel. If you find a nicer solution let me know! :-) – Battalion

Answer 1

If you mean to steam your camera to somewhere in PNG or JPG so I will use canvas like this

HTML

<video id="live" width="320" height="240" autoplay></video>
<canvas width="320" id="canvas" height="240" style="display:none;"></canvas>

JS ( jQuery )

var video = $("#live").get()[0];
var canvas = $("#canvas");
var ctx = canvas.get()[0].getContext('2d');

navigator.webkitGetUserMedia("video",
        function(stream) {
            video.src = webkitURL.createObjectURL(stream);
        }
)
     setInterval(
        function () {
            ctx.drawImage(video, 0, 0, 320,240);
                var data = canvas[0].toDataURL("image/jpeg");   
  },1000);

Torp

Thanks for the suggestion, but no. I would like to access the stream of whatever it's using (bytes anyways) to take it and do something like send it through the net. I don't want to use graphic stuff, since I'm not interested in sending imgs over the net, but the buffer itself. – Battalion

Ok, so you have to look at this html5rocks.com/en/tutorials/webrtc/basics – Torp

Thanks for the suggestion, but I don't want to use the WebRTC standard to send the stream, I'm trying to work with an alternate way, and to do so I need the byte stream :(. – Battalion

Answer 2

Since not too long ago there is now MediaStream Recording API.

The usage is something like this:

const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
const recorder = new MediaRecorder(mediaStream);
recorder.ondataavailable = (event) => console.log(event.data);
recorder.start();
setInterval(() => recorder.requestData(), 1000);

Friede