先上效果图
这是小程序上的表现：
这是ios app上的表现：
分析：看到这个需求，我们第一反应是使用uniapp上的camera组件，然后在用cover-image添加一个图片就可以达到要求。但是camera组件有兼容性的问题，它不支持app端。于是参考别人的写法，看到有一个live-pusher直播流组件，用nvue写就可以兼容app。
技术拆分：
1.小程序端使用camera组件。页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。
2.App端使用直播推流 live-pusher 组件，官方上说：如app平台的vue页面需要支持直播推流，需编写条件编译代码，使用 plus.video.LivePusher，业务指南、规范文档。还是推荐直接使用nvue里的live-pusher组件。所以我们使用nvue格式来代替vue格式的页面。
不管是camera组件还是live-pusher组件。他们都是原生组件，所以必须使用cover-image、cover-view来制作覆盖层。
<!--
* @Descripttion: 照片OCR取景框页面，2个功能。1.实现相机+取景框的拍照组合。2.裁剪取景框内的元素。
拍照：1.APP端使用<live-pusher> 直播流 模拟相机窗口。需要在manifest.json -> APP权限模块里勾选 LivePusher直播流
2.小程序端只用<camera>组件模拟相机窗口。
裁剪：1.APP端无法使用canvas的API，因为用的是nvue文件，目前不支持官方canvas的API，可以使用官方提供的gcanvas的API。（gcanvas的drawImage不允许临时路径）
2.小程序端通过canvas提供的API可实现。
关于gcanvas 参考官方示例 https://github.com/dcloudio/NvueCanvasDemo
* @version:
* @Author: dal
* @Date: 2021-12-13 10:59:41
* @LastEditors: dal
* @LastEditTime: 2021-12-29 14:13:31
-->
<template>
<view class="live-camera" :style="{ width: `${windowWidth}px`, height: `${windowHeight}px` }">
<view class="preview" :style="{ width: `${windowWidth}px`, height:`${windowHeight - 90 }px` }">
<!-- #ifdef APP-PLUS -->
<live-pusher
v-if="showLive"
id="livePusher"
ref="livePusher"
class="livePusher"
mode="FHD"
beauty="0"
whiteness="0"
:aspect="aspect"
min-bitrate="1000"
audio-quality="16KHz"
device-position="back"
:auto-focus="true"
:muted="true"
:enable-camera="true"
:enable-mic="false"
:zoom="false"
@statechange="statechange"
@error = "error"
:style="{ width: `${cameraWidth }px`, height: `${windowHeight - 90 }px` }"
></live-pusher>
<!-- #endif -->
<!-- #ifdef MP -->
<camera :style="{ width: `${cameraWidth }px`, height: `${windowHeight - 90 }px` }" :device-position="devicePosition"></camera>
<!-- #endif -->
<!--辅助线-->
<cover-view class="outline-box" :style="{ width: `${windowWidth }px`, height: `${windowHeight - 90}px` }">
<cover-image v-if="type === '0'" class="outline-img" src="../static/images/regist/k-sfz.png" ></cover-image>
<cover-image v-else-if="type === '1'" class="outline-img" src="../static/images/regist/k-sfzb.png" ></cover-image>
<cover-image v-else-if="type === '2'" class="outline-img1" src="../static/images/regist/jsz-qjk.png" ></cover-image>
<cover-image v-else-if="type === '3'" class="outline-img1" src="../static/images/regist/xsz-qjk.png" ></cover-image>
<cover-image v-else-if="type === '4'" class="outline-img" src="../static/images/regist/k-cyzgz.png" ></cover-image>
<cover-image v-else-if="type === '5'" class="outline-img" src="../static/images/regist/k-dlysz.png" ></cover-image>
<ksfz />
</cover-view>
</view>
<view class="menu">
<!--底部菜单区域背景-->
<cover-image class="menu-mask" src="../static/images/regist/bar.png"></cover-image>
<!--返回键-->
<cover-image class="menu-back" @tap="back" src="../static/images/regist/back2.png"></cover-image>
<!--快门键-->
<cover-image class="menu-snapshot" @tap="snapshot" src="../static/images/regist/btn.png"></cover-image>
<!--反转键-->
<cover-image class="menu-flip" @tap="flip" src="../static/images/regist/flip.png"></cover-image>
</view>
<canvas-crop ref="crop"></canvas-crop>
</view>
</template>
<script>
import { judgeIosPermission,requestAndroidPermission,gotoAppPermissionSetting } from "@/common/scripts/permission.js"
import { uploadFileOSS } from "@/api/oss.js"
import { errorMsg } from "@/common/scripts/message.js"
import config from "@/config/index.js"
export default {
data() {
return {
devicePosition:"back",//前置或后置摄像头,值为front, back
poenCarmeInterval: null, //打开相机的轮询
dotype: 'idcardface', //操作类型
message: '', //提示
aspect: '2:3', //比例
cameraWidth: '', //相机画面宽度
cameraHeight: '', //相机画面宽度
windowWidth: '', //屏幕可用宽度
windowHeight: '', //屏幕可用高度
camerastate: false, //相机准备好了
livePusher: null, //流视频对象
snapshotsrc: null ,//快照
type:null,
showLive:false ,//安卓机需要先判断权限有没有授权
imageInfo:{},//取景框内的图片大小
context:{},//canvas实例对象
rpx2px:"",
finder:{//取景框尺寸，驾驶证、行驶证为333*999，其他为640*980
width:640,
height:980
},
};
},
onLoad(e) {
this.type = e.type
if(["2","3"].indexOf(this.type)> -1) this.finder = {width:333,height:999}
console.log(this.finder)
},
async onReady() {
this.initCamera();
// #ifdef APP-NVUE
if(plus.os.name === "Android"){
await this.checkAndriodCamera()
}else{
this.showLive = true
}
// #endif
// #ifdef MP
this.showLive = true
if( !await this.checkCamera() ){ return }
// #endif
// #ifdef APP-PLUS
this.showLive ? this.$nextTick(() => {
this.livePusher = uni.createLivePusherContext('livePusher', this)
}) : ""
if(plus.os.name === "iOS"){
setTimeout(()=>{
//开启预览并设置摄像头
this.startPreview();
},100)
}
// #endif
},
methods: {
//初始化相机
initCamera() {
//处理安卓手机异步授权问题
uni.getSystemInfo({
success: (res) => {
console.log("手机信息",res)
this.windowWidth = res.windowWidth;
this.windowHeight = res.windowHeight;
this.cameraWidth = res.windowWidth;
this.cameraHeight = res.windowWidth * 1.5;
this.rpx2px = 1 / 750 * res.windowWidth;
let imgW = parseInt(this.finder.width*this.rpx2px), imgH = parseInt(this.finder.height*this.rpx2px) // 640和980是css里定义取景框的rpx宽度
this.imageInfo = {
width : imgW,
height: imgH
}
}
});
},
//检查安卓相机权限
async checkAndriodCamera(){
let androidPermisson = await requestAndroidPermission("android.permission.CAMERA")
if(androidPermisson === 1){
this.showLive = true
this.$nextTick(() => {
this.livePusher = uni.createLivePusherContext('livePusher', this);
})
setTimeout(()=>{
//开启预览并设置摄像头
this.startPreview();
this.poenCarme()
},100)
}else{
uni.showModal({
content:"请打开摄像头授权功能！",
showCancel:false,
success: (res) => {
if(res.confirm) gotoAppPermissionSetting()
}
})
}
console.log("checkAndriodCamera",androidPermisson)
},
//检查照相机权限
checkCamera(){
return new Promise( async (resolve) => {
// #ifdef APP-PLUS
if( (plus.os.name === "iOS" && !judgeIosPermission("camera"))){
uni.showModal({
content:"请打开摄像头授权功能！",
showCancel:false,
success: (res) => {
if(res.confirm) gotoAppPermissionSetting()
}
})
resolve(false)
}else if( plus.os.name === "Android"){
let androidPermisson = await requestAndroidPermission("android.permission.CAMERA")
console.log(androidPermisson)
if(androidPermisson < 1){
uni.showModal({
content:"请打开摄像头授权功能！",
showCancel:false
})
resolve(false)
} else {
resolve(true)
}
}else{
resolve(true)
}
// #endif
// #ifdef MP
uni.getSetting({
success:(sRes) => {
console.log(sRes)
if(sRes.authSetting["scope.camera"] === false){
uni.showModal({
content:"请打开摄像头授权功能！",
showCancel:false
})
resolve(false)
}else{
resolve(true)
}
},
fail:(err) => {
console.log(err)
}
})
// #endif
})
},
//轮询打开
async poenCarme() {
//#ifdef APP-PLUS
if (plus.os.name == 'Android') {
this.poenCarmeInterval = setInterval(() => {
if (!this.camerastate) this.startPreview();
}, 1000);
}
//#endif
},
//开始预览
startPreview() {
this.livePusher.startPreview({
success: async (a) => {
//直播推流默认是前置摄像头，预览成功后给转成后置摄像头
if(plus.os.name == "iOS"){
this.livePusher.switchCamera();
this.camerastate = true;
}
}
});
},
error(e) {
clearInterval(this.poenCarmeInterval)
console.log("error:" + JSON.stringify(e));
if(e.detail.errCode === 10001){
uni.showModal({
content:"请打开摄像头授权功能！",
showCancel:false,
success: (res) => {
if(res.confirm) gotoAppPermissionSetting()
}
})
}
},
//停止预览
stopPreview() {
this.livePusher.stopPreview({
success: a => {
this.camerastate = false; //标记相机未启动
}
});
},
//状态
statechange(e) {
//状态改变
console.log(e);
if (e.detail.code == 1003 || e.detail.code == 1007) { //1007
this.camerastate = true;
} else if (e.detail.code == -1301) {
this.checkCamera()
this.camerastate = false;
}
},
//返回
back() {
uni.navigateBack();
},
/**
* 抓拍，因为APP端用的gcanvas，gcanvas.drawImage不允许临时图片，所以要先传一次图片
* **/
snapshot() {
if(!this.checkCamera()){ return false}
//震动
uni.vibrateShort();
// #ifdef APP-PLUS
this.livePusher.snapshot({
success: async e => {
this.uploadImage(`file://${e.message.tempImagePath}`)
},
fail: err => {
console.log(err)
}
});
// #endif
// #ifdef MP
const ctx = uni.createCameraContext();
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.uploadImage(res.tempImagePath)
}
});
// #endif
},
/**
* 获取临时路径的图片宽高大小
* **/
getImageInfo(path){
return new Promise((resolve,reject) => {
uni.getImageInfo({
src:path,
success: (res) => {
resolve(res)
},
fail: (err) => {
reject(err)
resolve(err)
}
})
})
},
async uploadImage(path){
let info = await this.getImageInfo(path) //获取临时路径的图片宽高大小
let width = Math.round( this.rpx2px*this.finder.width/this.cameraWidth*info.width),height = Math.round(this.rpx2px*this.finder.height/(this.windowHeight-90)*info.height)
let x = parseInt((info.width-width)/2),y = parseInt((info.height-height)/2)
uploadFileOSS(path).then( res => {
this.snapshotsrc = res.url + `?x-oss-process=image/crop,x_${x},y_${y},w_${width},h_${height}/rotate,270`
console.log(this.snapshotsrc)
this.setImage({x,y,width,height});
uni.navigateBack({
delta:2
})
}).catch( err => {
console.log(err)
errorMsg(err)
})
},
//反转
flip() {
// #ifdef APP-PLUS
this.livePusher.switchCamera();
// #endif
// #ifdef MP
this.devicePosition = this.devicePosition === 'back' ? 'front' : 'back'
// #endif
},
//设置
setImage(x,y,width,height) {
let pages = getCurrentPages();
let prevPage = pages[pages.length - 3]; //上二个页面
//直接调用上二个页面的setImage()方法，把数据存到上二个页面中去
prevPage.$vm.setImage({ path: this.snapshotsrc, type: this.type });
}
}
};
</script>
<style lang="scss">
.live-camera {
.preview {
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
.canvas{
visibility: hidden;
position: absolute;
top: 0;
z-index: -1;
}
.gcanvas{
z-index: -1;
position: absolute;
}
.outline-box {
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: 99;
align-items: center;
justify-content: center;
display: flex;
.outline-img {
width: 640rpx;
height: 980rpx;
}
.outline-img1{
width: 333rpx;
height: 999rpx;
}
}
.remind {
position: absolute;
left: -106px;
top: 880rpx;
width: 750rpx;
z-index: 100;
transform: rotate(90deg);
align-items: center;
justify-content: center;
color: #FFFFFF;
.remind-text {
color: #FFFFFF;
font-weight: bold;
}
}
}
.menu {
position: absolute;
left: 0;
bottom: 0;
width: 750rpx;
height: 90px;
z-index: 98;
align-items: center;
justify-content: center;
background-color: #000;
box-sizing:inherit;
.menu-mask {
position: absolute;
left: 0;
bottom: 0;
width: 750rpx;
height: 180rpx;
z-index: 98;
}
.menu-back {
position: absolute;
left: 30rpx;
bottom: 50rpx;
width: 80rpx;
height: 80rpx;
z-index: 99;
align-items: center;
justify-content: center;
}
.menu-snapshot {
width: 130rpx;
height: 130rpx;
z-index: 99;
}
.menu-flip {
position: absolute;
right: 30rpx;
bottom: 50rpx;
width: 80rpx;
height: 80rpx;
z-index: 99;
align-items: center;
justify-content: center;
}
}
}
.back{
width: 88rpx;
height: 88rpx;
margin-left: 20rpx;
margin-top: env(safe-area-inset-top);
position: absolute;
top: 0;
left: 0;
}
</style>/*
* permisson.js
**/
/**
* 本模块封装了Android、iOS的应用权限判断、打开应用权限设置界面、以及位置系统服务是否开启
*/
var isIos
// #ifdef APP-PLUS
isIos = (plus.os.name == "iOS")
// #endif
// 判断推送权限是否开启
function judgeIosPermissionPush() {
var result = false;
var UIApplication = plus.ios.import("UIApplication");
var app = UIApplication.sharedApplication();
var enabledTypes = 0;
if (app.currentUserNotificationSettings) {
var settings = app.currentUserNotificationSettings();
enabledTypes = settings.plusGetAttribute("types");
console.log("enabledTypes1:" + enabledTypes);
if (enabledTypes == 0) {
console.log("推送权限没有开启");
} else {
result = true;
console.log("已经开启推送功能!")
}
plus.ios.deleteObject(settings);
} else {
enabledTypes = app.enabledRemoteNotificationTypes();
if (enabledTypes == 0) {
console.log("推送权限没有开启!");
} else {
result = true;
console.log("已经开启推送功能!")
}
console.log("enabledTypes2:" + enabledTypes);
}
plus.ios.deleteObject(app);
plus.ios.deleteObject(UIApplication);
return result;
}
// 判断定位权限是否开启
function judgeIosPermissionLocation() {
var result = false;
var cllocationManger = plus.ios.import("CLLocationManager");
var status = cllocationManger.authorizationStatus();
result = (status != 2)
console.log("定位权限开启：" + result);
// 以下代码判断了手机设备的定位是否关闭，推荐另行使用方法 checkSystemEnableLocation
/* var enable = cllocationManger.locationServicesEnabled();
var status = cllocationManger.authorizationStatus();
console.log("enable:" + enable);
console.log("status:" + status);
if (enable && status != 2) {
result = true;
console.log("手机定位服务已开启且已授予定位权限");
} else {
console.log("手机系统的定位没有打开或未给予定位权限");
} */
plus.ios.deleteObject(cllocationManger);
return result;
}
// 判断麦克风权限是否开启
function judgeIosPermissionRecord() {
var result = false;
var avaudiosession = plus.ios.import("AVAudioSession");
var avaudio = avaudiosession.sharedInstance();
var permissionStatus = avaudio.recordPermission();
console.log("permissionStatus:" + permissionStatus);
if (permissionStatus == 1684369017 || permissionStatus == 1970168948) {
console.log("麦克风权限没有开启");
} else {
result = true;
console.log("麦克风权限已经开启");
}
plus.ios.deleteObject(avaudiosession);
return result;
}
// 判断相机权限是否开启
function judgeIosPermissionCamera() {
var result = false;
var AVCaptureDevice = plus.ios.import("AVCaptureDevice");
var authStatus = AVCaptureDevice.authorizationStatusForMediaType('vide');
console.log("authStatus:" + authStatus);
if (authStatus == 3) {
result = true;
console.log("相机权限已经开启");
} else {
console.log("相机权限没有开启");
}
plus.ios.deleteObject(AVCaptureDevice);
return result;
}
// 判断相册权限是否开启
function judgeIosPermissionPhotoLibrary() {
var result = false;
var PHPhotoLibrary = plus.ios.import("PHPhotoLibrary");
var authStatus = PHPhotoLibrary.authorizationStatus();
console.log("authStatus:" + authStatus);
if (authStatus == 3) {
result = true;
console.log("相册权限已经开启");
} else {
console.log("相册权限没有开启");
}
plus.ios.deleteObject(PHPhotoLibrary);
return result;
}
// 判断通讯录权限是否开启
function judgeIosPermissionContact() {
var result = false;
var CNContactStore = plus.ios.import("CNContactStore");
var cnAuthStatus = CNContactStore.authorizationStatusForEntityType(0);
if (cnAuthStatus == 3) {
result = true;
console.log("通讯录权限已经开启");
} else {
console.log("通讯录权限没有开启");
}
plus.ios.deleteObject(CNContactStore);
return result;
}
// 判断日历权限是否开启
function judgeIosPermissionCalendar() {
var result = false;
var EKEventStore = plus.ios.import("EKEventStore");
var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(0);
if (ekAuthStatus == 3) {
result = true;
console.log("日历权限已经开启");
} else {
console.log("日历权限没有开启");
}
plus.ios.deleteObject(EKEventStore);
return result;
}
// 判断备忘录权限是否开启
function judgeIosPermissionMemo() {
var result = false;
var EKEventStore = plus.ios.import("EKEventStore");
var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(1);
if (ekAuthStatus == 3) {
result = true;
console.log("备忘录权限已经开启");
} else {
console.log("备忘录权限没有开启");
}
plus.ios.deleteObject(EKEventStore);
return result;
}
// Android权限查询
function requestAndroidPermission(permissionID) {
return new Promise((resolve, reject) => {
plus.android.requestPermissions(
[permissionID], // 理论上支持多个权限同时查询，但实际上本函数封装只处理了一个权限的情况。有需要的可自行扩展封装
function(resultObj) {
var result = 0;
for (var i = 0; i < resultObj.granted.length; i++) {
var grantedPermission = resultObj.granted[i];
console.log('已获取的权限：' + grantedPermission);
result = 1
}
for (var i = 0; i < resultObj.deniedPresent.length; i++) {
var deniedPresentPermission = resultObj.deniedPresent[i];
console.log('拒绝本次申请的权限：' + deniedPresentPermission);
result = 0
}
for (var i = 0; i < resultObj.deniedAlways.length; i++) {
var deniedAlwaysPermission = resultObj.deniedAlways[i];
console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);
result = -1
}
resolve(result);
// 若所需权限被拒绝,则打开APP设置界面,可以在APP设置界面打开相应权限
// if (result != 1) {
// gotoAppPermissionSetting()
// }
},
function(error) {
console.log('申请权限错误：' + error.code + " = " + error.message);
resolve({
code: error.code,
message: error.message
});
}
);
});
}
// 使用一个方法，根据参数判断权限
function judgeIosPermission(permissionID) {
if (permissionID == "location") {
return judgeIosPermissionLocation()
} else if (permissionID == "camera") {
return judgeIosPermissionCamera()
} else if (permissionID == "photoLibrary") {
return judgeIosPermissionPhotoLibrary()
} else if (permissionID == "record") {
return judgeIosPermissionRecord()
} else if (permissionID == "push") {
return judgeIosPermissionPush()
} else if (permissionID == "contact") {
return judgeIosPermissionContact()
} else if (permissionID == "calendar") {
return judgeIosPermissionCalendar()
} else if (permissionID == "memo") {
return judgeIosPermissionMemo()
}
return false;
}
// 跳转到**应用**的权限页面
function gotoAppPermissionSetting() {
if (isIos) {
var UIApplication = plus.ios.import("UIApplication");
var application2 = UIApplication.sharedApplication();
var NSURL2 = plus.ios.import("NSURL");
// var setting2 = NSURL2.URLWithString("prefs:root=LOCATION_SERVICES");
var setting2 = NSURL2.URLWithString("app-settings:");
application2.openURL(setting2);
plus.ios.deleteObject(setting2);
plus.ios.deleteObject(NSURL2);
plus.ios.deleteObject(application2);
} else {
// console.log(plus.device.vendor);
var Intent = plus.android.importClass("android.content.Intent");
var Settings = plus.android.importClass("android.provider.Settings");
var Uri = plus.android.importClass("android.net.Uri");
var mainActivity = plus.android.runtimeMainActivity();
var intent = new Intent();
intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
intent.setData(uri);
mainActivity.startActivity(intent);
}
}
// 检查系统的设备服务是否开启
// var checkSystemEnableLocation = async function () {
function checkSystemEnableLocation() {
if (isIos) {
var result = false;
var cllocationManger = plus.ios.import("CLLocationManager");
var result = cllocationManger.locationServicesEnabled();
console.log("系统定位开启:" + result);
plus.ios.deleteObject(cllocationManger);
return result;
} else {
var context = plus.android.importClass("android.content.Context");
var locationManager = plus.android.importClass("android.location.LocationManager");
var main = plus.android.runtimeMainActivity();
var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
var result = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER);
console.log("系统定位开启:" + result);
return result
}
}
module.exports = {
judgeIosPermission: judgeIosPermission,
requestAndroidPermission: requestAndroidPermission,
checkSystemEnableLocation: checkSystemEnableLocation,
gotoAppPermissionSetting: gotoAppPermissionSetting
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
