目录
前言API`MediaDevices.getUserMedia()`
拍照功能实例完整代码实现效果
录像功能实例完整代码实现效果
总结
前言
最近在做开源实例： Vue.js 实战系列之实现视频类WebApp的项目（仿抖音App）【感兴趣的小伙伴可以看一下】，其中就有一个功能是视频的拍摄发布(摄像头调用，视频录制等功能)，所以特意整理一个Vue如何使用该API调用本地摄像头实现录像拍照功能。
本文主要包括前端调用本地摄像头实现拍照、录像的使用实例、应用技巧、基本知识点总结和一些需要注意的事项，在项目开发中具有一定的参考价值，需要的朋友可以参考一下。
Vue 调用本地摄像头实现拍照功能，由于调用摄像头有使用权限，只能在本地运行，线上需用 https 域名才可以使用。
API
MediaDevices.getUserMedia()
该 API 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。
它返回一个 Promise 对象，成功后会 resolve 回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，Promise 会 reject 回调一个 PermissionDeniedError 或者 NotFoundError。
注意：返回的 Promise 对象可能既不会 resolve 也不会 reject，因为用户不是必须选择允许或拒绝。
使用：我们可以使用 navigator.mediaDevices 来获取 MediaDevices
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
/* 使用这个stream stream */
})
.catch(function(err) {
/* 处理error */
});
constraints 参数介绍：
指定了请求的媒体类型和相对应的参数。
参数包含了 video 和 audio 两个成员的 MediaStreamConstraints 对象，用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。
关于该API其他具体使用细节，请移步 getUserMedia - MDN 查看。
拍照功能实例
完整代码
实现效果
打开摄像头：
拍照：
关闭摄像头：
录像功能实例
完整代码
实现效果
总结
通过以上两段代码，可以分别实现调用本地摄像头实现录像或者拍照的功能，并且支持视频下载到本地。
以上代码可以拿来直接使用，欢迎小伙伴踊跃尝试，有什么问题欢迎留言讨论。
如果觉得有用，别忘了一键三连哦，感觉各位的支持。