tt.createMediaRecorder
收藏
我的收藏

基础库 2.52.0 开始支持本方法，低版本需做兼容处理，这是一个同步方法。

小程序中的 Canvas 录制器MediaRecorder 可以录制 Canvas（v2）上绘制的所有画面，可以精确的控制录制的开始暂停，并且在录制结束时会自动导出 mp4 视频文件。

语法

tt.createMediaRecorder(canvas, options)

参数说明

canvas

类型	默认值	必填	说明	最低支持版本
Canvas	无	是	要录制的 Canvas 实例，可通过 SelectorQuery 或者tt.createOffscreenCanvas获取。	2.52.0

options

object 类型，属性如下：

属性名	类型	默认值	必填	说明	最低支持版本
width	number	480	否	视频文件的宽度	2.52.0
height	number	640	否	视频文件的高度	2.52.0
videoBitsPerSecond	number	3000	否	视频文件比特率，单位 kbps	2.52.0
gop	number	12	否	视频文件的关键帧间隔（key frame interval）	2.52.0
fps	number	60	否	视频文件的 fps，实际产出的视频文件的帧率可能和此处给定的帧率不一致	2.52.0

注意，如果将 fps 设置为 0，那么录制器会进入手动录制模式，在手动录制模式中需要在 start 之后主动触发 requestFrame 调用才会录制一帧，而在自动录制模式中 start 之后会自动录制每一帧。手动模式允许用户对录制视频的方式进行更加精细的控制。

返回值

MediaRecorder

扫码体验

代码示例

开发者工具中预览

<canvas id="myCanvas" type="2d"></canvas>

Page({
  onReady() {
    tt.createSelectorQuery()
      .select("#myCanvas")
      .node()
      .exec((res) => {
        // 获取 canvas 实例
        const canvas = res[0].node;
        const canvasCtx = canvas.getContext("2d");
        this.recorder = tt.createMediaRecorder(canvas, {
          width: canvas.width, // video width
          height: canvas.height, // video height
          videoBitsPerSecond: 1000, // bit rate in kbps
          gop: 12, // key frame interval
          fps: 60, // frames per second
        });
        console.log(`${this.recorder}`);
      });
  },
});

Bug & Tip

•

Tip：目前仅支持 Canvas v2 版本的画面录制；

•

Tip：开始录制前需要确保 Canvas 已有对应的 Context。

tt.createMediaRecorder收藏我的收藏

语法