uni-app的camera组件和相机组件控制的使用案例

1.摄像头选择：后置与前置

<camera device-position="back"></camera>
<camera device-position="front"></camera>

2.闪光灯选项：on | off | auto

<camera device-position="back" flash="off"></camera>

注意：camera组件浏览器不会生效的，需要用到微信开发者工具去测试。

3.生成拍照区域。

    <view>
        <camera device-position="back" flash="off" style="width: 100%;height: 400upx;">
            
        </camera>
    </view>

4.实现拍照功能，绑定按钮事件。

5. 通过uni.createCameraContext()创建并返回 camera 组件的上下文 cameraContext操作对象。

照相机对象的方法：

takePhote方法的参数选项：

            TakePhoto:function(){
                const camera = uni.createCameraContext() //创建照相机对象
                camera.takePhoto({//实现拍照功能
                    quality:'high', //high 高质量成像、 normal 普通质量、row 低质量
                    success: () => {
                        console.log('拍照成功')
                    }
                })
            }

点击拍照

6.拍照成像：显示拍照后的预览区域，显示一张照片，将拍照后拿到的的路径绑定到这里。

效果预览：

完整代码：

<template>
    <view>
        <camera device-position="back" flash="off" style="width: 100%;height: 400upx;">
            
        </camera>
        <button type="default" @tap="TakePhoto">拍照</button>
        <image :src="photoSrc" mode="">预览</image>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                photoSrc:''
            }
        },
        onLoad() {//监听页面加载
            
        },
        methods:{
            TakePhoto:function(){
                const camera = uni.createCameraContext() //创建照相机对象
                camera.takePhoto({//实现拍照功能
                    quality:'high', //high 高质量成像、 normal 普通质量、row 低质量
                    success: (res) => {
                        console.log('拍照成功',res)
                        this.photoSrc = res.tempImagePath
                    }
                })
            }
        }
    }
</script>

7.拓展：前置摄像头和后置摄像头切换。

通过条件判断处理

<template>
    <view>
        <camera :device-position="device" flash="off" style="width: 100%;height: 400upx;">
        </camera>
        {{device}}
        <button type="primary" size="mini" @tap="switchDevice">切换摄像头</button>
        <button type="default" @tap="TakePhoto">拍照</button>
        <image :src="photoSrc" mode="">预览</image>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                photoSrc:'',
                device: 'front'
            }
        },
        methods:{
            TakePhoto:function(){
                const camera = uni.createCameraContext() //创建照相机对象
                camera.takePhoto({//实现拍照功能
                    quality:'high', //high 高质量成像、 normal 普通质量、row 低质量
                    success: (res) => {
                        console.log('拍照成功',res)
                        this.photoSrc = res.tempImagePath
                    }
                })
            },
            switchDevice(){ 
                if(this.device == "front") {
                    this.device = "back"
                }else {
                    this.device = "front"
                }
            }
        }
    }
</script>

---

录像功能的实现。

cameraContext.startRecord() 开始录像
cameraContext.stopRecord() 录像结束
当以两个按钮：一个开始录像，一个关闭录像。

执行回调函数。

控制台告诉你权限不够，需要获取权限。

配置小程序的AppID

再次回到页面点击开始录像的按钮，我们就可以获取授权了。

            StartRecord:function(){
                const camera = uni.createCameraContext() //创建照相机对象
                camera.startRecord({
                    //quality:'high',
                    success: function(res){
                        console.log(res)
                    },
                    fail: (err) => {
                        console.log(err)
                    }
                })
            }

发现有bug,根本拿不到返回的值

可以通过用户授权API来判断用户是否给应用授予摄像头的访问权限：https://uniapp.dcloud.io/api/other/authorize

uni.authorize(OBJECT)

提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。

还是报错