camera
基础库 1.78.0 开始支持本组件。
相机组件。该组件为原生组件。相关 API : tt.createCameraContext。为了提供良好的用户体验构建健康的生态环境,camera 组件接入调整为申请制,如需使用此能力请走申请流程,参考【camera 相机组件申请流程】。
属性说明
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
---|---|---|---|---|---|
resolution | string | medium | 否 | 分辨率,不支持动态修改 | 1.78.0 |
device-position | string | back | 否 | 摄像头朝向 | 1.78.0 |
frame-size | string | medium | 否 | 指定期望的相机帧数据尺寸 | 1.78.0 |
bindinitdone | eventhandle | 否 | 相机初始化完成时触发,e.detail = {maxZoom} | 1.78.0 | |
binderror | eventhandle | 否 | 用户不允许使用摄像头或相机异常时触发 | 1.78.0 | |
bindstop | eventhandle | 否 | 摄像头在非正常终止时触发,如退出后台/跳转页面/电话终端等情况 | 1.78.0 |
resolution 的有效值
值 | 说明 | 最低支持版本 |
---|---|---|
low | 低 | 1.78.0 |
medium | 中 | 1.78.0 |
high | 高 | 1.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-size
和resolution
属性统一级别,否则图片可能会有拉伸。
点击纠错
评价此篇文档