Javascript 弃用 createObjectURL 并替换为新的 HTMLMediaElement.srcObject 不适用于网络摄像头流
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51101408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Deprecation of createObjectURL and replace with the new HTMLMediaElement.srcObject doesn't work for Webcam stream
提问by user1469734
I get the warning that a function will be deprecated in Chrome future release.
我收到警告，Chrome 未来版本中将弃用某个功能。
It's this script:
这是这个脚本：
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);
});
}
That records webcam so I can save it, but the following warning is shown in the console:
这会记录网络摄像头，以便我可以保存它，但控制台中会显示以下警告：
[Deprecation] URL.createObjectURL with media streams is deprecated and will be removed in M68, around July 2018. Please use HTMLMediaElement.srcObject instead.
[弃用] 带有媒体流的 URL.createObjectURL 已弃用，将于 2018 年 7 月左右在 M68 中删除。请改用 HTMLMediaElement.srcObject。
But when I change:
但是当我改变时：
this.src = window.URL.createObjectURL(stream);
To
到
this.src = window.HTMLMediaElement.srcObject(stream);
It doesn't work anymore like it did before..
它不再像以前那样工作了..
回答by Barkermn01
Your misunderstanding what HTMLMediaElementis.
你的误解是什么HTMLMediaElement。
It is the JavaScript Class/Prototype that represents a HTML <audio>or <video>tag whether it's in the HTML or not.
它是表示 HTML<audio>或<video>标签的 JavaScript 类/原型，无论它是否在 HTML 中。
For a more class like explanation
<audio>on the page is an object of type HTMLAudioElementand that extends HTMLMediaElementand that in turn extends HTMLElement.
对于<audio>页面上更像解释的类
是一个类型的对象，HTMLAudioElement它扩展HTMLMediaElement了，然后扩展了HTMLElement。
If you get the media element with querySelector()or getElementById()or create a media element in JavaScript with createElement("audio")or createElement("video")you'll get an instance of HTMLMediaElement.
如果你得到的媒体元素querySelector()或者getElementById()还是在JavaScript中创建一个媒体元素与createElement("audio")或者createElement("video")你会得到的一个实例HTMLMediaElement。
In your case thisis an object of HTMLMediaElementclass.
在你的情况下this是一个HTMLMediaElement类的对象。
With JavaScript, as a rule of thumb if the object type name starts with HTML it is referring to an HTML Element / Tag.
对于 JavaScript，根据经验，如果对象类型名称以 HTML 开头，则它指的是 HTML 元素/标签。
All you need to do is change
你需要做的就是改变
this.src = window.URL.createObjectURL(stream);
to
到
try {
this.srcObject = stream;
} catch (error) {
this.src = window.URL.createObjectURL(stream);
}
This is taken from Mozilla Documentation
这是取自Mozilla 文档
You can read more about how this change should be used, and where this answer takes knowledge from: https://www.fxsitecompat.com/en-CA/docs/2017/url-createobjecturl-stream-has-been-deprecated/
您可以阅读有关如何使用此更改的更多信息，以及此答案从何处获取知识：https: //www.fxsitecompat.com/en-CA/docs/2017/url-createobjecturl-stream-has-been-deprecated/
回答by YaTaras
Replacing this.src = window.URL.createObjectURL(stream);by this.srcObject = stream;should fix the problem.
更换this.src = window.URL.createObjectURL(stream);的this.srcObject = stream;应该解决的问题。
回答by Fernando Rivero
If you are using Chrome you can use:
如果您使用的是 Chrome，您可以使用：
video.srcObject = stream;
instead of:
代替：
this.srcObject = stream;
