截取視頻首幀圖片

基本框架：
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操作的條件判斷。