从视频到画布再到图像

我一直在寻找一个直接的答案，没有提出新问题，试图用其他方法弄清楚，但似乎不像它。

我有这个表格将视频上传到我的网页（为什么？好问题，因为我喜欢尽可能地使我的生活复杂化）。在这种形式中，当您选择视频时，它会在视频的第一季度自动在画布上显示一个小图像（为什么又？？ 不知道似乎是一个好时机），当我尝试将生成的画布图像带到 url 数据并将相同的 url 数据放入输入字段以使用表单上传时，我收到此错误：

TypeError： null 不是对象（评估 'document.getElementById（'fotodemourl'）.value = img'）

现在，我有点知道错误意味着什么，但不知道如何生成，我将代码留在下面，任何人都可以告诉我如何将 URL 数据获取到输入中？

    <label>Video:</label>
    <input type="file" name="vid" id="vid">
    <label>Duración:</label>
    <input type="text" name="viddur" id="viddur" size="6">
    <label style="color:grey;"><i>min:sec</i></label>
    <label>Foto:</label>
    <canvas id="fotodemo" style="width:150px; height:100px;"></canvas>
    <input type="text" name="fotodemourl">
    <input type="submit" value="Subir">
    </form>
    <video id="video" style="display:none;"></video>
    <script>
        var dur = 0;
        var video = document.getElementById('video');
        video.addEventListener('canplaythrough', function(e){
            dur = Math.round(e.currentTarget.duration);
            var min = Math.floor(dur / 60);
            var sec = dur % 60;

            document.getElementById('viddur').value = min + ':' + sec;
            var canvas = document.getElementById('fotodemo')
            var imgt = Math.floor(dur/4);
            video.currentTime = imgt;
            var vwidth = video.videoWidth;
            var vheight = video.videoHeight;
            var widthp = (canvas.width / vwidth);
            var heightp = (canvas.height / vheight);
            var prop = Math.min(widthp, heightp);
            var centx = (canvas.width - vwidth*prop)/2;
            var centy = (canvas.height - vheight*prop)/2;
            canvas.getContext("2d").drawImage(video, centx, centy, vwidth*prop, vheight*prop);
            var canvasimg = canvas.getContext("2d").drawImage(video, centx, centy, vwidth*prop, vheight*prop);
            var img = canvas.toDataURL('image/png');
            document.getElementById('fotodemourl').value = img;
            URL.revokeObjectURL(obUrl);
        });
        var obUrl;
        document.getElementById('vid').addEventListener('change', function(e){
            var file = e.currentTarget.files[0];
            if(file.name.match(/'.(mp4)$/i)){
                obUrl = URL.createObjectURL(file);
                document.getElementById('video').setAttribute('src', obUrl);
            }
        });
    </script>