iPhone・iPadからアクセスしたwebRTCの画像サイズを知りたい

webRTCでアクセスした映像からcanvasで画像を撮るアプリを作成中です。

通常、PCブラウザカメラの画像サイズはwidth:1280,height:720などの横長サイズですが、videoタグにサイズ指定を入れずにiPhone・iPadからsafari経由でアクセスすると縦長サイズになってしまいます。iPhone・iPadからの画像もpcブラウザカメラと同様の横長サイズで取得したいのですが、videoタグのサイズを横長に指定すると（下記のようにwidth:640,height:360）そのサイズの中で縦長になってしまいます。詳しいことは分かりませんがiPhone・iPadのカメラサイズが変更できない仕様なんだと思います。

$(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) {
	  alert("getUserMedia() not supported.");
	  return;
	} else {
		console.log("success")
	}

	// Prefer camera resolution nearest to 1280x720.
	var constraints = { audio: false, video: { 
						advanced: [
							{ width: 1280 },
							{ height: 720 },
							{ facingMode: 'environment' } 
							]}
					};
	// alert(constraints)
	navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
	  video = document.getElementById('camera');
	  // videoの縦幅横幅を取得
	  video.width = 640;
	  video.height = 360;
	  video.srcObject = stream;
	}).catch(function(err) {
	  console.log(err.name + ": " + err.message);
	});

そこでiPhone・iPadで撮影されたcanvasに落とした画像を加工・変形してpcブラウザカメラの画像サイズに合わせるやり方にしようと考えて

	var canvas = document.getElementById('canvas');
			//canvasの描画モードを2dに
			var ctx = canvas.getContext('2d');
			canvas.setAttribute("width", 540);
			canvas.setAttribute("height", 360);
			ctx.drawImage(video, 0, 0, 540, 360, 0, 0, 540, 360)

のようにcanvas.drawImageで画像を切り取り拡大・縮小・変形させて横長サイズに落とし込むようにしましたが、切り取るための元映像の画像サイズが分からないため上手く調整がいきません。画像のサイズを取得したいのですがどうすればよいでしょうか？

videoタグにサイズ指定をしないとフル画面でカメラ画像を取得できますが、サイズ指定がしていないせいかvideo.width video.heightとも0が返ってきますし、サイズ指定してやるとサイズの中で調整された縦長のサイズが読み取れません。

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

<video>タグから画像サイズを取得するときは、video.width, video.heightではなく、video.videoWidth, video.videoHeightから取得できます。

あるいは、

js
1navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
2  var settings = stream.getVideoTracks()[0].getSettings();
3  var width = settings.width;
4  var height = settings.height;
5});