videoタグのサイズ変更方法について教えてください、、

HTMLで写真を撮影し、保存するというプログラムを書いています。

全体の流れとしましては、
・videoタグにて動画を撮影
・drawImageでcanvasに反映
・toDateURLで画像として保存
という感じです。

【問題点】
・videoタグにて動画を撮影 →スマホ縦長画面全体を撮影出来ている
・drawImageでcanvasに反映　→スマホ縦長画面全体に表示されている
・toDateURLで画像として保存　→ここで保存された画像が480*640になってしまいます、、、
目指しているのは、縦長の画像の保存です。

HTML
1<!DOCTYPE html>
2
3<html>
4    <head>
5        <meta charset="UTF-8">
6        <title>縦長カメラ</title>
7        <link rel="stylesheet" href="style.css">
8    </head>
9    <body>
10        <div class="view">
11            <video id="Video" autoplay="1" playsinline ></video>
12            <button type="button" onclick="shutter()" id="shutter">シャッター</button>　
13
14            <!--追加-->
15            <canvas id="capture"></canvas>
16            <a id="download" href="#" download="canvas.jpg">ダウンロード</a>
17        </div>
18        
19        <!--jquery-->
20        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
21        <!--script-->
22        <script type="text/javascript">
23            function videoStart(){
24                var constraints = { audio: false, video: { facingMode: "environment" } };
25                navigator.mediaDevices.getUserMedia( constraints )
26                .then(
27                    function( stream ) {
28                        var video = document.querySelector( 'video' );
29                        video.srcObject = stream;
30                        video.onloadedmetadata = function( e ) {
31                            video.play();
32                        };
33                    }
34                    )
35                };
36              videoStart();
37
38           
39            function shutter(){
40                var canvas_capture = document.getElementById('capture');
41                var cci = canvas_capture.getContext('2d');
42                var va = document.getElementById('Video');
43
44                $('#capture').css('visibility','visible');//画面一番上にcanvasを表示
45                $('#download').css('visibility','visible');//さらにダウンロードボタンも表示
46                va.pause();
47
48                canvas_capture.width = va.videoWidth;
49                canvas_capture.height = va.videoHeight;
50                console.log(va.videoHeight+':'+va.videoWidth)
51                cci.drawImage(va,0,0); //canvasに描写
52    
53                
54                 //canvasを画像で保存
55                $("#download").click(function(){
56                    var base64 = canvas_capture.toDataURL("image/jpeg");
57                    document.getElementById("download").href = base64;
58                    });
59            }
60
61        </script>
62    </body>
63</html>

css
1/*Base*/
2body{
3    margin: 0;
4}
5.view{
6    width: 100%;
7    height: 100vh;
8    max-width: 1024px; /*最高横幅*/
9	min-height: 568px; /*最低縦幅*/
10	margin-right: auto;
11	margin-left: auto;
12    background-color: green;
13    overflow: hidden;
14}
15
16/*Camera*/
17.view video{
18	position: relative;
19	object-fit: fill;
20    width: 100%;
21    height: 100vh;
22	max-width: 1024px;
23	margin-right: auto;
24	margin-left: auto;
25}
26.view #shutter{
27	position:absolute;
28	font-size: 20px;
29	padding: 10px;
30	bottom:10%;
31	left: 50%;
32	transform: translateY(-50%) translateX(-50%);
33	z-index: 5555;
34}
35
36/*capture-image*/
37.view canvas{
38    position: absolute;
39	top:0;
40	left: 0;
41	right: 0;
42	width: 100%;
43    height: 100vh;
44    max-width: 1024px; /*最高横幅*/
45	min-height: 568px; /*最低縦幅*/
46	margin: auto;
47    overflow: hidden;
48	z-index: 5556;
49	visibility: hidden;
50}
51.view #download{
52	position: absolute;
53	font-size: 25px;
54	bottom: 1%;
55	z-index: 5556;
56	visibility: hidden;
57}

【試したこと】
１：「canvasはstyle.cssで変更したサイズはあくまで表面上であり、実際のサイズ変更には、属性から指定しなければならない。」という記事を見つけ、
javascript内、 $("#download").click(function(){の下に、 canvas_capture.width = 1080;canvas_capture.height = 1920;を追加。
⇒サイズは変わったが、真っ黒の画面となった。
2.css上で、object:fitなどアスペクト比の変更を試みた

スマホ縦長サイズの画像の出力を目指していますが、知識不足もあり壁に当たっています。
知識のある方、考えうる問題点、ヒントをいただけましたら幸いです。

どうか、よろしくお願いいたします。