getusermediaでカメラを回転させたい

前提・実現したいこと

webカメラを実装する

発生している問題・エラーメッセージ

デバイスは縦画面なのにvideoタグ内に横向きの映像が出力される
実行上に問題ない

該当のソースコード

js
1try{
2                window.onload = () => {
3                    const video  = document.querySelector("#camera");
4                    const canvas = document.querySelector("#picture");
5                
6
7                    
8                    const constraints = {
9                        audio: false,
10                        video: {
11                        width: 1200,
12                        height: 900,
13                        facingMode: { exact: "environment" } 
14                        }
15                    };
16
17                
18                    navigator.mediaDevices.getUserMedia(constraints)
19                    .then( (stream) => {
20                        video.srcObject = stream;
21                        video.onloadedmetadata = (e) => {
22                            video.play();
23                        };
24                    })
25                    .catch( (err) => {
26                        console.log(err.name + ": " + err.message);
27                    });
28
29                    
30                    document.querySelector("#shutter").addEventListener("click", () => {
31                        const ctx = canvas.getContext("2d");
32
33                        
34                        video.pause();  
35                        setTimeout( () => {
36                            video.play();  
37                        }, 500);
38
39                        
40                        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
41                    });
42                };}catch(e){
43                    var er = document.getElementById('er')
44                    er.textContent = e
45                }
46        </script>