HTML视频控件快照捕获的图像为空白

Question

我正在尝试从html视频控件捕获图像。它已使用二进制数据正确上载，但该图像在服务器上存储为空白图像。 可以请您查看下面的代码吗？

HTML和javascript代码如下：

<div class="row">
<div class="col-sm-10" align="center">
    <video id="video"
        style="width: 100%; height: 100%; border: 0.5px solid black; overflow: scroll"></video>
    <br />
    <img id="img">
    <button id="snap" ng-click="takeSanpshot()">Snap Photo</button>
</div>`

`$scope.takeSanpshot = function(){
        var recordedImgBlobs = [];
        var video = document.querySelector('video');        
        var img = document.createElement('img');    
        var canvas = document.createElement('canvas');          
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);   
        img.src = canvas.toDataURL('image/jpeg');
        recordedImgBlobs.push(img.src);
        $scope.imageFile = new File(recordedImgBlobs, 'TestImg'  +  '.jpeg', {type : 'image/jpeg',
        });
}