获取摄像头与麦克风(WebRTC)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebRTC</title>
</head>
<body>
    <button onclick="startCam()">开启摄像头</button>
    <hr>
    <div id="box">
        <button id="btn" style="display:none">拍照</button>
        <br>
    </div>

    <br>

    <div id="cam_box"></div>

    <script>

        navigator.getUserMedia || (navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia);


        function startCam(){
            navigator.getUserMedia(
            {
                video:true,
                audio:true
            },
            function(stream){
                //创建video元素
                var video = document.createElement("video");
                video.id = "myvideo";

                //指定src
                if (window.URL) {
                    video.src = window.URL.createObjectURL(stream);
                } else {
                    video.src = stream;

                }

        

                //添加video到页面
                document.querySelector("#box").appendChild(video);
                btn.style.display = "block";

                //视频播放
                video.play();
            },
            function(error){
                console.log(error);
            }
            )
        }


        var btn = document.querySelector("#btn");
        btn.onclick = function(){
            var canvas = document.createElement("canvas");
            canvas.width = 640;
            canvas.height = 480;
            var cxt = canvas.getContext("2d");
            cxt.drawImage(document.querySelector("#myvideo"), 0, 0, 640, 480);


            document.querySelector("#cam_box").appendChild(canvas);


        }
    </script>
</body>
</html>
最后编辑于：2017.12.08 03:23:56
获取摄像头与麦克风(WebRTC)

推荐阅读更多精彩内容
