H5调用手机的前后摄像头,canvas显示,自带截图，兼容ios和android

最新推荐文章于 2023-04-02 18:27:46 发布

殇蓝

最新推荐文章于 2023-04-02 18:27:46 发布

阅读量3k

点赞数 2

分类专栏： css3+html5 文章标签： html5 javascript es6 node.js vue.js

本文链接：https://blog.csdn.net/github_38057462/article/details/107015717

版权

css3+html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

`注意`

1.下面的HTML需要在HTTPS下访问方可正常工作，对应的localhost或者本地地址访问不能支持；
2. facingMode: { exact: 'environment' } // -- 后置 facingMode: 'user ' // -- 前置
3. 如果你想在已经播放视频的情况下更换摄像机，你需要先停止当前的视频流，然后再将其替换成另一台摄像机的视频流。videoStream.getTracks().forEach((track) => { track.stop(); });
4. 视频流的获取必须授权，pc上禁止后不会再次弹出授权的，需要手动开启；
5. 下面代码直接粘贴可用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Document</title>
    </head>
    <body>
        <!-- video 标签中的自动播放属性 autoplay，没有它，你需要调用 video.play() 才能真正开始显示图像 -->
        <video autoplay id="video" controls="controls"></video>
        <canvas id="canvas"></canvas>
        <div id="imageData"></div>
        <button onclick="playPause()">播放/暂停</button>
        <button onclick="screenshot()">截图</button>
        <button onclick="useFrontCamera = !useFrontCamera , switchDirection()">切换</button>
    </body>
    <script>
        // JavaScript访问设备前后摄像头
        const constraints = { // 初始值
            video: {
                width: {
                    min: 300,
                    ideal: 1920,
                    max: 500
                },
                height: {
                    min: 250,
                    ideal: 1080,
                    max: 400
                },
                facingMode: { exact: 'environment' } // user -- 前置 、environment -- 后置
            } // 流以正确的宽度和高度比例进入，如果它是处于纵向模式的手机，则需要进行尺寸反转
        };
        const myVideo = document.querySelector('#video');
        let videoStream = null; // 视频流对象
        let useFrontCamera = true; // 前置摄像头
        if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) { // 检查浏览器是否支持此API
          switchDirection(); // 浏览器支持
        } else {
            console.log('暂不支持');
        }
        function playPause() {
            if (myVideo.paused) 
                myVideo.play();
             else 
                myVideo.pause();
        }
        // 绘制canvas画布、获取data
        function screenshot() {
            canvas.width = myVideo.videoWidth;
            canvas.height = myVideo.videoHeight;
            canvas.getContext('2d').drawImage(myVideo, 0, 0);
            const img = document.createElement('img');
            img.src = canvas.toDataURL('image/png');
            let divImage = document.getElementById('#imageID');
            divImage.appendChild(img);
        }
        // 你想在已经播放视频的情况下更换摄像机的前后摄像头，需要先停止当前的前置或者后置的视频流，再将其替换成摄像机的前置或者后置的视频流。
        async function switchDirection() {
            if (videoStream) {
                videoStream.getTracks().forEach((track) => {
                    track.stop();
                });
            }
            constraints.video.facingMode = useFrontCamera ? 'user' : { exact: 'environment' };
            try {
                videoStream = await navigator.mediaDevices.getUserMedia(constraints); // 调用将询问用户是否允许访问摄像机。如果用户拒绝，它将引发异常并且不返回流。因此，必须在 try/catch 块内处理这种情况,它返回一个Promise，必须使用 async/await 或 then 块
                myVideo.srcObject = videoStream;
            } catch (error) {
                console.log(error)
            }
        }
    </script>
</html>

殇蓝

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
4
评论
H5调用手机的前后摄像头,canvas显示,自带截图，兼容ios和android

注意1.下面的HTML需要在HTTPS下访问方可正常工作，对应的localhost或者本地地址访问不能支持；2. facingMode: { exact: 'environment' } // -- 后置facingMode: 'user ' // -- 前置3. 如果你想在已经播放视频的情况下更换摄像机，你需要先停止当前的视频流，然后再将其替换成另一台摄像机的视频流。videoStream.getTracks().forEach((track) => { track.stop(); });
复制链接

扫一扫

专栏目录