electron 成功调起本地摄像头拍照保存到本地

CSDN话题挑战赛第2期
参赛话题：学习笔记

学习之路，长路漫漫，写学习笔记的过程就是把知识讲给自己听的过程。这个过程中，我们去记录思考的过程，便于日后复习，梳理自己的思路。学习之乐，独乐乐，不如众乐乐，把知识讲给更多的人听，何乐而不为呢?
你可以从以下几个方面着手（不强制），或者根据自己对话题主题的理解创作，参考如下：

点击拍照上传弹框后调起摄像头设备，点击按钮执行方法 takePhotoUpload

代码如下:

takePhotoUpload(){
	let device = ''; // 所选择的摄像头 deviceId
	this.dialogTakePhotoShow = true;
	let stream = navigator.mediaDevices.enumerateDevices()
	  .then(devices =>{ //多个摄像头设备时，该处根据设备id判断具体使用哪个摄像头设备
		for(let i in devices){
		  if(devices[i].kind == 'videoinput'){
			device = devices[i];
			break;
		  }
		}
	  })
	  .then(() => {
		navigator.mediaDevices.getUserMedia({
			audio: false,
			video: {
				sourceId: device.deviceId, // 把对应的 摄像头ID 放到这里
				// width: 500,
				// height: 600
                //如果拍照不清晰，考虑加入以下参数，但考虑下摄像头的高度和画布的高度
                //width:{min: 1000, ideal: 1000, max: 3264 },
                //height:{min: 1080, ideal: 1080, max: 2488}
			}
		}).then(success => {
			// 摄像头开启成功
			this.$refs['video'].srcObject = success;
			// 实时拍照效果
			this.$refs['video'].play();
		  })
		  .catch(error => {
			console.error('摄像头开启失败，请检查摄像头是否可用！')
		  })
	})
},

拍照弹框代码：

<!-- 拍照弹框 -->
<el-dialog title="拍照" :visible.sync="dialogTakePhotoShow" width="90%" @close="takePhotoClose">
  <div style="display:inline-flex;width:100%">
	 <!--图片展示-->
	<video ref="video" width="700px" height="450px" autoplay></video>
	<!--canvas截取流-->
	<canvas ref="canvas" width="400px" height="400px"></canvas>
  </div>
  <div slot="footer" class="dialog-footer">
	<el-button type="primary" @click="takePhoto" size="mini">拍 照</el-button>
	<el-button type="success" @click="takePhotoConfirm" size="mini">上 传</el-button>
  </div>
</el-dialog>

拍照后先保存到本地，同时弹框中可预览。点击上传后才上传至服务器，拍照后关闭不上传同时要调用摄像头关闭函数。代码如下：

在上方需要引入
const fs = require('fs')
const os = require('os')
const path = require('path')
 
data中需要定义 dialogTakePhotoShow:false,
 
 
/**
* 拍照
*/
takePhoto(){
   let ctx = this.$refs['canvas'].getContext('2d');
   // 把当前视频帧内容渲染到canvas上
   ctx.drawImage(this.$refs['video'], 0, 0, 400, 400);
   // 转base64格式、图片格式转换、图片质量压缩
   let imgBase64 = this.$refs['canvas'].toDataURL('image/png', 0.7); // 由字节转换为KB 判断大小
   const base64 = imgBase64.replace(/^data:image\/\w+;base64,/, '');
   let dataBuffer = new Buffer(base64, 'base64');
   let phototakePath = path.join(os.tmpdir(), 'phototaketemp.png')
     fs.writeFile(phototakePath, dataBuffer, (err)=>{
	if(err){
	    console.log('拍照失败...')
	 }else{
	     console.log('照片成功保存到本地，路径为：' + phototakePath)
	  }
    });
},
/**
* 拍照后上传
*/
takePhotoConfirm(){
  this.takePhotoClose();
  // 上传到服务器
  // .......
},
/**
* 拍照弹框关闭
*/
takePhotoClose(){
  // 弹窗关闭
  this.dialogTakePhotoShow = false;
  // 关闭摄像头
  if (!this.$refs['video'].srcObject) return;
    let stream = this.$refs['video'].srcObject;
    let tracks = stream.getTracks();
    tracks.forEach(track => {
      track.stop();
	})
  this.$refs['video'].srcObject = null;
},