h5 js调起摄像头进行拍照或录像，通过canvas对图像进行处理显示

最新推荐文章于 2025-02-20 13:48:59 发布

rainning_z

最新推荐文章于 2025-02-20 13:48:59 发布

阅读量4.9k

点赞数 4

分类专栏： raining的js知识点笔记

本文链接：https://blog.youkuaiyun.com/ruiti/article/details/103168228

版权

raining的js知识点笔记专栏收录该内容

8 篇文章

订阅专栏

本文探讨了在非iOS系统中通过navigator.getUserMedia API访问摄像头的方法，并分析了iOS系统下该API受限的原因，包括WebRTC的安全问题。同时，提供了HTML与JavaScript代码示例，演示如何在不同设备上实现摄像头的视频流捕获与拍照功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在非ios系统实测可以运行。关键API：navigator.getUserMedia;测试ios系统，微信及浏览器，有趣的是navigator有getUserMedia这个属性，但值为均为undefined。猜想可能是因为：webTRTC安全问题：2015年，TorrentFreak报告了一个WebRTC的安全漏洞，该漏洞会致使安装有WebRTC的用户泄露真实IP，即使用户已经使用虚拟私人网路。https://baike.baidu.com/item/WebRTC/5522744?fr=aladdin。 ios给禁用了。具体原因不详。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia();"/><br/>

<video height="400px" autoplay="autoplay" style='border: 1px solid #f00;'></video>
<hr/>

<input type="button" title="拍照" value="拍照" onclick="getPhoto();"/><br/>

<canvas id="canvas1" height="400px" style='border: 1px solid #f00;'></canvas>
<hr/>

<input type="button" title="视频" value="视频" onclick="getVedio();"/><br/>

<canvas id="canvas2" height="400px" style='border: 1px solid #f00;'></canvas>


<script type="text/javascript">
   var  videoHeight;
   var videoWidth;
    var video = document.querySelector('video');
    var audio, audioType;
    var canvas1 = document.getElementById('canvas1');
    var context1 = canvas1.getContext('2d');
    var canvas2 = document.getElementById('canvas2');
    var context2 = canvas2.getContext('2d');

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
    var exArray = []; //存储设备源ID
    try {
        MediaStreamTrack.getSources(function (sourceInfos) {
            for (var i = 0; i != sourceInfos.length; ++i) {
                var sourceInfo = sourceInfos[i];
                    //这里会遍历audio,video，所以要加以区分
                if (sourceInfo.kind === 'video') {
                    exArray.push(sourceInfo.id);
                }
            }
        });
    } catch (e) {
        console.log(e)
    }

    function getMedia() {
        if (navigator.getUserMedia) {
            navigator.getUserMedia({
                'video': {
                    'optional': [{
                        'sourceId': exArray[0] //0为前置摄像头，1为后置
                    }]
                },
                'audio': true
            }, successFunc, errorFunc); //success是获取成功的回调函数
        } else {
            /**
             * 测试ios手机及笔记本，微信及浏览器， 有趣的是navigator有getUserMedia这个属性，但值为均为undefined
             *时间  20191120
             *
             * */
            alert('Native device media streaming (getUserMedia) not supported in this browser.');
        }
    }

    function successFunc(stream) {
//alert('Succeed to get media!');
        console.log(stream);
        if (video.mozSrcObject !== undefined) {
//Firefox中，video.mozSrcObject最初为null，而不是未定义的，我们可以靠这个来检测Firefox的支持
            video.mozSrcObject = stream;
        } else {
            try {
                video.src = window.URL && window.URL.createObjectURL(stream) || stream;
            } catch (e) {
                /**
                 * 之前工作的网页调用摄像头获取视频并拍照的作品报错：
                 Failed to execute 'createObjectURL' on 'URL'
                 原因是Chrome升级后，新版本的Chrome不再支持该用法。
                 其他主流浏览器也是如此，详细讨论请参考如下链接：
                 https://www.fxsitecompat.com/en-CA/docs/2017/url-createobjecturl-stream-has-been-deprecated/
                 * */
                try {
                    video.srcObject = stream;
                } catch (error) {
                    console.log(error)
                }
            }


        }
//video.play();
// 音频
        audio = new Audio();
        audioType = getAudioType(audio);
        if (audioType) {
            audio.src = 'polaroid.' + audioType;
            audio.play();
        }
        video.onplay=function (ev) {
            videoHeight=video.videoHeight;
            videoWidth=video.videoWidth;
            console.log(videoHeight)
            console.log(videoWidth)
            canvas1.width=videoWidth;
            canvas1.height=videoHeight;
            canvas2.width=videoWidth;
            canvas2.height=videoHeight;
        }

    }

    function errorFunc(e) {
        alert('Error！' + e);
    }

    var img = new Image();
    img.src = "./imgs/shabi.png";
    img.onload = function (ev) {
        context1.drawImage(img, 0, 0);
        context2.drawImage(img, 0, 0);
    }

    // 将视频帧绘制到Canvas对象上,Canvas每60ms切换帧，形成肉眼视频效果
    function drawVideoAtCanvas(video, context) {
        window.setInterval(function () {
            context.drawImage(video, 0, 0);
            context.drawImage(img, 0, 0);

        }, 60);
    }

    //获取音频格式
    function getAudioType(element) {
        if (element.canPlayType) {
            if (element.canPlayType('audio/mp4; codecs="mp4a.40.5"') !== '') {
                return ('aac');
            } else if (element.canPlayType('audio/ogg; codecs="vorbis"') !== '') {
                return ("ogg");
            }
        }
        return false;
    }

    // vedio播放时触发，绘制vedio帧图像到canvas
    // video.addEventListener('play', function () {
    // drawVideoAtCanvas(video, context2);
    // }, false);
    //拍照
    function getPhoto() {
        context1.drawImage(video, 0, 0); //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。
        context1.drawImage(img, 0, 0);
    }

    //视频
    function getVedio() {
        drawVideoAtCanvas(video, context2);
    }
</script>
</body>
</html>

效果：