H5网页拍照以及解决http环境下浏览器捕捉不到摄像头和私有化部署的SSL证书问题

本文链接：https://blog.csdn.net/xy_peng/article/details/97138938

常见的开发中，由开发环境http——到提测环境——再到生产环境https的切换下。稍不注意，一些BUG就出现了。
先顺便提一下：最近的项目中，就有网页获取PC端媒体设备，进行拍照。

采用webRTC的接口，调取摄像头拍照：

// 调取摄像头

shootPhoto() {

this.canvas = document.getElementById("canvas");

var _this = this；

setTimeout(() => { // 之所以放在100秒的延时，是为了解决 vue 中获取虚拟节点的问题和 this.$nextTick()函数一个作用

_this.video = document.getElementById("video");

// 媒体对象

window.navigator.getMedia =

window.navigator.getUserMedia ||

window.navigator.webkitGetUserMedia ||

window.navigator.mozGetUserMedia ||

window.navigator.msGetUserMedia;

if (window.navigator.getMedia) {

window.navigator.getMedia(

{

video: true, // 使用摄像头对象

audio: false // 不适用音频

},

function(strem) {

console.log(strem);

try {

_this.video.src = window.URL || window.webkitURL.createObjectURL(strem);

} catch (e) {

console.log(_this.video);

_this.video.srcObject = strem;

}

_this.video.play();

},

function(error) {

console.log(error);

alert("未捕捉到摄像头");

}

);

} else {

alert("不支持摄像头");

_this.shootPhotoDialogVisible = false;

}

}, 100);

},

拍照事件:

// 拍照事件

shootAct() {

var canvas = document.createElement("canvas");

canvas.width = "350";

canvas.height = "260";

// canvas.getContext("2d").drawImage(this.video, 280, 0, 1000, 720, 0, 0, 260, 260);

      // canvas画布，画出摄像头捕捉的画面

      canvas.getContext("2d").drawImage(this.video, 0, 0, 350, 260);

// 把canvas图像转为img图片

   this.imageUrl = canvas.toDataURL("image/png");

        this.fileData = this.imageUrl

.replace("data:image/jpeg;base64,", "jpeg:")

.replace("data:image/png;base64,", "png:")

.replace("data:image/jpg;base64,", "jpg:"); // base64字符串截取前面的类型字符，用图片的后缀名替换

     this.getFaceQualityDetection(this.fileData); //图片质量检测

},