HTML5之JS简单调用多媒体设备(摄像头、麦克风等)，实现拍照

在js中调用多媒体设备很简单，在这里碎碎念一下，前面是乱七八糟看API学习的内容，后面有代码。在博客上找的不少都已过时，没有更新，如果这篇的内容不能用了还请朋友们提醒一下。。

经测试Chrome和Firefox都支持调用。

在MDN（MDN web docs）中，记载了相关技术的API，既然要使用摄像头、麦克风之类的东西，那很容易想到多媒体的东西啦，也就是Media。在MDN中经过一番的搜索发现一个让我眼睛发光的东西:

 这名字不用说了，多媒体设备，八成就是想要的，点进去看方法，发现:

点开之后全是英文，真是让我这英语渣渣头疼。不过既然是简单调用，那现在就不用深入研究了，在页面里找到了两个官方实例，如下:

上面异步函数实现的，有兴趣的朋友可以试试，这里用下面简单的调用；

代码中getUserMedia()函数参数constraints指定请求的媒体类型，在函数页面的Syntax部分是这么介绍的:

constraints是一个MediaStreamConstraints对象，用于指定要请求的媒体类型，以及请求的参数。

constraints 包含了video和audio两个成员，用于说明请求的媒体类型。必须指定一个或两个同时指定。如果浏览器无法找到指定的媒体类型，那么返回的Promise对象将作为NotFoundError异常回调函数的参数。

constraints 说白了就是要调用的设备类型，是麦克风Audio还是摄像头Video，并且没有找到抛出异常时进入catch函数。

为了现实效果，我们的页面需要一个video标签，一个按钮(调用拍照事件)，一个canvas标签显示拍到的图片，简单实现的代码如下:

    
    




    抓拍

关于canvas的使用就不多描述了，在MDN中也有相关技术的记载。