B站前端截取视频帧功能是怎么实现的

Question

B站创作中心那里，上传视频同时，就截取出了视频中的帧作为图片，请问是怎么实现的

Answer 1

通过创建canvas标签，利用其drawImage() 方法在画布上绘制该视频，然后运用toDataURL方法转换canvas上的图片为base64格式，并将base64格式的图片作为video标签的poster属性。

async takeSnapshot(time?: VideoTime): Promise {
    // 首先通过createElement，创建video,
    // 在video上设置src后，通过currentTime方法，将视频设置到指定时间戳
    const video = await this.loadVideo(time);
    const canvas = document.createElement('canvas');
    // 获取video标签的尺寸，作为画布的长宽
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const context = canvas.getContext('2d');

    if (!context) {
        throw new Error('error creating canvas context');
    }
    // 当前时间戳下的video作为图像源，在canvas上绘制图像
    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    const dataURL = canvas.toDataURL();
    return dataURL;
}

b站主要是用FFmpeg
你可以看看这篇文章
https://cloud.tencent.com/developer/article/2033779