[JS]getUserMedia()でカメラから取得した画像をinputのvalueに設定したいです。

前提・実現したいこと

以下の記事を参考に写真撮影機能を実装しております。
リンク内容
取得した写真をinputのvalueに設定するにはどうすればよろしいでしょうか？

以下にCodePenの環境を載せておきます。
リンク内容

該当のソースコード

HTML
1<html>
2<head>
3  <meta charset="UTF-8">
4  <title>Camera Test</title>
5  <style>
6  canvas, video{
7    border: 1px solid gray;
8  }
9  </style>
10</head>
11<body>
12
13<h1>HTML5カメラ</h1>
14
15<video id="camera" width="300" height="200"></video>
16<canvas id="picture" width="300" height="200"></canvas>
17<form>
18  <button type="button" id="shutter">シャッター</button>
19</form>
20
21<audio id="se" preload="auto">
22  <source src="camera-shutter1.mp3" type="audio/mp3">
23</audio>
24
25<input type="file" value="">
26</body>
27</html>

JS
1<script>
2window.onload = () => {
3  const video  = document.querySelector("#camera");
4  const canvas = document.querySelector("#picture");
5  const se     = document.querySelector('#se');
6
7  /** カメラ設定 */
8  const constraints = {
9    audio: false,
10    video: {
11      width: 300,
12      height: 200,
13      facingMode: "user"   // フロントカメラを利用する
14      // facingMode: { exact: "environment" }  // リアカメラを利用する場合
15    }
16  };
17
18  /**
19   * カメラを<video>と同期
20   */
21  navigator.mediaDevices.getUserMedia(constraints)
22  .then( (stream) => {
23    video.srcObject = stream;
24    video.onloadedmetadata = (e) => {
25      video.play();
26    };
27  })
28  .catch( (err) => {
29    console.log(err.name + ": " + err.message);
30  });
31
32  /**
33   * シャッターボタン
34   */
35   document.querySelector("#shutter").addEventListener("click", () => {
36    const ctx = canvas.getContext("2d");
37
38    // 演出的な目的で一度映像を止めてSEを再生する
39    video.pause();  // 映像を停止
40    se.play();      // シャッター音
41    setTimeout( () => {
42      video.play();    // 0.5秒後にカメラ再開
43    }, 500);
44
45    // canvasに画像を貼り付ける
46    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
47  });
48};
49</script>