canvas捕获视频第一帧导出为img后显示全黑问题求助

代码核心问题 #

• 上下文变量未定义：你调用了canvas.getContext('2d')但没有将返回值赋值给ctx变量，后续执行ctx.drawImage会直接抛出未定义错误
• 绘制与导出逻辑顺序颠倒：你在未向canvas绘制任何视频帧的前提下就调用toDataURL导出资源，得到的只会是空白图；且你把canvas绘制逻辑写在了img的onload回调中，逻辑完全倒置，正确逻辑应该是先把视频帧绘制到canvas，再从canvas导出地址赋值给img元素
• 存在冗余语法符号：JS代码末尾多了一个多余的闭合大括号，会触发语法报错
• HTML小问题：video标签的type属性取值不规范，建议修改为type="video/mp4"避免部分浏览器识别异常

修正后代码 #

JS部分

var video = document.getElementById('video');
var canvas = document.createElement('canvas');
var videobg = document.getElementById('bgc');
// 提前定义2D上下文变量
var ctx = canvas.getContext('2d');

video.addEventListener('loadeddata', function() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  // 先将当前视频帧绘制到canvas
  ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
  // 绘制完成后再导出图片地址
  var imgURL = canvas.toDataURL('image/jpeg');
  var img = new Image();
  img.src = imgURL;
  videobg.appendChild(img);
})

HTML部分

<div class="flexbord">
  <div id="bgc" class="bgc">
    <video id="video" src="https://kwibao-video.s3.ap-northeast-1.amazonaws.com/h7C886i3HFJs98SVUQG5_video_1626853820000.mp4" type="video/mp4" autoplay muted loop></video>
  </div>
  <div class="qwe"></div>
</div>

如果需要实时同步视频帧作为背景，可以把绘制+更新img的逻辑放到requestAnimationFrame循环里，当前的写法只会在视频首次加载完成时捕获一帧画面。

内容的提问来源于stack exchange，提问作者miss8549