Javascript 从浏览器中的网络摄像头获取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，但这将对数据进行编码，并按块工作，而不是作为流

然而，有一个新的W3C小组正在开发一个界面，它正是您想要的，并且已经在Chrome的

chrome://flags/#enable-实验性web平台功能

flag.
在读取结果流时，根据您通过的曲目类型，您将获得对新曲目的访问权限或新曲目正在添加的曲目

if（window.MediaStreamTrackProcessor）{
const track=getCanvasTrack（）；
const processor=新的MediaStreamTrackProcessor（track）；
const reader=processor.readable.getReader（）；
readChunk（）；
函数readChunk（）{
reader.read（）.then（{done，value}）=>{
//值是一个视频帧
//我们可以将每个平面中的数据读入ArrayBufferView
常量通道=value.planes.map（（平面）=>{
const arr=新的UINT8阵列（平面长度）；
平面读入（arr）；
返回arr；
});
value.close（）；//完成后关闭视频帧
log.textContent=“平面数据（15个第一个值）：\n”+
channels.map（（arr）=>JSON.stringify（[…arr.subarray（0,15）]）.join（“\n”）；
如果（！完成）{
readChunk（）；
}
});
}
}
否则{
错误（“您的浏览器尚不支持此API”）；
}
函数getCanvasTrack（）{
//只是一些噪音。。。
const canvas=document.getElementById（“canvas”）；
const ctx=canvas.getContext（“2d”）；
const img=新的图像数据（300150）；
常量数据=新的UINT32阵列（img.data.buffer）；
const track=canvas.captureStream（）.getVideoTracks（）[0]；
动漫（）；
返回轨道；
函数anim（）{
对于（设i=0；i目前，我们无法真正访问MediaStream的原始数据，与视频最接近的是MediaRecorder API，但这将对数据进行编码，并按块工作，而不是作为流

然而，有一个新的W3C小组正在开发一个界面，它正是您想要的，并且已经在Chrome的
chrome://flags/#enable-实验性web平台功能
flag.

在读取结果流时，根据您通过的曲目类型，您将获得对新曲目的访问权限或新曲目正在添加的曲目


if（window.MediaStreamTrackProcessor）{
const track=getCanvasTrack（）；
const processor=新的MediaStreamTrackProcessor（track）；
const reader=processor.readable.getReader（）；
readChunk（）；
函数readChunk（）{
reader.read（）.then（{done，value}）=>{
//值是一个视频帧
//我们可以将每个平面中的数据读入ArrayBufferView
常量通道=value.planes.map（（平面）=>{
const arr=新的UINT8阵列（平面长度）；
平面读入（arr）；
返回arr；
});
value.close（）；//完成后关闭视频帧
log.textContent=“平面数据（15个第一个值）：\n”+
channels.map（（arr）=>JSON.stringify（[…arr.subarray（0,15）]）.join（“\n”）；
如果（！完成）{
readChunk（）；
}
});
}
}
否则{
错误（“您的浏览器尚不支持此API”）；
}
函数getCanvasTrack（）{
//只是一些噪音。。。
const canvas=document.getElementById（“canvas”）；
const ctx=canvas.getContext（“2d”）；
const img=新的图像数据（300150）；
常量数据=新的UINT32阵列（img.data.buffer）；
const track=canvas.captureStream（）.getVideoTracks（）[0]；
动漫（）；
返回轨道；
函数anim（）{
for（设i=0；i