javascript - HTML5 MediaRecorder 实现摄像功能（详细示例代码）

最新推荐文章于 2024-09-10 12:55:25 发布

街尾杂货店&

最新推荐文章于 2024-09-10 12:55:25 发布

阅读量1.7k

点赞数 1

分类专栏： html5 javascript 文章标签： javascript chrome

本文链接：https://blog.csdn.net/weixin_50545213/article/details/128869356

版权

javascript 同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

html5

9 篇文章 2 订阅

订阅专栏

本文介绍了使用HTML5的MediaRecorder对象进行多媒体录音和录视频的基本流程，包括设置摄像预览、创建MediaRecorder实例、处理数据流以及生成和下载视频文件。由于浏览器兼容性问题，目前主要在Chrome和Firefox中得到良好支持。

摘要由CSDN通过智能技术生成

介绍

摄像基本流程，是录制一段视频流并保存为音视频文件。HTML5 MediaRecorder 对象提供了多媒体录音和录视频功能。

浏览器兼容性如下：

在这里插入图片描述
从上图所示，浏览器对 MediaRecorder 兼容性远不太好，目前只有 Chrome、Firefox 对 MediaRecorder支持较好。

实现代码

注意，摄像预览播放器 video 标签要设置静音 muted（消除回声导致的刺耳噪音）

const videoConstraints = { width: 1366, height: 768 };
let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
let mediaRecorder = new MediaRecorder(stream);
let mediaRecorderChunks = []; // 记录数据流

mediaRecorder.ondataavailable = (e) => {
    mediaRecorderChunks.push(e.data);
};

mediaRecorder.onstop = (e) => {
    // 通过Blob对象，创建文件二进制数据实例。
    let recorderFile = new Blob(mediaRecorderChunks, { 'type' : mediaRecorder.mimeType });
    mediaRecorderChunks = [];
    const file = new File([this.recorderFile], (new Date).toISOString().replace(/:|\./g, '-') + '.mp4', {
        type: 'video/mp4'
    });
    download(URL.createObjectURL(file));
    // 下载视频
    function download (src) {
        if (!src) return;
        const a = document.createElement('a');
        a.setAttribute('download', new Date());
        a.href = src;
        a.click();
    }
};

mediaRecorder.stop(); // 停止录制，触发onstop事件