抖音开放平台Logo
开发者文档
“/”唤起搜索
控制台
  • JS API 列表
  • 基础
  • TTML
  • 网络
  • 媒体
  • 图片
  • 录音
  • 音频
  • 视频
  • 相机
  • 特效相机
  • tt.createEffectCameraStream
  • EffectCameraStream
  • EffectCameraStream
  • EffectCameraStream.request
  • EffectCameraStream.onRequest
  • EffectCameraStream.offRequest
  • EffectCameraStream.play
  • EffectCameraStream.onPlay
  • EffectCameraStream.offPlay
  • EffectCameraStream.stop
  • EffectCameraStream.onStop
  • EffectCameraStream.offStop
  • EffectCameraStream.paintTo
  • EffectCameraStream.onError
  • EffectCameraStream.offError
  • EffectCameraStream.dispose
  • EffectCameraVideo
  • Canvas 录制
  • rtc-room 实时通信
  • 地图
  • 文件
  • 数据缓存
  • 地理位置
  • 设备
  • 画布
  • 界面
  • 页面导航
  • 开放接口
  • 行业开放
  • 第三方平台
  • 其它
  • 生活服务(即将废弃)
  • 小程序智能体
  • 基础库 2.19.0 开始支持本方法,低版本需做兼容处理
    将相机数据绘制到指定的 canvas 画布区域(仅适用于 canvas V2)。

    语法

    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 区域。
    <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,不支持指定数据源比例。