专升本考试系统项目总结

  专升本考试系统我负责的主要是网页端的人脸识别验证和做题时的实时监控功能，实现主要分为两步，一是通过摄像头和麦克风获取到实时图像和音频，二是将图像和音频传递到七牛云。

一：获取图像和音频

1.打开媒体设备

  通过navigator.MediaDevices.getUserMedia()这个方法可以提示用户给予使用媒体输入的许可，调用多媒体设备成功时会执行then里的内容并会返回会产生一个MediaStream，里面包含了请求的媒体类型的轨道，利用MediaStream可以获取媒体设备获取的内容，调用失败时会执行catch里的内容。例子如下所示：

navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function(stream) {
  var video = document.querySelector('video');
  // 旧的浏览器可能没有srcObject
  if ("srcObject" in video) {
    video.srcObject = stream;
  } else {
    // 防止在新的浏览器里使用它，应为它已经不再支持了
    video.src = window.URL.createObjectURL(stream);
  }
  video.onloadedmetadata = function(e) {
    video.play();
  };}).catch(function(err) {
  console.log(err.name + ": " + err.message);});

2.截取图像

使用canvas的绘制图片方法来截取base64格式的图片，实现代码如下：

setImage() {
  let self = this
  self.uploadArray.imageName = ''
  self.uploadArray.imageUrl = ''
  let video = document.querySelector('#video')
  // 点击，canvas画图
  self.thisContext.drawImage(video, 0, 0, self.constraints.video.width, self.constraints.video.height)
  // 获取图片base64链接
  let image = this.thisCancas.toDataURL('image/png')
  self.imgSrc = image
  let imgFIle = this.dataURLtoFile(image)
},

3.录制音频

调用媒体设备成功时通过 MediaRecorder() 构造函数创建一个指定的 MediaStream进行录制的 MediaRecorder对象，通过这个对象就可以实现音频的录制，实现代码如下：

//创建MediaRecorder对象
this.myMediaRecorder = new MediaRecorder(stream, {
  audioBitsPerSecond: 128000, // 音频码率
  videoBitsPerSecond: 100000, // 视频码率
  mimeType: 'audio/webm' // 编码格式
});
//开始录制
this.myMediaRecorder.start()

//结束录制
let self = this;
self.uploadArray.voiceName = ''
self.uploadArray.voiceUrl = ''
try {
  self.myMediaRecorder.stop()
  self.myMediaRecorder.ondataavailable = function (e) {
    // 下载视频
    let blob = new Blob([e.data], {type: 'audio/aac'})
    let voiceFile = self.blobToFile(blob)
    }
} catch (err) {
  console.log(err);
}

二：七牛云上传

以前实现七牛云上传是通过封装好的upload组件选择文件上传的，这在专升本系统中是不可以的，需要实现自动上传，实现的思路是先将获取的base64格式的图片和blob格式的音频全部转换成file类型文件再上传。

1.格式转换

Base64、blob、file相互转换见博客：格式转换

2.上传

实现代码如下：

const axiosInstance = axios.create({withCredentials: false});    //withCredentials 禁止携带cookie，带cookie在七牛上有可能出现跨域问题
let data = new FormData();
data.append('token', this.postData.token);     //七牛需要的token，叫后台给，是七牛账号密码等组成的hash
data.append('file', file);
data.append('key', this.idNum + '-' + new Date().getTime() + '.png');
axiosInstance({
  method: 'POST',
  url: this.actionUrl,  //上传地址
  data: data,
  timeout: 30000,      //超时时间，因为图片上传有可能需要很久
}).then(response => {
  let data = response.data
 //上传成功拼接链接地址
  let faceImageUrl = this.domain + '/' + data.key
  this.uploadArray.imageUrl = faceImageUrl
}).catch(function (err) {
  //上传失败
});

三：遇到的问题

1.上传到七牛云时，地址没有后缀名

解决方法：上传时指定key，实现代码如下：

data.append('key', this.idNum + '-' + new Date().getTime() + '.png');