EffectCameraStream.paintTo

收藏

我的收藏

EffectCameraStream.paintTo(options)

<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();
    });
  },
});