如何解决从浏览器中的网络摄像头获取 ReadableStream
我想在浏览器中将网络摄像头输入作为 ReadableStream 以管道传输到 WritableStream。我曾尝试使用 MediaRecorder API,但是当我想要一个连续流时,该流被分成单独的 blob。我认为解决方案可能是将 MediaRecorder 块通过管道传输到一个统一的缓冲区并作为连续流从中读取,但我不确定如何让该中间缓冲区工作。
mediaRecorder = new MediaRecorder(stream,recorderOptions);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start(1000);
async function handleDataAvailable(event) {
if (event.data.size > 0) {
const data: Blob = event.data;
// I think I need to pipe to an intermediate stream? Not sure how tho
data.stream().pipeTo(writable);
}
}
解决方法
目前我们无法真正访问 MediaStream 的原始数据,我们拥有的最接近视频的是 MediaRecorder API,但这将对数据进行编码并按块而不是流来工作。
但是,有一个新的 MediaCapture Transform W3C 小组正在开发 MediaStreamTrackProcessor 界面,可以完全满足您的需求,并且 Chrome 中已经提供了 chrome://flags/#enable-experimental-web-platform-features
标志。
读取结果流时,根据您通过的轨道类型,您将获得新 VideoFrames 添加的 AudioFrames 或 WebCodecs API。
if( window.MediaStreamTrackProcessor ) {
const track = getCanvasTrack();
const processor = new MediaStreamTrackProcessor( track );
const reader = processor.readable.getReader();
readChunk();
function readChunk() {
reader.read().then( ({ done,value }) => {
// value is a VideoFrame
// we can read the data in each of its planes into an ArrayBufferView
const channels = value.planes.map( (plane) => {
const arr = new Uint8Array(plane.length);
plane.readInto(arr);
return arr;
});
value.close(); // close the VideoFrame when we're done with it
log.textContent = "planes data (15 first values):\n" +
channels.map( (arr) => JSON.stringify( [...arr.subarray(0,15)] ) ).join("\n");
if( !done ) {
readChunk();
}
});
}
}
else {
console.error("your browser doesn't support this API yet");
}
function getCanvasTrack() {
// just some noise...
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const img = new ImageData(300,150);
const data = new Uint32Array(img.data.buffer);
const track = canvas.captureStream().getVideoTracks()[0];
anim();
return track;
function anim() {
for( let i=0; i<data.length;i++ ) {
data[i] = Math.random() * 0xFFFFFF + 0xFF000000;
}
ctx.putImageData(img,0);
if( track.readyState === "live" ) {
requestAnimationFrame(anim);
}
}
}
<pre id="log"></pre>
<p>
Source<br>
<canvas id="canvas"></canvas>
</p>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。