开发
API

camera

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

相机组件。该组件为原生组件。通过 tt.createCameraContext 可以获取相机上下文操作相机。

属性说明

属性名类型默认值必填说明最低支持版本
resolutionstringmedium分辨率,不支持动态修改,详情见 resolution 的合法值1.78.0
device-positionstringback摄像头朝向,详情见 device-position 的合法值1.78.0
flashstringoff闪光灯,详情见 flash 的合法值2.4.0
frame-sizestringmedium指定期望的相机帧数据尺寸,详情见 frame-size 的合法值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

flash 的合法值

说明最低支持版本
off关闭闪光灯2.4.0
torch开启闪光灯2.4.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 属性统一级别,否则图片可能会有拉伸。
点击纠错
评价此篇文档