camera 相机
收藏
我的收藏

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

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

属性说明

属性名	类型	默认值	必填	说明	最低支持版本
mode	string	normal	否	模式，不支持动态修改，详情见 mode 的合法值。	2.41.0
resolution	string	medium	否	分辨率，不支持动态修改，详情见 resolution 的合法值。	1.78.0
device-position	string	back	否	摄像头朝向，详情见 device-position 的合法值。	1.78.0
flash	string	off	否	闪光灯，详情见 flash 的合法值。	2.4.0
frame-size	string	medium	否	指定期望的相机帧数据尺寸，详情见 frame-size 的合法值。	1.78.0
bindinitdone	EventHandle	无	否	相机初始化完成时触发，e.detail = {maxZoom}。	1.78.0
binderror	EventHandle	无	否	用户不允许使用摄像头或相机异常时触发。	1.78.0
bindstop	EventHandle	无	否	摄像头在非正常终止时触发，如退出后台/跳转页面/电话中断等情况。	1.78.0
bindscancode	EventHandle	无	否	在扫码识别成功时触发，仅在 mode="scanCode" 时生效。	2.41.0

mode 的合法值

值	说明	最低支持版本
normal	相机模式	1.78.0
scanCode	扫码模式	2.41.0

resolution 的合法值

值	说明	最低支持版本
low	低	1.78.0
medium	中	1.78.0
high	高	1.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: "请授权相机后重新进入"
          });
        }
      },
    });
  },
  onInitdone(e) {
    tt.showToast({
      title: "相机初始化完成",
    });
  },
  onStop(e) {
    console.log("相机中断");
  },
  onError(e) {
    tt.showModal({
      content: "相机出错了：" + e.detail.errMsg,
    });
  },
});

Bug & Tip

•

Tip：开发者工具从基础库 2.96.0 开始支持 camera 能力，在【抖音开发者工具】中调试 camera 能力前，需要先在电脑系统设置中给【抖音开发者工具】开启【麦克风】和【摄像头】权限；

•

Tip：同一个页面只能插入一个组件；

•

Tip：如需使用帧回调，建议 frame-size 和 resolution 属性统一级别，否则图片可能会有拉伸。

camera 相机收藏我的收藏