camera
系统相机。该组件是原生组件,使用时请注意相关限制。
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
device-position | String | back | 否 | 摄像头朝向 | |
flash | String | auto | 否 | 闪光灯 | |
bindinitdone | EventHandle | 否 | 相机初始化完成时触发,e.detail = {maxZoom} | ||
bindstop | EventHandle | 否 | 摄像头在非正常终止时触发,如退出后台等情况 | ||
binderror | EventHandle | 否 | 用户不允许使用摄像头时触发 |
device-position 的合法值
值 | 说明 | 最低版本 |
---|---|---|
front | 前置 | |
back | 后置 |
flash 的合法值
值 | 说明 | 最低版本 |
---|---|---|
auto | 自动 | |
on | 打开 | |
off | 关闭 | |
torch | 常亮 |
Tips:
- 同一页面只能插入一个 camera 组件
示例代码:
<!--pages/component/pages/camera/camera.mcml-->
<view class="container">
<view class="statement">相机。</view>
<view>
<camera style="height: 400rpx;"
device-position="{{devicePosition}}"
flash="{{flash}}"
bindinitdone="bindinitdone"
bindscancode="bindscancode"
bindstop="bindstop"
binderror="binderror"></camera>
</view>
<view>
<button bindtap="setFlash">闪光灯({{flash}})</button>
<button bindtap="setDevicePosition">摄像头朝向({{devicePosition}})</button>
<slider value="1" max="{{maxZoom}}" min="1" show-value="{{true}}" bindchange="zoomChanged">设置缩放级别</slider>
<button bindtap="takePhoto">拍照</button>
<button bindtap="takeRecode">{{recodeStatus == 0 ? '开始录像' : '结束录像'}}</button>
</view>
<view class="cssname">onCameraFrame:获取 Camera 实时帧数据</view>
<text space="nbsp" user-select="true" class="scrollDetail">{{onCameraFrameDetail}}</text>
<view class="cssname">bindinitdone:相机初始化完成时触发, 参数event.detail</view>
<text space="nbsp" user-select="true" class="scrollDetail">{{bindinitdone}}</text>
<view class="cssname">bindstop:摄像头在非正常终止时触发, 参数event.detail</view>
<text space="nbsp" user-select="true" class="scrollDetail">{{bindstop}}</text>
<view class="cssname">binderror:用户不允许使用摄像头时触发, 参数event.detail</view>
<text space="nbsp" user-select="true" class="scrollDetail">{{binderror}}</text>
</view>
// pages/component/pages/camera/camera.js
var flashValues = ['auto', 'on', 'off', 'torch']
var frameSizeValues = ['small', 'medium', 'large']
Page({
data: {
recodeStatus: 0,
flash: 'auto',
devicePosition: 'back'
},
setFlash: function(e){
var index = flashValues.indexOf(this.data.flash);
index += 1;
if(index >= flashValues.length){ index = 0; }
this.setData({
flash: flashValues[index]
})
},
setDevicePosition: function(e){
this.setData({
devicePosition: this.data.devicePosition == 'back' ? 'front' : 'back'
})
},
takePhoto: function(){
var context = mc.createCameraContext();
context.takePhoto({
success: function(res){
mc.getImageInfo({
src: res.tempImagePath,
complete: function(res) {
console.log(res);
}
})
mc.previewImage({
urls: [res.tempImagePath],
})
},
fail: function(res){
mc.showModal({
title:'拍照错误',
content: res.errMsg,
showCancel: false
})
}
})
},
takeRecode: function(){
var context = mc.createCameraContext();
var _this = this;
if(this.data.recodeStatus == 0){
context.startRecord({
timeoutCallback: function(res){
_this.setData({
recodeStatus: 0
})
_this.previewRecode(res);
},
success: function(res){
_this.setData({
recodeStatus: 1
})
},
fail: function(res){
mc.showModal({
title:'开始录像错误',
content: res.errMsg,
showCancel: false
})
}
})
}
else{
context.stopRecord({
compressed: false,
success: function(res){
_this.setData({
recodeStatus: 0
})
_this.previewRecode(res);
},
fail: function(res){
mc.showModal({
title:'停止录像错误',
content: res.errMsg,
showCancel: false
})
}
})
}
},
previewRecode: function(res){
mc.previewMedia({
sources: [
{
url: res.tempVideoPath,
poster: res.tempThumbPath,
type: 'video'
}
]
})
},
zoomChanged: function(e){
var context = mc.createCameraContext();
context.setZoom({
zoom: e.detail.value,
complete: function (res) {
console.log(res)
}
})
},
bindinitdone : function(e){
this.setData({
bindinitdone: JSON.stringify(e, null, 2),
maxZoom: e.detail.maxZoom
})
},
bindstop: function(e){
this.setData({
bindstop: JSON.stringify(e, null, 2)
})
},
binderror: function(e){
this.setData({
binderror: JSON.stringify(e, null, 2)
})
}
})