WebRTC：浏览器获取摄像头数据 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>navigator浏览器获取摄像头数据</title>
</head>
<body>
    <video autoplay="autoplay" playsinline id='player'></video>
    <script>
        if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator
            .mozGetUserMedia) {
            var constraints = {
                audio: true,
                video: true
            };
            //调用用户媒体设备, 访问摄像头
            getUserMedia(constraints, success, error);
        } else {
            alert('不支持访问用户媒体');
        }
        //访问用户媒体设备的兼容方法
        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);
            }
        }

        //获取video标签
        var videoPlayer = document.querySelector('video#player')

        function success(stream) {
            console.log(stream);
            //将流赋给video标签
            videoPlayer.srcObject = stream;
        }

        function error(error) {
            console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
        }
    </script>
</body>

</html>
View Code

1.添加video标签用于显示摄像头的视频流

2.首先可以通过以下代码先获取电脑支持的音视频设备

3.申请使用摄像头，并将获取的流赋给video标签

posted @ 2022-05-07 16:15  Deer-Mr  阅读(298)  评论(0)    收藏  举报