JS实现摄像头的调用

不同浏览器中调用摄像头的 API 都略有出入，在这里我们以 chrome 做示例：

<video width="640" height="480" autoplay></video>

<script>
    var video = document.querySelector('video');

    navigator.webkitGetUserMedia({
                video: true
            }, success, error);

    function success(stream) {
        video.src = window.webkitURL.createObjectURL(stream);
        video.play();
    }

    function error(err) {
        alert('video error: ' + err)
    }
</script>

首先

需要先在网页上放置一个video元素。图像就展示在这个元素中。

<video width="640" height="480" autoplay></video>

然后

用代码获取这个元素。

var video = document.querySelector('video');

接着：使用getUserMedia()方法

navigator.getUserMedia方法目前主要用于，在浏览器中获取音频（通过麦克风）和视频（通过摄像头），将来可以用于获取任意数据流，比如光盘和传感器。
getUserMedia方法接受三个参数：

navigator.getUserMedia({
    video: true, 
    audio: true
}, success, error);

getUserMedia的第一个参数是一个对象，表示要获取哪些多媒体设备，上面的代码表示获取摄像头和麦克风;success是一个回调函数，在获取多媒体设备成功时调用；error也是一个回调函数，在取多媒体设备失败时调用。

最后

将这个元素的src属性绑定数据流，摄影头拍摄的图像就可以显示了。

video.src = window.webkitURL.createObjectURL(stream);

在Chrome和Opera中，URL.createObjectURL方法将媒体数据流（MediaStream）转为一个二进制对象的URL（Blob URL），该URL可以作为video元素的src属性的值。