uniapp实现自定义相机

自定义相机

起因

由于最近用uniapp调用原生相机容易出现闪退问题，找了很多教程又是压缩图片又是优化代码，我表示并没有太大作用!!

于是开启了我的解决之路

• 利用livePusher实现

实现自定义相机

拓展性挺强的,可以实现自定义水印、身份证拍摄、人像拍摄等
这里我简单实现一个相机功能主要用于解决闪退

Tip：这里需要创建nvue文件哦~

创建

camera.nvue

<template><view class="pengke-camera":style="{ width: windowWidth, height: windowHeight }"><live-pusher
            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":style="{ width: windowWidth, height: windowHeight }"></live-pusher><view class="menu"><!--底部菜单区域背景--><cover-image class="menu-mask" src="/static/live-camera/bar.png"></cover-image><!--返回键--><cover-image class="menu-back" @tap="back" src="/static/live-camera/back.png"></cover-image><!--快门键--><cover-image class="menu-snapshot" @tap="snapshot" src="/static/live-camera/shutter.png"></cover-image><!--反转键--><cover-image class="menu-flip" @tap="flip" src="/static/live-camera/flip.png"></cover-image></view></view></template><script>
let _this = null;exportdefault{data(){return{
            poenCarmeInterval:null,//打开相机的轮询
            aspect:'2:3',//比例
            windowWidth:'',//屏幕可用宽度
            windowHeight:'',//屏幕可用高度
            camerastate:false,//相机准备好了
            livePusher: null,//流视频对象
            snapshotsrc: null,//快照};},onLoad(e){
        _this =this;this.initCamera();},onReady(){this.livePusher = uni.createLivePusherContext('livePusher',this);this.startPreview();//开启预览并设置摄像头this.poenCarme();},
    methods:{//轮询打开poenCarme(){//#ifdef APP-PLUSif(plus.os.name =='Android'){this.poenCarmeInterval =setInterval(function(){
                    console.log(_this.camerastate);if(!_this.camerastate) _this.startPreview();},2500);}//#endif},//初始化相机initCamera(){
            uni.getSystemInfo({
                success:function(res){
                    _this.windowWidth = res.windowWidth;
                    _this.windowHeight = res.windowHeight;
                    let zcs = _this.aliquot(_this.windowWidth,_this.windowHeight);
                    _this.aspect =(_this.windowWidth/zcs)+':'+(_this.windowHeight/zcs);// console.log('画面比例：'+_this.aspect);}});},//整除数计算aliquot(x, y){if(x % y ==0)return y;returnthis.aliquot(y, x % y);},//开始预览startPreview(){this.livePusher.startPreview({
                success: a =>{
                    console.log(a)}});},//停止预览stopPreview(){this.livePusher.stopPreview({
                success: a =>{
                    _this.camerastate =false;}});},//状态statechange(e){//状态改变
            console.log(e);if(e.detail.code ==1007){
                _this.camerastate =true;}elseif(e.detail.code ==-1301){
                _this.camerastate =false;}},//返回back(){
            uni.navigateBack();},//抓拍snapshot(){//震动
            uni.vibrateShort({
                success:function(){
                    console.log('success');}});//拍照this.livePusher.snapshot({
                success: e =>{
                    _this.snapshotsrc = e.message.tempImagePath;
                    _this.stopPreview();
                    _this.setImage();
                    uni.navigateBack();}});},//反转flip(){this.livePusher.switchCamera();},//设置setImage(){
            let pages =getCurrentPages();
            let prevPage = pages[pages.length -2];
            prevPage.$vm.setImage({ path: _this.snapshotsrc});}}};</script><style lang="less">.pengke-camera {
    justify-content: center;
    align-items: center;.menu {
        position: absolute;
        left:0;
        bottom:0;
        width:750rpx;
        height:180rpx;
        z-index:98;
        align-items: center;
        justify-content: center;.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;}}}</style>

这里用了一些图片作为图标布局画面美观，例如返回图标，拍摄图标

使用

在点击拍照的时候跳转到

camera页面

即可
在需要使用的页面中编写

setImage

方法,即可拿到返回过来的图片临时路径
再通过uniapp自带的上传图片api进行上传至服务器即可
这样就避免了调用原生相机

setImage(e){//e.path即是图片临时路径
uni.uploadFile({url:'上传接口的路径',filePath: e.path,name:'imageFile',success:function(res){//服务器返回的图片地址url},error:function(err){
        console.log(err)}}

效果图

拓展

如果既要实现从相册选又要手机拍呢？该如何实现
这里相册选调用的uniapp的api，
手机拍跳转到自定义相机页面即可

这里可以写一个弹窗，让它选择，如果选择了从相册选图片则

uni.chooseImage({
    count: size,//默认9
    sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有
    sourceType:['album'],//从相册选择
    success:function(res){
        console.log(res)//拿到临时路径再向后端发送上传请求....}});

如果用相机拍则跟上方步骤一致

实现多种自定义相机

这里的话我贴上效果图，如果需要就在我的博客资源中获取吧

水印相机

身份证相机

人像相机

这样我就成功解决了闪退问题~，有问题评论区d我