Javascript 如何检测何时不支持'canvas.captureStream（）'？

canvas.captureStream（）

要（例如）将其内容导入视频元素，请参阅在iOS Safari中不工作

但是，

canvas.captureStream（）

在iOS Safari中是一个有效的函数，并且正确地返回了一个

CanvasCaptureMediaStreamTrack

，它只是没有按预期的方式工作。为了检测不支持canvas.captureStream的浏览器，测试canvas.captureStream==='function'，本来很容易，但至少对于iOS Safari，我们不能依赖它。我们也不能依赖返回值的类型

---

我如何编写JavaScript来检测当前浏览器是否有效地支持canvas.captureStream（）？

这里没有iOS来测试它，但是根据您链接到的问题上的评论，

captureStream（）

实际上可以工作，但HTMLVideoElement无法读取此媒体流。这就是你想要测试的

根据那里的消息，视频甚至不会无法加载视频（即元数据设置正确，我不希望触发

error

之类的事件，但如果触发，那么测试就相当简单：检查视频是否能够播放这样的媒体流

函数测试ReadingofCanvasCapturedStream（）{
//首先检查domapi是否可用
如果（！testSupportOfCanvasCapureStream（））{
返回承诺。解决（错误）；
}
//创建一个测试画布
const canvas=document.createElement（“canvas”）；
//我们需要在画布上初始化一个上下文
const ctx=canvas.getContext（“2d”）；
const stream=canvas.captureStream（）；
const vid=document.createElement（“视频”）；
vid.muted=true；
vid.playsInline=true；
vid.srcObject=流；
让支持=错误；
//Safari需要我们在画布上画画
//在我们请求MediaStream之后异步执行
setTimeout（（）=>ctx.fillRect（0,0,5,5））；
//如果失败，.play（）就足够了
//但根据对这一问题的评论，情况并非如此
返回视频播放（）
.然后（（）=>supports=true）
.最后（（）=>{
//干净的
stream.getTracks（）.forEach（track=>track.stop（））；
返回支架；
});
}
函数testSupportOfCanvasCapureStream（）{
返回“函数”==HtmlCanvaElement.prototype.captureStream的类型；
}
testReadingOfCanvasCapturedStream（）
.then（supports=>console.log（supports））；

这里没有iOS来测试它，但是根据您链接到的问题上的评论，

captureStream（）

实际上是有效的，不起作用的是HTMLVideoElement对这个媒体流的读取。所以这就是您真正想要测试的

根据那里的消息，视频甚至不会无法加载视频（即元数据设置正确，我不希望触发

error

之类的事件，但如果触发，那么测试就相当简单：检查视频是否能够播放这样的媒体流

函数测试ReadingofCanvasCapturedStream（）{
//首先检查domapi是否可用
如果（！testSupportOfCanvasCapureStream（））{
返回承诺。解决（错误）；
}
//创建一个测试画布
const canvas=document.createElement（“canvas”）；
//我们需要在画布上初始化一个上下文
const ctx=canvas.getContext（“2d”）；
const stream=canvas.captureStream（）；
const vid=document.createElement（“视频”）；
vid.muted=true；
vid.playsInline=true；
vid.srcObject=流；
让支持=错误；
//Safari需要我们在画布上画画
//在我们请求MediaStream之后异步执行
setTimeout（（）=>ctx.fillRect（0,0,5,5））；
//如果失败，.play（）就足够了
//但根据对这一问题的评论，情况并非如此
返回视频播放（）
.然后（（）=>supports=true）
.最后（（）=>{
//干净的
stream.getTracks（）.forEach（track=>track.stop（））；
返回支架；
});
}
函数testSupportOfCanvasCapureStream（）{
返回“函数”==HtmlCanvaElement.prototype.captureStream的类型；
}
testReadingOfCanvasCapturedStream（）
.then（supports=>console.log（supports））；

在iOS上测试并确认其日志为“false”。谢谢你的真知灼见！@AndréStaltz这对两个片段都有效还是只对第二个片段有效？只有第二个片段，第一个片段没有记录任何有趣的东西，我最初在考虑iOS Safari时就开始了这个问题，但现在我意识到Safari 14（macOS）有问题，第二个片段没有记录任何内容！@AndréStaltz感谢您的提醒。肯定使用了上一个版本。显然他们不再喜欢在画布上绘制停止流的视频。在iOS上测试并确认它记录为“false”。谢谢你的真知灼见！@AndréStaltz这对两个片段都有效还是只对第二个片段有效？只有第二个片段，第一个片段没有记录任何有趣的东西，我最初在考虑iOS Safari时就开始了这个问题，但现在我意识到Safari 14（macOS）有问题，它不会记录第二个片段的任何内容！@AndréStaltz感谢您的提醒。肯定使用了上一个版本。显然他们不再喜欢在画布上绘制停止流的视频。