<el-button type="primary" @click="openVideo">打开摄像头</el-button>
<el-button @click="closeVideo">关闭摄像头</el-button>
<el-button type="danger" @click="screenshot">截图</el-button>
<div><video id="video" ref="video" />
</div>
<canvas ref="canvas" width="400" height="300" style="display:none" />
<!-- 截图展示图片 -->
<img ref="screenshot">

// 打开摄像头openVideo() {// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象console.log("navigator.mediaDevices", navigator.mediaDevices);if (navigator.mediaDevices === undefined) {navigator.mediaDevices = {};}// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = constraints => {// 首先，如果有getUserMedia的话，就获得它const getUserMedia =navigator.getUserMedia ||(navigator.getUserMedia =navigator.mozGetUserMedia ||navigator.webkitGetUserMedia ||navigator.msGetUserMedia);console.log("getUserMedia", getUserMedia);// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口if (!getUserMedia) {return Promise.reject(new Error("该浏览器暂不支持摄像头！"));}// 否则，为老的navigator.getUserMedia方法包裹一个Promisereturn new Promise((resolve, reject) => {getUserMedia.call(navigator, constraints, resolve, reject);});};}const constraints = {audio: true,video: {width: { ideal: 1280, max: 1920 },height: { ideal: 720, max: 1080 }}};console.log("window.navigator", window.navigator);window.navigator.mediaDevices.getUserMedia(constraints).then(stream => {const video = this.$refs.video;// 旧的浏览器可能没有srcObjectif ("srcObject" in video) {video.srcObject = stream;} else {// 防止在新的浏览器里使用它，因为它已经不再支持了video.src = window.URL.createObjectURL(stream);}video.onloadedmetadata = e => {video.play();};}).catch(err => {console.log(err.name + ": " + err.message);});}

// 截图screenshot() {// 获取视频const video = this.$refs.video;// 获取截图的地址const screenshot = this.$refs.screenshot;// 获取canvasconst canvas = this.$refs.canvas;// 渲染一个2d平面的视图const ctx = canvas.getContext("2d");// 设置canvas 视图文件地址和大小ctx.drawImage(video, 0, 0, 400, 300);// 将数据转为base64赋值给img标签的src属性screenshot.src = canvas.toDataURL("image/png");console.log("screenshot.src", screenshot.src);const imgData = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");// 下载图片到本地const save_link = document.createElementNS("http://www.w3.org/1999/xhtml","a");save_link.href = imgData;save_link.download = "file_" + new Date().getTime() + ".png";save_link.click();}

// 关闭摄像头closeVideo() {console.log("srcObject", this.$refs.video.srcObject);const srcObject = this.$refs.video.srcObject ? this.$refs.video.srcObject.getTracks() : this.$refs.video.src.getTracks()srcObject.forEach(track => {track.stop();this.$refs.video.src = null;});},