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

问题

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
}

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.

回答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);

来源：https://stackoverflow.com/questions/13120591/webrtc-how-to-get-the-webcam-data-as-a-stream-of-data

标签

javascript

webcam

webrtc