我有一个简单的网页,您可以在其中流式传输网络摄像头。我想获取这个流并将其发送到某个地方,但显然我无法真正访问该流本身。我有这个代码来运行流:
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 之上开发的面对面对话。我认为该脚本以某种方式将数据流从一个点发送到另一个点。我想通过首先了解如何获取数据流来实现相同的目标。
重新编辑:我不想转换为图像并发送后者,我想使用数据流本身。
如果您打算将相机传送到 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);
不久前就有了 MediaStream Recording API。
用法是这样的:
const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
const recorder = new MediaRecorder(mediaStream);
recorder.ondataavailable = (event) => console.log(event.data);
recorder.start();
setInterval(() => recorder.requestData(), 1000);