切换摄像头操作（前置、后置）

最新推荐文章于 2025-03-25 20:48:55 发布

sunflower(*^ω^*)

最新推荐文章于 2025-03-25 20:48:55 发布

阅读量4.7k

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45744011/article/details/125979665

版权

一、默认进入页面后直接加载并调用摄像头

//调用摄像头的方法
 function takePhoto() {
            if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
                //调用用户媒体设备, 访问摄像头
                getUserMedia({
                    video: {
                        width: 100,
                        height: 100,
                        facingMode: environment   //设置使用后置摄像头，user为前置摄像头
                    }
                }, success, error);
                $("#showImg").hide();//隐藏拍照结果显示框
                $("#video").show();//开启拍照框
            } else {
                alert('不支持访问用户媒体');
            }
        }
        //直接调用方法，实现页面加载完就自动打开摄像头
        takePhoto();

二、切换摄像头（前置、后置）

//设置一个按钮，并编写事件方法，触发切换摄像头操作
<label title="切换摄像头" class="btn btn-danger" id='takeAgain'>切换摄像头</label>

//切换摄像头的方法（重点：首先声明一个变量，存储摄像头前置、后置参数，再用一个三目运算方法来交换前置、后置参数，最后通过绑定事件来执行这个交换的操作，这样摄像头切换就基本完成了。）

 //访问用户媒体设备的兼容方法
        function getUserMedia(constraints, success, error) {
            if (navigator.mediaDevices.getUserMedia) {
                //最新的标准API
                navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
            } else if (navigator.webkitGetUserMedia) {
                //webkit核心浏览器
                navigator.webkitGetUserMedia(constraints, success, error)
            } else if (navigator.mozGetUserMedia) {
                //firfox浏览器
                navigator.mozGetUserMedia(constraints, success, error);
            } else if (navigator.getUserMedia) {
                //旧版API
                navigator.getUserMedia(constraints, success, error);
            }
        }
        let video = document.getElementById('video');
        let canvas = document.getElementById('canvas');
        let context = canvas.getContext('2d');
        var mediaStreamTrack;
         //默认后置摄像头
        var mode = 'environment';
        function success(stream) {
            //兼容webkit核心浏览器
            let CompatibleURL = window.URL || window.webkitURL;
            //将视频流设置为video元素的源
            mediaStreamTrack = stream.getTracks()[0];
            //video.src = CompatibleURL.createObjectURL(stream);
            video.srcObject = stream;
            video.play();
        }
        function error(error) {
            alert('访问用户媒体设备失败,请尝试更换浏览器')
        }
        document.getElementById('capture').addEventListener('click', function () {
            context.drawImage(video, 0, 0, 300, 300);
            mediaStreamTrack && mediaStreamTrack.stop();
            $('#tailoringImg').cropper('replace', canvas.toDataURL("image/png"), false);//默认false，适应高度，不失真
            $("#video").hide();//隐藏拍照框
            $("#showImg").show()//将拍照结果显示
        })
       //请求切换前后置摄像头
        $("#takeAgain").bind("click", function () {
            changeMode();
        });
        // 切换摄像头
        function changeMode() {
            mode = mode === 'user' ? 'environment' : 'user';
            mediaStreamTrack.stop();
            takePhoto();
        }
        //请求摄像头
        function takePhoto() {
            if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
                //调用用户媒体设备, 访问摄像头
                getUserMedia({
                    video: {
                        width: 100,
                        height: 100,
                        facingMode: mode  //设置使用后置摄像头，user为前置摄像头
                    }
                }, success, error);
                $("#showImg").hide();//隐藏拍照结果显示框
                $("#video").show();//开启拍照框
            } else {
                alert('不支持访问用户媒体');
            }
        }
        //直接调用方法，实现页面加载完就自动打开摄像头
        takePhoto();