webRTC navigator.getUserMediaからnavigator.mediaDevices.getUserMediaへの書き換えについて
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 1,997
前提・実現したいこと
webRTCを利用しています。APIの Navigator.getUserMedia が非推奨になって
コンソールで怒られ続けているので navigator.mediaDevices.getUserMedia に変更
する書き換えをして躓きました（撮影自体は動いています、canvas画像取得の時点での躓きです）。
発生している問題・エラーメッセージ
Uncaught 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)'
at HTMLButtonElement.<anonymous> (pictures-dcca70ced6f3ad31213496d03de6f1a5.js?body=1:49)
at HTMLButtonElement.dispatch (jquery-24e9e31ece1989ef3791bcd53ea38cab.js?body=1:5227)
at HTMLButtonElement.elemData.handle (jquery-24e9e31ece1989ef3791bcd53ea38cab.js?body=1:4879)
(anonymous) @ pictures-dcca70ced6f3ad31213496d03de6f1a5.js?body=1:49
dispatch @ jquery-24e9e31ece1989ef3791bcd53ea38cab.js?body=1:5227
elemData.handle @ jquery-24e9e31ece1989ef3791bcd53ea38cab.js?body=1:4879
drawImageメソッドが効かず、クリックイベントが有効になりません。
該当のソースコード
$(function() {
navigator.mediaDevices = navigator.mediaDevices || ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {
getUserMedia: function(c) {
return new Promise(function(y, n) {
(navigator.mozGetUserMedia ||
navigator.webkitGetUserMedia).call(navigator, c, y, n);
});
}
} : null);
if (!navigator.mediaDevices) {
console.log("getUserMedia() not supported.");
return;
}
var constraints = { audio: false, video: { width: 400, height: 300 } };
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
var video = document.getElementById('camera');
//video.src = window.URL.createObjectURL(stream);
video.srcObject = stream;
localMediaStream = stream;
console.log(stream);
}).catch(function(err) {
console.log(err.name + ": " + err.message);
});
$("#start").click(function() {
if (localMediaStream) {
var canvas = document.getElementById('canvas');
//canvasの描画モードを2sに
var ctx = canvas.getContext('2d');
//同じサイズをcanvasに指定
canvas.setAttribute("width", 400);
canvas.setAttribute("height", 300);
//canvasにコピー
ctx.drawImage(video, 0, 0, 400, 300);
}
});
}); 試したこと
javascript初心者でconsoleに変数video、streamを書き出してそれぞれがvideoタグ、mediasteramオブジェクトであることを確認しました。
navigator.mediaDevices.getUserMedia()への書き換えは- 新しくなったnavigator.mediaDevices.getUserMedia()[旧:navigator.getUserMedia()]について調べてみた！を参照にしています。
宜しくおねがいします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
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 の前あたりに移動しておけばいいのではないでしょうか。
var video = document.getElementById('camera');
var constraints = { audio: false, video: { width: 400, height: 300 } };投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.32%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
x_x
2019/07/16 12:03
drawImage() のときの video という変数が未定義のように見えますが、変更前はこれで動いていたのでしょうか？
hokosugi
2019/07/16 16:58
var video = document.getElementById('camera');
半年前のことで不確かなところもありますが、動いていました。変数videoは定義されています。
x_x
2019/07/16 17:00
それはスコープが違いますよね？
提示していないコードのどこかに書いてあるということでしょうか？
hokosugi
2019/07/16 18:01
当時のcommit見てみると
video = document.getElementById('camera');
となっています。確か"var"を付けてエラーが出たため試行錯誤の上、消した記憶があります。スコープについて良く分かっていないのですが、これで動いていたと思います。
x_x
2019/07/16 18:10
なるほど。いつの間にか var が復活したということでしょうか