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

常见的开发中，由开发环境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); //图片质量检测

},

最后是正题了：

解决问题： window.navigator.getMedia(）在http环境下被禁止的调用

方法一：在桌面的快捷方式，点击右键——属性

在目标后面加一个空格，然后填上：--unsafely-treat-insecure-origin-as-secure="http://192.168.9.177:51880" --user-data-dir="F:\temp"

“secure=”后面是你项目部署的IP端口。“--user-data-dir=”后面更上的是你PC上任意可以读取写入的路径。这句话的意义是：忽略浏览器的默认安全策略

方法二：是针对你私有化部署的https，自我颁发的SSL证书不通过浏览器验证的方法。
同样的是：
在目标后面加一个空格，然后填上：--test-type --ignore-certificate-errors

这里的脚本意义是：忽略浏览器SSL证书安全拦截机制

切记：-- 前面都要加空格的，同时要重启浏览器生效。

最后编辑于：2019.07.23 16:26:48