开发
API

camera

基础库 1.78.0 开始支持本组件。

相机组件。该组件为原生组件。相关 API : tt.createCameraContext。为了提供良好的用户体验构建健康的生态环境,camera 组件接入调整为申请制,如需使用此能力请走申请流程,参考【camera 相机组件申请流程】

属性说明

属性名类型默认值必填说明最低支持版本
resolutionstringmedium分辨率,不支持动态修改1.78.0
device-positionstringback摄像头朝向1.78.0
frame-sizestringmedium指定期望的相机帧数据尺寸1.78.0
bindinitdoneeventhandle相机初始化完成时触发,e.detail = {maxZoom}1.78.0
binderroreventhandle用户不允许使用摄像头或相机异常时触发1.78.0
bindstopeventhandle摄像头在非正常终止时触发,如退出后台/跳转页面/电话终端等情况1.78.0

resolution 的有效值

说明最低支持版本
low1.78.0
medium1.78.0
high1.78.0

device-position 的有效值

说明最低支持版本
front前置1.78.0
back后置1.78.0

frame-size 的有效值

说明最低支持版本
small小尺寸1.78.0
medium中尺寸1.78.0
large大尺寸1.78.0

代码示例

开发者工具中预览

<!-- index.ttml -->
<camera
  device-position="back"
  bindinitdone="onInitdone"
  binderror="onError"
  bindstop="onStop"
  style="width: 100%; height: 300px;"
>
</camera>
// index.js
Page({
  data: {},
  onLoad: function (options) {
    tt.getSetting({
      success: (res) => {
        let cameraAllowed = res.authSetting["scope.camera"];
        if (!cameraAllowed) {
          tt.showToast({
            title: "请授权相机后重新进入", // 内容
            success: (res) => {
              this.auth();
            },
          });
        }
      },
    });
  },
  auth() {
    tt.authorize({
      scope: "scope.camera",
      success() {
        tt.showToast({
          title: "授权成功",
          success() {
            tt.reLaunch({
              url: "/pages/index/index",
            });
          },
        });
      },
      fail(err) {
        tt.showModal({
          content: "授权失败:" + JSON.stringify(err),
        });
      },
    });
  },
  onInitdone(e) {
    tt.showToast({
      title: "相机初始化完成",
    });
  },
  onStop(e) {
    console.log("相机中断");
  },
  onError(e) {
    tt.showModal({
      content: "相机出错了:" + e.detail.errMsg,
    });
  },
});

扫码体验

请使用字节宿主APP扫码

Bug & Tip

  • Tip:开发者工具暂不支持本组件及相关 API,请使用真机扫码预览调试。
  • Tip:同一个页面只能插入一个 camera 组件。
  • Tip:如需使用帧回调,建议 frame-sizeresolution 属性统一级别,否则图片可能会有拉伸。
点击纠错
评价此篇文档