开发
API

EffectCameraStream.paintTo

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

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

语法

EffectCameraStream.paintTo(options)

参数说明

options 为 object 类型,属性如下:

属性名类型默认值必填说明最低支持版本
canvasCanvas 对象绘制到的目标画布对象2.19.0
dxnumber0绘制到 canvas 的 x 轴位置2.19.0
dynumber0绘制到 canvas 的 y 轴位置2.19.0
sxnumber0要绘制 Video 对象的起始 x 轴位置位置,即截取视频的起始位置坐标2.19.0
synumber0要绘制 Video 对象的起始 y 轴位置位置,即截取视频的起始位置坐标2.19.0
successfunction接口调用成功的回调函数2.19.0
failfunction接口调用失败的回调函数(包含调用失败,以及取消操作)2.19.0
completefunction接口调用结束的回调函数(调用成功、失败都会执行),回调参数同成功或失败回调2.19.0

回调成功

回调参数为 object 类型,属性如下:

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

回调失败

回调参数为 object 类型,属性如下:

属性类型说明最低支持版本
errMsgstring"paintTo:fail"+ 错误详情2.19.0
errNonumber错误码2.19.0

错误码

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

代码示例

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

<canvas type="webgl" id="myCanvas"></canvas>
<button type="primary" bindtap="requestEffectCamera">打开相机</button>
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();
    });
  },
});

Bug & Tip

  • Tip:当前为将数据源等比例绘制到 canvas,不支持指定数据源比例。
点击纠错
评价此篇文档