Canvas录制视频

个人简介

👀个人主页：前端杂货铺
🙋‍♂️学习方向：主攻前端方向，正逐渐往全干发展
📃个人状态：研发工程师，现效力于中国工业软件事业
🚀人生格言：积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒Three.js🍖数据结构与算法体系教程

🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

文章目录

- 前言
- MediaRecorder
- Canvas
- 录制视频
- 尚存问题

前言

大家好，这里是前端杂货铺。

今天我们要探讨一个新问题，如何在 Canvas 画布上录制视频并输出？

Canvas录屏

直入主题，基本技术路线：MediaRecorder录制媒体流 - Canvas绘制动画 - 导出录像视频

以上方式录制的视频还存在一些问题，我们在下文将逐步分析和解决…

MediaRecorder

MediaRecorder 是 MediaStream Recording API 提供的用来进行 媒体轻松录制的接口，他需要通过调用 MediaRecorder() 构造方法进行实例化

MediaStream 接口是一个 媒体内容的流。一个流包含几个轨道，比如视频和音频轨道

简单地说，MediaStream 是一个用于表示音频或视频流的接口，而 MediaRecorder 则是对指定的 MediaStream 进行录制的类。它们都是WebRTC（Web实时通信）的一部分，通常一起使用来实现音视频通话或录制功能

MediaRecorder() 构造函数会创建一对指定的 MediaStream 进行录制的 MediaRecorder 对象

var mediaRecorder = new MediaRecorder(stream[, options]);

参数说明：

stream： MediaStream 将要录制的流。它可以是来自于使用 navigator.mediaDevices.getUserMedia() 创建的流或者来自于 <audio>, <video> 以及 <canvas> DOM 元素

备注：navigator.mediaDevices.getUserMedia() 用于获取用户的媒体设备，如音频和视频的输入设备

options：一个字典对象，它可以包含下列属性：

mimeType: 为新构建的 MediaRecorder 指定录制容器的 MIME 类型。在应用中通过调用 MediaRecorder.isTypeSupported() 来检查浏览器是否支持此种 mimeType
audioBitsPerSecond: 指定音频的比特率
videoBitsPerSecond: 指定视频的比特率
bitsPerSecond: 指定音频和视频的比特率。此属性可以用来指定上面两个属性。如果上面两个属性只有其中之一和此属性被指定，则此属性可以用于设定另外一个属性。

备注：如果视频/音频的比特率没有指定，视频默认采用的比特率是 2.5Mbps，但音频的默认比特率并不固定，音频的默认比特率根据采样率和轨道数自适应。

相关知识：

mimeType：控制文件类型，可以使用 MediaRecorder.isTypeSupported('video/webm') 和 MediaRecorder.isTypeSupported('video/mp4') 查看浏览器支持的视频格式（目前谷歌支持 webm 而不支持 mp4）
比特率：单位时间内传输或处理的比特数量（bit），它反映了数据传输的速度，比特率越高，传输速度越快

更多详细内容请参照官方文档：MediaRecorder官方文档 | MediaStream官方文档

Canvas

Canvas 是 HTML5 的新元素，它用于 图形的绘制，绘制图形需要通过脚本（通常是JavaScript）来完成。

下面我们来创建一个画布，并在画布上绘制文字：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #webm-canvas {
            width: 200px;
            height: 100px;
            border: 1px solid #d3d3d3;
        }
    </style>
</head>

<body>
    <canvas id="webm-canvas"></canvas>
</body>
<script>
    let canvas = document.getElementById("webm-canvas");
    // 创建context对象，该对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
    let context = canvas.getContext("2d");
    // 定义字体
    context.font="30px Arial";
    // 设置颜色
    context.fillStyle = "orange";
    // 在 canvas 上绘制实心的文本
    context.fillText("前端杂货铺", 10, 50);
</script>

</html>

在这里插入图片描述

更多详细内容请参照其他文档：HTML5-Canvas

录制视频

下面我们就使用 MediaRecorder 和 Canvas 及 DOM 操作，实现基本的 Canvas 视频录制

运行代码后先点击开始录制，数秒过后点击下载录像，即可在浏览器下载录像
在浏览器中打开录像，即可观看（可拖动进度条，可播放可暂停）

Canvas录制视频

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            box-shadow: 0 0 10px gray;
            display: block;
        }

        body {
            text-align: center;
        }

        button {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <canvas id="webm-canvas" height=500 width=500 style="margin:auto;"></canvas>
    <button onclick="startRecording()">开始录制</button>
    <button onclick="stopAndblobDownload()">下载录像</button>
    <script>
        let canvas = document.getElementById("webm-canvas");
        let context = canvas.getContext('2d');
        window.requestAnimationFrame(draw);
        var x = 0;
        var speed = 1;
        var text = "前端杂货铺";
        var fontSize = 20;

        function draw() {
            // 清空画布（否则字体移动后颜色会遗留在画布上）
            context.clearRect(0, 0, canvas.width, canvas.height);
            // 设置字体
            context.font = fontSize + "px Arial"; //设置字体大小和类型  
            context.fillStyle = "orange"; //设置文本颜色  
            context.fillText(text, x, canvas.height / 2); //绘制文本  
            // x要移动
            x += speed;
            // 如果文本达到画布边缘，改变方向  
            if (x > canvas.width - 100 || x < 0) {
                speed = -speed;
            }
            window.requestAnimationFrame(draw);
        }

        let allChunks = [];
        // 实时视频捕获画布，参数为帧率
        const stream = canvas.captureStream(60); // 60 FPS 
        // 创建一个对指定的 stream 进行录制的 MediaRecorder 对象
        const recorder = new MediaRecorder(stream, {
            mimeType: 'video/webm;codecs=vp9' // 设置媒体类型
        });
        // 当数据有效时触发的事件，数据有效时可以把数据存储到缓存区里
        recorder.ondataavailable = e => {
            console.log("TCL: e", e)
            allChunks.push(
                e.data
            );
        }
        // 结束并下载到浏览器默认位置
        function stopAndblobDownload() {
            // 结束录像
            recorder.stop();
            // createElement() 方法通过指定名称创建一个元素
            const link = document.createElement('a');
            link.style.display = 'none';
            // 创建一个 Blob 对象，用于存储二进制数据
            const fullBlob = new Blob(allChunks);
            // 创建一个包含 Blob 数据的 URL
            const downloadUrl = window.URL.createObjectURL(fullBlob);
            // 获取或设置链接的 URL 属性
            link.href = downloadUrl;
            // 点击链接时，浏览器下载文件
            link.download = `前端杂货铺${Math.random().toFixed(4)}.webm`;
            // 向节点的子节点列表的末尾添加新的子节点
            document.body.appendChild(link);
            // 模拟用户点击链接的操作
            link.click();
            // 删除 HTML 文档中的链接元素
            link.remove();
        }
        // 开始录像
        function startRecording() {
            recorder.start(10);
        }
    </script>
</body>

</html>