调用用户设备

调用摄像头：在移动端时回给用户做选择，是选择相册还是打开摄像头；在PC 端会直接打开摄像头。

调用麦克风：在移动端和PC端都是直接打开麦克风。

GetUserMedia()

Navigator.mediaDevices.getUserMedia(constraints,successCallback,errorCallback);

Constraints 调用设备类型

{

Video ：true,  //调用摄像头

Audio:true     //调用麦克风

}

示例：

 <input type="button" value="视频" onclick="getMedia()" />
    <video src="" id="video" width="500px" height="500px"></video>
    <canvas id="canvas" width="500px" height="500px"></canvas>
    <button onclick="takePhone()" id="but">拍照</button>

<script>
        function getMedia() {
            var constraints = {
                video: {
                    width: 500,
                    height: 500
                },
                audio: true
            };

            //获取摄像头区域
            var video = document.getElementById('video');


            //   该方法返回Promise对象
            //   这个Promise对象返回成功后的会调函数带一个MediaStream对象作为其参数
            //   then()时Promise的方法
            //   then()方法是异步执行，当then()前的所有的方法执行完后再执行then()内部的程序
            //   避免数据没有获取到

            var promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then(function(MediaStream) {
                video.srcObject = MediaStream;
                video.play();
            });
        }

        // 拍照
        function takePhone() {
            var video = document.getElementById('video');
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, 500, 500);
        }
    </script>