弃用 createObjectURL 并替换为新的 HTMLMediaElement.srcObject 不适用于网络摄像头流

Posted 2023-05-08

【中文标题】弃用 createObjectURL 并替换为新的 HTMLMediaElement.srcObject 不适用于网络摄像头流

【英文标题】：Deprecation of createObjectURL and replace with the new HTMLMediaElement.srcObject doesn't work for Webcam stream

【发布时间】：2018-12-08 15:06:29

【问题描述】：

我收到警告说某个功能将在 Chrome 未来版本中被弃用。

就是这个脚本：

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) 
    navigator.getUserMedia(
        video: true
    , (stream) => 
        this.src = window.URL.createObjectURL(stream);
        this.stream = stream;
    , (error) => 
        console.log(error);
    );

记录网络摄像头以便我可以保存它，但控制台中显示以下警告：

[弃用] 带有媒体流的 URL.createObjectURL 已弃用 并将在 2018 年 7 月左右在 M68 中移除。请使用 htmlMediaElement.srcObject 代替。

但是当我改变时：

this.src = window.URL.createObjectURL(stream);

到

this.src = window.HTMLMediaElement.srcObject(stream);

它不再像以前那样工作了..

【参考方案1】：

你对HTMLMediaElement是什么的误解。

它是表示 HTML <audio> 或 <video> 标记的 javascript 类/原型，无论它是否在 HTML 中。

更多类的解释 页面上的<audio> 是HTMLAudioElement 类型的对象，它扩展HTMLMediaElement，进而扩展HTMLElement。

如果您使用querySelector() 或getElementById() 获取媒体元素，或者使用createElement("audio") 或createElement("video") 在JavaScript 中创建媒体元素 你会得到一个HTMLMediaElement的实例。

在您的情况下，this 是 HTMLMediaElement 类的对象。

对于 JavaScript，根据经验，如果对象类型名称以 HTML 开头，则它指的是 HTML 元素/标签。

你需要做的就是改变

this.src = window.URL.createObjectURL(stream);

到

if ('srcObject' in this) 
  this.srcObject = stream;
 else 
  this.src = window.URL.createObjectURL(stream);

这取自Mozilla Documentation

您可以阅读有关如何使用此更改以及此答案从何处获取知识的更多信息： https://www.fxsitecompat.com/en-CA/docs/2017/url-createobjecturl-stream-has-been-deprecated/

【讨论】：

这不能回答我的问题。 createObjectURL 不仅用于显示视频，还用于下载文件。 src标签不接受srcObject，现在没有下载文件的解决方案。

@tatsu 你在说什么答案对于被问到的问题是正确的说没有回答我的问题，那么你有一个不同的问题。

【参考方案2】：

将this.src = window.URL.createObjectURL(stream); 替换为this.srcObject = stream; 应该可以解决问题。

【讨论】：

<src DOM 标签不接受 srcObject 值。

【参考方案3】：

如果您使用的是 Chrome，您可以使用：

video.srcObject = stream;

代替：

this.srcObject = stream;

【讨论】：

仅当 video 变量设置了所需的范围并指向您想要在 OP 代码中任何时候都没有影响的视频元素时 video 已定义