獲取攝像頭與麥克風(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){
                //創(chuàng)建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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容