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

作者: 无敌万小奔 | 来源:发表于2017-06-13 15:52 被阅读0次

获取摄像头与麦克风(WebRTC)
WebRTC(调用系统的摄像头和麦克风)
20170313 iOS 权限相关：判断与跳转设置
FFmpeg-iOS获取摄像头麦克风
mpeg学习博客（一定好好学）
Directshow 获取设备信息（麦克风，扬声器，摄像头）
基于体感的机械臂的大体原理和思路
AVCaptureDevice
WebRTC与CSS滤镜（CSS filter）
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>