WebRTC:如何将网络摄像头数据作为数据流？

Question

我有一个简单的网页,您可以在其中流式传输网络摄像头.我想把这个流发送到某个地方,但显然我无法真正访问流本身.我有这个代码来运行流:

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

在gotStream中,我尝试了很多东西来将这个流"重定向"到其他地方,例如:

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
}

但显然gotStream,当用户向网络摄像头授予流媒体权限时,该功能仅在开始时被调用一次.此外,stream变量不是流本身,而是内部具有一些属性的对象.我应该如何访问流本身并将其重定向到我想要的任何地方？

编辑:你可能熟悉webglmeeting,这是一种显然是在WebRTC之上开发的face2face对话.我认为该脚本以某种方式将数据流从一个点发送到另一个点.我想通过了解如何首先获取数据流来实现同样的目标.

重新编辑:我不希望转换为图像并发送后者,我想使用数据流本身.

Answer 1

如果你的意思是你的蒸汽相机PNG或JPG的地方,所以我会用canvas这样的

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