【Vue3】 navigator.mediaDevices 实现翻转摄像头

const openFront = ref(true);//true开启前置摄像头，false开启后置摄像头
const video = ref(null);
//开启摄像头
    function startCamera(){
        loadingVideo.value = true;
        // 检测浏览器是否支持mediaDevices
        if (navigator.mediaDevices) {
            let params = {
                    audio: false,
                    video: openFront.value? { facingMode: 'user' } : { facingMode: { exact: "environment" } },
                    // video: { facingMode: { exact: "environment" } },//后置摄像头
                    // video: { facingMode: "user"},//前置摄像头
            }
            console.log(params);
            navigator.mediaDevices
            // 开启视频
            .getUserMedia(
                params
            )
            .then((stream) => {
                loadingVideo.value = false;
                // 将视频流传入viedo控件
                if (video.value) {
                    video.value.srcObject = stream;
                    video.value.play();
                }
            })
            .catch((error) => {
                loadingVideo.value = false;
                console.log(error);
                if (error.name === 'NotAllowedError' || error.name === 'NotFoundError') {
                    // 用户未授权相机访问或者没有可用设备
                    ElMessage.warning("请允许访问摄像头并确保设备已连接");
                } else {
                    // 其他错误
                    let cameraName = cameraStatu.value? '前置摄像头' : '后置摄像头';
                    ElMessage.warning('启动'+cameraName+'时出错：' + error.message);
                }
            });
        } else {
            loadingVideo.value = false;
            ElMessage.warning("该浏览器不支持开启摄像头，请更换最新版浏览器");
        }
    };
    //关闭摄像头
    function closeCamera(){
        if (!video.value.srcObject) return;
        let stream = video.value.srcObject;
        let tracks = stream.getTracks();
        tracks.forEach(track => {
            track.stop();
        });
        video.value.srcObject = null;
    }
    //切换摄像头
    function toggleCamera (){
        cameraStatu.value = !cameraStatu.value;
        closeCamera();
        startCamera();
    }