抖音开放平台Logo
控制台

CameraContext.onCameraFrame
收藏
我的收藏

基础库 1.78.0 开始支持本方法，这是一个同步方法。

获取 Camera 实时帧数据，返回监听器 CameraFrameListener。

前提条件无
业务背景无
使用限制无
注意事项
  • Tip: 使用该接口需同时在 camera 组件属性中指定 frame-size 属性；
  • Tip：开发者工具暂不支持此能力，请用真机扫码调试。
支持沙盒
否
相关教程无

语法

CameraContext.onCameraFrame(callback)

参数说明

callback

类型默认值必填说明最低支持版本
function是

回调函数

1.78.0

callback 是一个回调函数，接收 object 类型的参数，属性如下：

属性名类型说明最低支持版本
widthnumber
图像数据矩形的宽度(单位：像素)
1.78.0
heightnumber
图像数据矩形的高度
1.78.0
dataarrayBuffer
图像像素点数据，一维数组，每四项表示一个像素点的 rgba
1.78.0
timestampnumber
当前相机画面对应的时间戳，单位是纳秒
1.78.0

返回值

类型说明最低支持版本
object

CameraFrameListener

1.78.0

扫码体验

请使用字节宿主APP扫码

代码示例

开发者工具中预览

<!-- index.ttml -->
<camera class="camera" frame-size="medium" device-position="back" binderror="onError"></camera>
<button type="primary" size="default" bindtap="startOnFrame">
  开始接收帧数据
</button>
<view class="page-body">
  <view>第 {{counter}} 帧</view>
</view>
// index.js
Page({
  data: {
    counter: 0,
  },
  onLoad: function (options) {
    tt.getSetting({
      success: (res) => {
        let cameraAllowed = res.authSetting["scope.camera"];
        if (!cameraAllowed) {
          tt.showToast({
            title: "请授权相机后重新进入"
          });
        }
      },
      fail: (err) => {
        tt.showModal({
          title: "获取授权失败",
          content: JSON.stringify(err),
        });
      },
    });
  },
  startOnFrame(e) {
    const cameraCtx = tt.createCameraContext();
    const listener = cameraCtx.onCameraFrame((frame) => {
      this.setData({
        counter: this.data.counter + 1,
      });
    });

    listener.start({
      success: (res) => {
        tt.showToast({ title: "开始接收帧数据" });
      },
      fail: (err) => {
        tt.showModal({
          title: "接收失败",
          content: JSON.stringify(err),
        });
      },
    });
  },
  onError(err) {
    tt.showModal({
      title: "相机出错了",
      content: JSON.stringify(err),
    });
  },
});