13

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

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 对话。我认为该脚本以某种方式将数据流从一个点发送到另一个点。我想通过首先了解如何获取数据流来实现同样的目的。

重新编辑：我不想转换为图像并发送后者，我想使用数据流本身。

4

1 回答 1

4

如果您打算将相机蒸到 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);
于 2012-10-29T12:16:38.100 回答