HTML webカメラから写真を一つのボタンで保存する方法

前提・実現したいこと

HTMLでwebカメラから静止画を出してダウンロードボタンを押したら画像がダウンロードされるプログラムを作りたいです

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

静止画は出たのですが、その静止画を保存するボタンが作れません

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width">
6  <title>getUserMedia-Demo</title>
7</head>
8<body>
9
10    <!-- カメラ映像が描画されます。 -->
11    <video id="video_area" style="background-color: #000" autoplay></video>
12
13    <!-- 押下するとカメラ映像描画を開始します。 -->
14    <button id="start_btn">映像表示開始</button>
15
16    <!-- 押下するとカメラ映像から静止画をキャプチャします。 -->
17    <button onclick="copyFrame()" >静止画取得</button>
18    
19     <button id="download_button">ダウンロードする</button>
20
21    
22
23    <!-- キャプチャした静止画が描画されます。 -->
24    <canvas id="capture_image"></canvas>
25
26</body>
27<script>
28
29
30
31
32    // getUserMedia が使えないときは、『getUserMedia()が利用できないブラウザです！』と言ってね。
33    if (typeof navigator.mediaDevices.getUserMedia !== 'function') {
34        const err = new Error('getUserMedia()が利用できないブラウザです！');
35        alert(`${err.name} ${err.message}`);
36        throw err;
37    }
38
39    // 操作する画面エレメント変数定義します。
40    const $start = document.getElementById('start_btn');   // スタートボタン
41    const $video = document.getElementById('video_area');  // 映像表示エリア
42
43    // 「スタートボタン」を押下したら、getUserMedia を使って映像を「映像表示エリア」に表示してね。
44    $start.addEventListener('click', () => {
45        navigator.mediaDevices.getUserMedia({ video: true, audio: false })
46        .then(stream => $video.srcObject = stream)
47        .catch(err => alert(`${err.name} ${err.message}`));
48    }, false);
49
50
51    // 「静止画取得」ボタンが押されたら「<canvas id="capture_image">」に映像のコマ画像を表示します。
52    function copyFrame() {
53
54        var canvas_capture_image = document.getElementById('capture_image');
55        var cci = canvas_capture_image.getContext('2d');
56        var va = document.getElementById('video_area');
57
58        canvas_capture_image.width  = va.videoWidth;
59        canvas_capture_image.height = va.videoHeight;
60        cci.drawImage(va, 0, 0);  // canvasに『「静止画取得」ボタン』押下時点の画像を描画。
61    }
62
63	
64
65
66
67</script>
68
69</html>