前提・実現したいこと
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()]について調べてみた!を参照にしています。
宜しくおねがいします。
回答1件
あなたの回答
tips
プレビュー