Video标签抓拍录像——Vue3+ts实现

video标签抓拍录像

1. 先获取video的dom节点

let video = document.getElementById('video')

2. 通过dom节点获取视频流

const stream = video.captureStream();

3. 通过获取到的视频流创建mediaRecorder

let mediaRecorder = new MediaRecorder(stream);

4. 调用mediaRecorder的start方法开始录像

mediaRecorder.start();

5. 录像结束后调用mediaRecorder的stop方法停止录像,并创建后面要存放二进制流的数组

mediaRecorder.stop();
let recordedChunks = [];

6. 通过监听mediaRecorder的ondataavailable事件将录制到的二进制视频流存放到数组中

mediaRecorder.ondataavailable = (event) => {
      //判断二进制数据流是否存在
      if (event.data.size > 0) {
        //存在则存放到recordedChunks
        recordedChunks.push(event.data);
        // 将流数据转成webm的blob数据，webm是谷歌浏览器特有的播放方式，所以转成webm格式
        const blob = new Blob(recordedChunks, { type: 'video/webm' });
        //再将blob转成url提供给video播放
        const url = URL.createObjectURL(blob);
        //将视频文件命名
        const name = `录像.webm`;
      }
    };

最后拿到的url就可以在网页上播放和下载啦~