一、准备工作
在调用小程序摄像头之前,需要先在小程序后台配置好相应的权限。
wx.getSetting({
success: res => {
if (!res.authSetting['scope.camera']) {
wx.authorize({
scope: 'scope.camera',
success () {
// 用户已经同意小程序使用摄像头
},
fail () {
// 用户拒绝了小程序使用摄像头
}
})
}
}
})
上述代码中,我们首先使用wx.getSetting获取用户的授权信息,如果用户没有授权小程序使用摄像头,我们再使用wx.authorize来请求授权。
当然,在获取授权之前,我们还需要在小程序的app.json文件中声明相应的权限:
{
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
},
"scope.record": {
"desc": "你的录音功能将用于小程序语音识别效果展示"
},
"scope.camera": {
"desc": "你的摄像头将用于小程序拍照、录像、扫码等效果展示"
}
}
}
二、调用摄像头
小程序调用摄像头需要使用wx.createCameraContext来创建相机上下文对象。
const cameraContext = wx.createCameraContext();
Page({
takePhoto() {
cameraContext.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
photoSrc: res.tempImagePath
})
}
})
}
})
上述代码中,我们首先调用wx.createCameraContext创建相机上下文对象,然后在takePhoto方法中调用相机拍照,拍照成功后将图片路径赋值给photoSrc变量展示出来。
三、调用摄像头并录制视频
与拍照类似,小程序调用摄像头录制视频同样需要使用wx.createCameraContext来创建相机上下文对象。
const cameraContext = wx.createCameraContext();
Page({
startRecord() {
cameraContext.startRecord({
success: (res) => {
console.log('startRecord');
}
});
},
stopRecord() {
cameraContext.stopRecord({
success: (res) => {
this.setData({
videoSrc: res.tempVideoPath
})
}
});
}
})
上述代码中,我们分别调用相机上下文对象的startRecord和stopRecord方法来开始、结束视频录制,录制成功后将视频路径赋值给videoSrc变量展示出来。
四、调用摄像头并扫码
小程序调用摄像头还可以扫描二维码,需要使用wx.scanCode来实现。
wx.scanCode({
success: (res) => {
console.log(res)
}
})
上述代码中,当调用wx.scanCode成功后,我们可以在控制台中打印扫描到的二维码信息。
五、调用摄像头并识别人脸
小程序调用摄像头还可以识别人脸,需要使用wx.faceDetect来实现。
const context = wx.createCameraContext();
const listener = context.onCameraFrame((frame) => {
wx.faceDetect({
frame,
success: (res) => {
console.log(res);
}
});
});
listener.start();
上述代码中,我们首先使用wx.createCameraContext创建相机上下文对象,然后调用相机的onCameraFrame方法监听摄像头数据,当有数据传入时,使用wx.faceDetect方法识别人脸并将结果打印在控制台中。
六、总结
本文介绍了小程序调用摄像头的准备工作、拍照、录制视频、扫码和识别人脸等方面,希望能够帮助开发者在小程序开发中更加灵活地调用摄像头。