Vue 媒体处理（摄像头，截图，播放本地视频）

Vue 媒体处理（摄像头，截图，播放本地视频）

一. 打开摄像头

```javascriptthis.constraint = {// video属性设置video: {width: 300,height: 300,},// audio属性设置audio: true,}navigator.mediaDevices.getUserMedia(this.constraints).then((mediaStream) => {// 成功返回promise对象，接收一个mediaStream参数与video标签进行对接this.mediaStream = mediaStream;//this.video = document.getElementById("video");this.video.srcObject = mediaStream;this.video.play();}

二. 实现拍照（截图功能）

思路：利用 canvas 绘制图片后转图片

  let canvas = document.getElementById("canvas");let ctx = canvas.getContext("2d")ctx.drawImage(video, 0, 0, 300, 300);//获取图片的base64let imageBase64 = canvas.toDataURL("image/png");

三. 播放本地视频

思路：利用 input 标签选择文件后，使用 FileReader 获取视频的 Base64 后利用 video 播放

<!-- ref 用于 vue 选中该标签 -->
<input type="file" ref="file" />

if (this.$refs.file.files.length == 0) {this.warn = "还未选中文件";return;}let file = this.$refs.file.files[0];if (file.type != "video/mp4" && file.type != "video/mp3") {this.warn = "文件不为mp4或mp3";return;}
var reader = new FileReader();
//将视频转为base64
reader.readAsDataURL(file);
let that = this;
reader.onload = function (e) {//e.target.result为视频的base64// console.log(e.target.result);that.video.src = e.target.result;that.video.play();that.video.onended = function () {//视频播放结束};
}