的WebRTC:如何获取摄像头数据作为数据流?(WebRTC: how to get the web

2019-08-02 01:49发布

我有一个简单的网页,你可以流您的摄像头。 我想借此流和地方发送,但显然我真的不能访问流本身。 我有这样的代码来运行流:

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技术基础上开发。 我认为,脚本是从一个点发送莫名其妙的数据流到其他。 我想通过了解如何将数据流放在第一位来实现相同的。

重新编辑:我不想转换图像,并发送后,我想与数据本身的流工作。

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


文章来源: WebRTC: how to get the webcam data as a stream of data?