截取视频首帧图片

基本框架：
antD upLoad组件上传视频 +视频消息推送+ canvas截取视频首帧图片

• 上传视频

<Upload
    name="myfile"
    data={ {
          _token: getConfig()._token,
         }}
         listType="picture-card"
         className="avatar-uploader"
         showUploadList={false}
         action="/admin/api/upload_file"
         beforeUpload={this.handleFileBeforeUpload.bind(this, 'video')}
         onChange={this.handleFileUpload.bind(this)}
>
   <div className={`${classNamePrefix}-im-chat-footer-video`}></div>
</Upload>

• 截取的首帧图预览

<div className='title'>视频预览</div>
<div id='preview' style={{border: '1px solid red'}}>
     <div className='scrllo_bg'>
         <div id='scrllo_val'></div>
     </div>
</div>

// push发消息
    handleCommonCorePushMessage(messageItem) {

        if (messageItem.data === '') {
            message.warn('不能发送空白消息');
            return;
        }

        // 视频类型
        if (messageItem.content_type === 3) {
            this.captureImage(messageItem);
        } else {
            this.handleRealPush(messageItem, '');
        }
    }

• 首帧图片截取方法

// 自动截取视频第一帧作为封面
    captureImage(messageItem) {
        const video = document.getElementById('video');
        video.src = messageItem.data;
        const preview = document.getElementById('preview');

        const canvas = document.createElement('canvas');//创建一个canvas
        const img = new Image(); 

        video.onloadeddata = evt => { // 此处特别注意下，监听的是onloadeddata事件，而不是loadedmetadata
        // 防止查看视频时再次触发截取首帧和消息的push操作
            if (this.state.isShowMedaiModal) {
                return;
            }
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);//绘制图像
            
            img.src = canvas.toDataURL('image/png'); 
            uploadFileBase({
                data_base64: img.src,
                _token: getConfig()._token,
            }).then((json) => {
                if (json.status) {
                    this.handleRealPush(messageItem, json.data);
                }
            });
            preview.appendChild(img);
        };
    }

video的监听事件：
video.addEventListener(‘loadeddata’, xxxxx) // 当前帧加载完毕
video.addEventListener(‘loadedmetadata’, xxxxx) // 视频元数据加载完毕

注意：
点击查看视频时，同样会触发video.onloadeddata，因此，需在video.onloadeddata的回调方法中添加截取首帧和消息push操作的条件判断。