ブラウザからサーフェイス等のタブレット内蔵カメラを起動して、キャプチャ等をするものを作っているのですが、ポートレート(縦画面)にしても、画面に映る映像が横画面時のままで、90度傾いた映像になってしまいます。
$(window).on("load orientationchange resize")でブラウザの幅を取得して無理やり回転させられないかと思いましたが機能しませんでした。
外部WEBカメラであれば物理的に付ける場所を変えればいいのですが、内蔵カメラから、縦画面での正常な向きでの表示方法をご存知の方がおられましたら教えてください。
よろしくお願いいたします。
css
1#camera { 2 display: none; 3}
HTML
1<video id="camera"></video> 2<canvas id="camera_canvas"></canvas>
javascript
1var video = document.getElementById("camera"); 2navigator.mediaDevices.getUserMedia({ 3 video: true 4}) 5.then(mediaStream => { 6 video.srcObject = mediaStream; 7 video.play(); 8 draw(video); 9}) 10.catch(e => { 11 console.error(e); 12}); 13 14//camera映像をcanvasへ 15var draw = function(video) { 16 var video = document.getElementById("camera"); 17 var canvas = document.getElementById("camera_canvas"); 18 var context = canvas.getContext("2d"); 19 canvas.width = video.videoWidth; 20 canvas.height = video.videoHeight; 21 context.drawImage(video, 0, 0, canvas.width, canvas.height); 22 requestAnimationFrame(draw); 23}; 24 25//下記の方法では無理でした 26$(window).on("load orientationchange resize", function() { 27 if(window.innerHeight > window.innerWidth){ 28 video.width = window.innerWidth; 29 console.log("portrait"); 30 }else{ 31 video.height = window.innerHeight; 32 console.log("landscape"); 33 } 34});
あなたの回答
tips
プレビュー