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​

扫码体验​

代码示例​

html
复制
<!-- index.ttml -->
<camera
device-position="back"
bindinitdone="onInitdone"
binderror="onError"
bindstop="onStop"
style="width: 100%; height: 300px;"
>
</camera>
JavaScript
复制
// 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-sizeresolution 属性统一级别,否则图片可能会有拉伸。​