开发
API

CameraContext.onCameraFrame

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

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

语法

CameraContext.onCameraFrame(callback)

参数说明

callback

类型默认值必填说明最低支持版本
function回调函数1.78.0

回调函数参数说明

object 类型,属性如下:

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

返回值

CameraFrameListener

扫码体验

请使用字节宿主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: "请授权相机后重新进入", // 内容
            success: (res) => {
              this.auth();
            },
          });
        }
      },
      fail: (err) => {
        tt.showModal({
          title: "获取授权失败",
          content: JSON.stringify(err),
        });
      },
    });
  },

  auth() {
    tt.authorize({
      scope: "scope.camera",
      success: () => {
        tt.showToast({
          title: "授权成功",
        });
        tt.reLaunch({
          url: "/pages/index/index",
        });
      },
      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),
    });
  },
});

Bug & Tip

  • Tip: 使用该接口需同时在 camera 组件属性中指定 frame-size 属性;
  • Tip:开发者工具暂不支持此能力,请用真机扫码调试。
点击纠错
该文档是否对你的开发有所帮助?
有帮助
没帮助
该文档是否对你的开发有所帮助?
有帮助
没帮助