## H5 调用本地摄像头 目前来讲，H5 调用本地摄像头常见的有两种方案，一种是使用 HTML5 新提供的 `getUserMediaAPI` 方案，另外一种是使用传统的 `input:file` 方案。 ## getUserMediaAPI `getUserMediaAPI` 是 H5 为我们提供的新的 API。该 API 最早是直接挂在 `navigator` 对象上面的，但是目前做了调整，`navigator.getUserMediaAPI` 已经被废弃，取而代之的是 `navigator.mediaDevices.getUserMedia`。 MDN 上对此 API 的说明如下： `MediaDevices.getUserMedia()` 会提示用户给予使用媒体输入的许可，媒体输入会产生一个`MediaStream`，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。 它返回一个 `Promise` 对象，成功后会 `resolve` 回调一个 `MediaStream` 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，`promise` 会 `reject` 回调一个 `PermissionDeniedError` 或者 `NotFoundError`。 详情：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia 示例： ```html <button id="btn1">开启摄像头</button> <button id="btn2">关闭摄像头</button> <video id="video" controls width="100%" height="700px"></video> <style> * { margin: 0; padding: 0; } button{ width: 200px; height: 50px; font-size: 32px; margin: 20px; } </style> <script> var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); var video = document.querySelector("#video"); var myConstraints = { video: { facingMode: "user", // 优先调用前置摄像头 }, }; // 开启摄像 btn1.onclick = function () { navigator.mediaDevices.getUserMedia(myConstraints).then( (stream) => { video.srcObject = stream; //播放视频 video.play(); // 关闭摄像 btn2.onclick = function () { stream.getTracks().forEach((track) => track.stop()); }; }, (error) => { console.error(error.name || error); } ); }; </script> ``` 上面的示例中，虽然在开发环境时，各种访问媒体设备都没有问题，但是当部署到服务器上，手机和电脑浏览器都无法调起摄像头，这是由于浏览器的安全策略导致的。 有下面三种情况是可以调起设备的，也就是 `navigator.mediaDevices` 不为 undefined： * 地址为 localhost:// * 地址为 https:// * 为文件访问 file:/// 最后来看一下 getUserMediaAPI 的兼容性：  如果不考虑比较旧的浏览器的话，整体来讲也可以放心的去用。 ## input:file 示例： ```html <label> <span>打开相册，可以选择一张图片</span> <input type="file" accept="image/*" /> </label> <label> <span>打开相册，可以选择多张图片</span> <input type="file" multiple accept='image/*'> </label> <label> <span>打开照相机</span> <input type="file" accept="image/*" capture="camera" /> </label> <label> <span>打开录像机</span> <input type="file" accept="video/*" capture="camcorder" /> </label> <label> <span>打开录音机</span> <input type="file" accept="audio/*" capture="microphone" /> </label> <style> html { font-size: 36px; } input { display: none; } label { display: block; } span { display: block; text-align: center; height: 50px; font-size: 32px; margin: 50px; border: 1px solid #ccc; padding: 10px; line-height: 50px; } </style> ```