javascriptのmediaDevices.getUserMediaで縦持ちでの撮影

Question

ブラウザからサーフェイス等のタブレット内蔵カメラを起動して、キャプチャ等をするものを作っているのですが、ポートレート(縦画面)にしても、画面に映る映像が横画面時のままで、90度傾いた映像になってしまいます。

$(window).on("load orientationchange resize")でブラウザの幅を取得して無理やり回転させられないかと思いましたが機能しませんでした。

外部WEBカメラであれば物理的に付ける場所を変えればいいのですが、内蔵カメラから、縦画面での正常な向きでの表示方法をご存知の方がおられましたら教えてください。
よろしくお願いいたします。

#camera {
    display: none;
}

<video id="camera"></video>
<canvas id="camera_canvas"></canvas>

var video = document.getElementById("camera");
navigator.mediaDevices.getUserMedia({
	video: true
})
.then(mediaStream => {
	video.srcObject = mediaStream;
	video.play();
	draw(video);
})
.catch(e => {
	console.error(e);
});

//camera映像をcanvasへ
var draw = function(video) {
	var video = document.getElementById("camera");
	var canvas = document.getElementById("camera_canvas");
	var context = canvas.getContext("2d");
	canvas.width = video.videoWidth;
	canvas.height = video.videoHeight;
	context.drawImage(video, 0, 0, canvas.width, canvas.height);
	requestAnimationFrame(draw);
};

//下記の方法では無理でした
$(window).on("load orientationchange resize", function() {
	if(window.innerHeight > window.innerWidth){
		video.width = window.innerWidth;
		console.log("portrait");
	}else{
		video.height = window.innerHeight;
		console.log("landscape");
	}
});