Javascript 从视频到画布再到图像

我一直在寻找一个没有新问题的直截了当的答案，试图用其他方法来解决它，但似乎不是这样

我有这个表格可以把视频上传到我的网页上（为什么？好问题，因为我喜欢把我的生活尽量复杂化）。在这种形式下，当您选择视频时，它会自动在画布上显示视频第一季度的一个小图像（为什么再次？我不知道这似乎是一个好时机），当我尝试将生成的画布图像转换为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>   

视频：
杜拉西翁：
分钟：秒
福托：
var-dur=0；
var video=document.getElementById（'video'）；
video.addEventListener（'canplaythrough'，函数（e）{
dur=数学轮（如当前目标持续时间）；
最小var=数学地板（dur/60）；
var sec=dur%60；
document.getElementById（'viddur'）。value=min+'：'+秒；
var canvas=document.getElementById（'fotodemo'）
var imgt=数学楼层（dur/4）；
video.currentTime=imgt；
var vwidth=video.videoWidth；
var vHight=视频高度；
var widthp=（canvas.width/vwidth）；
var heightp=（画布高度/高度）；
var prop=数学最小值（宽度p、高度p）；
var centx=（canvas.width-vwidth*prop）/2；
变量centy=（canvas.height-vheight*prop）/2；
canvas.getContext（“2d”）.drawImage（视频、centx、centy、vwidth*道具、vheight*道具）；
var canvasimg=canvas.getContext（“2d”）.drawImage（视频，centx，centy，vwidth*prop，vheight*prop）；
var img=canvas.toDataURL（'image/png'）；
document.getElementById（'fotodemourl'）。value=img；
revokeObjectURL（obUrl）；
});
var-obUrl；
document.getElementById（'vid'）.addEventListener（'change'，函数（e）{
var file=e.currentTarget.files[0]；
if（file.name.match（/\（mp4）$/i））{
obUrl=URL.createObjectURL（文件）；
document.getElementById（'video'）.setAttribute（'src'，obUrl）；
}
});
因为您没有任何id为“
fotodemourl
”的元素，
将id添加到HTML元素中

<input type="text" name="fotodemourl" id="fotodemourl">

我真蠢，其他部分的代码太多了，我就是没看到，非常感谢，我现在感觉自己好蠢