JS API 列表

基础

TTML

网络

媒体

图片

录音

音频

视频

相机

特效相机

Canvas 录制

tt.createMediaRecorder

MediaRecorder

rtc-room 实时通信

地图

文件

数据缓存

地理位置

设备

画布

界面

页面导航

开放接口

行业开放

第三方平台

其它

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收藏我的收藏

语法