web-dev-qa-db-ja.com

createObjectURLの廃止と新しいHTMLMediaElement.srcObjectでの置き換えは、Webcamストリームでは機能しません

関数が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);

以前のように機能しなくなりました。

javascripthtml5webkithtml5-videohtml5-audio
18
user1469734

HTMLMediaElementとは何かを誤解しています。

HTMLにあるかどうかに関係なく、HTML <audio>または<video>タグを表すJavaScriptクラス/プロトタイプです。

説明のようなより多くのクラスの場合、ページ上の<audio>はHTMLAudioElement型のオブジェクトであり、HTMLMediaElementを拡張し、さらにHTMLElementを拡張します。

querySelector()またはgetElementById()でメディア要素を取得するか、createElement("audio")またはcreateElement("video")でJavaScriptにメディア要素を作成すると、HTMLMediaElementのインスタンスを取得します。

あなたの場合、thisはHTMLMediaElementクラスのオブジェクトです。

JavaScriptでは、経験則として、オブジェクトタイプ名がHTMLで始まる場合、HTML要素/タグを参照しています。

あなたがする必要があるのは変更だけです

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

に

try {
  this.srcObject = stream;
} catch (error) {
  this.src = window.URL.createObjectURL(stream);
}

これは Mozillaドキュメント から取得されます

この変更がどのように使用されるべきか、そしてこの答えがどこから知識を得るのかについての詳細を読むことができます： https://www.fxsitecompat.com/en-CA/docs/2017/url-createobjecturl-stream-has-非推奨/

45
Martin Barker

this.src = window.URL.createObjectURL(stream);をthis.srcObject = stream;に置き換えると、問題が解決するはずです。

6
YaTaras