EffectCameraStream.paintTo
收藏
我的收藏

基础库 2.19.0 开始支持本方法，低版本需做兼容处理。

将相机数据绘制到指定的 canvas 画布区域（仅适用于 canvas V2）。

语法

Plain Text复制
EffectCameraStream.paintTo(options)

参数说明

options 为 object 类型，属性如下：

属性名	类型	默认值	必填	说明	最低支持版本
canvas	Canvas 对象		是	绘制到的目标画布对象	2.19.0
dx	number	0	否	绘制到 canvas 的 x 轴位置	2.19.0
dy	number	0	否	绘制到 canvas 的 y 轴位置	2.19.0
sx	number	0	否	要绘制 Video 对象的起始 x 轴位置位置，即截取视频的起始位置坐标	2.19.0
sy	number	0	否	要绘制 Video 对象的起始 y 轴位置位置，即截取视频的起始位置坐标	2.19.0
success	function		否	接口调用成功的回调函数	2.19.0
fail	function		否	接口调用失败的回调函数（包含调用失败，以及取消操作）	2.19.0
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行），回调参数同成功或失败回调	2.19.0

回调成功

回调参数为 object 类型，属性如下：

属性	类型	说明	最低支持版本
errMsg	string	"paintTo:ok"	2.19.0

回调失败

回调参数为 object 类型，属性如下：

属性	类型	说明	最低支持版本
errMsg	string	"paintTo:fail"+ 错误详情	2.19.0
errNo	number	错误码	2.19.0

错误码

取值	说明
21501	未申请相机资源，请于 EffectCameraStream.request 成功后调用

代码示例

预期表现：点击【打开相机】，相机数据将绘制到 canvas 区域。

html复制
<canvas type="webgl" id="myCanvas"></canvas>
<button type="primary" bindtap="requestEffectCamera">打开相机</button>

js复制
Page({
  onShow: function () {
    this.effectCameraStream = tt.createEffectCameraStream(this);
    this.effectCameraStream.onError(this.onError);
    this.effectCameraStream.onRequest(this.onRequest);
    this.effectCameraStream.onPlay(this.onPlay);
  },
  requestEffectCamera() {
    tt.createSelectorQuery()
      .select("#myCanvas")
      .node()
      .exec((res) => {
        this.canvas = res[0].node;
        this.canvasCtx = this.canvas.getContext("webgl");

        this.effectCameraStream.request({
          orientation: "back",
        });
      });
  },
  onError(error) {
    console.log("onError", error);
    const { type, errMsg } = error;
    tt.showModal({
      title: `onError ${type}`,
      content: errMsg,
    });
  },
  onRequest() {
    console.log("相机资源申请成功");
    this.effectCameraStream.play();
  },
  onPlay(cameraVideo) {
    console.log("相机数据", cameraVideo);
    tt.showToast({
      title: "相机打开",
    });
    this.paint();
  },
  paint() {
    this.effectCameraStream.paintTo({
      canvas: this.canvasCtx.canvas,
      dx: 0,
      dy: 0,
      sx: 0,
      sy: 0,
      success: () => {
        // 绘制成功
      },
      fail: (err) => {
        tt.showModal({
          title: "绘制失败",
          content: err.errMsg,
        });
      },
    });
    this.requestId = this.canvas.requestAnimationFrame(() => {
      this.paint();
    });
  },
});