WebRTC：如何将网络摄像头数据作为数据流？ [英] 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);

在getStream中，我尝试了很多东西来将这个流重定向到其他地方，例如：

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
}

但显然 gotStream 函数在开始时只调用一次，此时用户授予网络摄像头流的权限。此外， stream 变量不是流本身，而是内部具有一些属性的对象。我应该如何访问流本身并将其重定向到我想要的任何位置？

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?

编辑：您可能熟悉webglmeeting，这是一种显然是在的WebRTC。我认为该脚本以某种方式将数据流从一个点发送到另一个点。我想通过了解如何首先获取数据流来实现同样的目标。

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- I don't want a conversion to image and sending the latter, I would like to work with the stream of data itself.

推荐答案

如果你的意思是将相机送到某个地方在PNG或JPG中，所以我将使用 canvas 这样

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

这篇关于WebRTC：如何将网络摄像头数据作为数据流？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！