webカメラの映像とcanvasを重ねてを全画面で表示したい。

前提・実現したいこと

タイトルの通り、webカメラの映像とcanvasを重ねてを全画面で表示したいと考えています。

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

発生している問題としては、カメラの映像がうまく全画面で表示できず、左右に余白が出てしまいます。
おそらくそれが原因で、映像の描画範囲とcanvasの大きさが一致しません。
そもそもアスペクト比の問題などで全画面に表示できないものなのでしょうか？

該当のソースコード

html
1<html lang="ja">
2    <head>
3        <meta charset="utf-8">
4        <style>
5            *{ margin: 0;padding: 0; }
6            html,body { height:100%; }
7            #container{ height: 100%;width: 100%;background-color: #000; }
8            #video{ height: 100%;width: 100%; }
9            #canvas{ position: absolute;left: 0;top: 0;  background-color: yellow;opacity: 0.5}
10        </style>
11        <script src="js/jquery-2.1.3.min.js"></script>
12        <script type="text/javascript">
13            window.onload = function(){
14                 var media = navigator.mediaDevices.getUserMedia({
15                     video:{facingMode:"user"},
16                     audio:false
17                 });
18                 media.then((stream) =>{
19                     video.srcObject = stream;
20                 });
21                video.onloadeddata = function(){
22                    var w = $('#video').width();
23                    var h = $('#video').height();
24                    $('#canvas').attr('width', w);
25                    $('#canvas').attr('height', h);
26                  }
27            }
28        </script>
29    </head>
30    <body>
31        <div id="container">
32            <video id="video" autoplay ></video>
33            <canvas id="canvas"></canvas>
34        </div>
35    </body>
36</html>

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

回答1件

ベストアンサー

カメラ次第っぽいですね（#videoのheight,widthを消してもこの通り...）

こんな感じで中央寄せすればどうでしょう？

css
1*{ margin: 0;padding: 0; }
2
3html,body {
4  height:100%;
5  /*added*/display: flex;
6  /*added*/justify-content: center;
7  /*added*/align-items: center;
8  /*added*/background: #000;
9}
10#container{
11  /*height: 100%;
12  width: 100%;
13  background-color: #000;*/
14  /*added*/position: relative;
15}
16/*#video{ height: 100%;width: 100%; }*/
17#canvas{
18  position: absolute;
19  left: 0;
20  top: 0;
21  background-color: yellow;
22  opacity: 0.5
23}