質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebRTC

WebRTC(Web Real-Time Communication)とは、プラグイン無しでウェブブラウザ間の音声通話・ビデオチャットなどリアルタイムコミュニケーションができるオープンフレームワークです。W3CがAPIレベルで、IETFがプロトコルレベルでそれぞれ標準化が進められています。

Q&A

解決済

1回答

878閲覧

webRTC navigator.getUserMediaからnavigator.mediaDevices.getUserMediaへの書き換えについて

hokosugi

総合スコア63

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebRTC

WebRTC(Web Real-Time Communication)とは、プラグイン無しでウェブブラウザ間の音声通話・ビデオチャットなどリアルタイムコミュニケーションができるオープンフレームワークです。W3CがAPIレベルで、IETFがプロトコルレベルでそれぞれ標準化が進められています。

0グッド

0クリップ

投稿2018/11/02 23:33

前提・実現したいこと

webRTCを利用しています。APIの Navigator.getUserMedia が非推奨になって
コンソールで怒られ続けているので navigator.mediaDevices.getUserMedia に変更
する書き換えをして躓きました(撮影自体は動いています、canvas画像取得の時点での躓きです)。

発生している問題・エラーメッセージ

console

1Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)' 2 at HTMLButtonElement.<anonymous> (pictures-dcca70ced6f3ad31213496d03de6f1a5.js?body=1:49) 3 at HTMLButtonElement.dispatch (jquery-24e9e31ece1989ef3791bcd53ea38cab.js?body=1:5227) 4 at HTMLButtonElement.elemData.handle (jquery-24e9e31ece1989ef3791bcd53ea38cab.js?body=1:4879) 5(anonymous) @ pictures-dcca70ced6f3ad31213496d03de6f1a5.js?body=1:49 6dispatch @ jquery-24e9e31ece1989ef3791bcd53ea38cab.js?body=1:5227 7elemData.handle @ jquery-24e9e31ece1989ef3791bcd53ea38cab.js?body=1:4879

drawImageメソッドが効かず、クリックイベントが有効になりません。

該当のソースコード

javascript

1$(function() { 2 navigator.mediaDevices = navigator.mediaDevices || ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? { 3 getUserMedia: function(c) { 4 return new Promise(function(y, n) { 5 (navigator.mozGetUserMedia || 6 navigator.webkitGetUserMedia).call(navigator, c, y, n); 7 }); 8 } 9 } : null); 10 11 if (!navigator.mediaDevices) { 12 console.log("getUserMedia() not supported."); 13 return; 14 } 15 16 var constraints = { audio: false, video: { width: 400, height: 300 } }; 17 18 navigator.mediaDevices.getUserMedia(constraints).then(function(stream) { 19 var video = document.getElementById('camera'); 20 //video.src = window.URL.createObjectURL(stream); 21 video.srcObject = stream; 22 localMediaStream = stream; 23 console.log(stream); 24 }).catch(function(err) { 25 console.log(err.name + ": " + err.message); 26 }); 27 28 $("#start").click(function() { 29 if (localMediaStream) { 30 var canvas = document.getElementById('canvas'); 31 //canvasの描画モードを2sに 32 var ctx = canvas.getContext('2d'); 33 34 //同じサイズをcanvasに指定 35 canvas.setAttribute("width", 400); 36 canvas.setAttribute("height", 300); 37 38 //canvasにコピー 39 ctx.drawImage(video, 0, 0, 400, 300); 40 } 41 }); 42 });

試したこと

javascript初心者でconsoleに変数video、streamを書き出してそれぞれがvideoタグ、mediasteramオブジェクトであることを確認しました。
navigator.mediaDevices.getUserMedia()への書き換えは- 新しくなったnavigator.mediaDevices.getUserMedia()[旧:navigator.getUserMedia()]について調べてみた!を参照にしています。

宜しくおねがいします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2019/07/16 03:03

drawImage() のときの video という変数が未定義のように見えますが、変更前はこれで動いていたのでしょうか?
hokosugi

2019/07/16 07:58

var video = document.getElementById('camera'); 半年前のことで不確かなところもありますが、動いていました。変数videoは定義されています。
x_x

2019/07/16 08:00

それはスコープが違いますよね? 提示していないコードのどこかに書いてあるということでしょうか?
hokosugi

2019/07/16 09:01

当時のcommit見てみると video = document.getElementById('camera'); となっています。確か"var"を付けてエラーが出たため試行錯誤の上、消した記憶があります。スコープについて良く分かっていないのですが、これで動いていたと思います。
x_x

2019/07/16 09:10

なるほど。いつの間にか var が復活したということでしょうか
guest

回答1

0

ベストアンサー

navigator.mediaDevices.getUserMedia() への書き換えというよりも、いつの間にか var がついていたというのが原因でしょう。
スコープについてはここを参照。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/var
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/const

ここで「var を消す」という修正をするのも何なので、constraints の前あたりに移動しておけばいいのではないでしょうか。

JavaScript

1 var video = document.getElementById('camera'); 2 var constraints = { audio: false, video: { width: 400, height: 300 } };

投稿2019/07/16 09:20

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hokosugi

2019/07/16 09:44

ありがとうございます。 この際、スコープについて勉強したいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問