目前已知問(wèn)題谷歌又問(wèn)題不能直接使用http調(diào)取，如果使用需要進(jìn)行一下配置
1 打開(kāi)谷歌瀏覽器，在地址欄輸入：
chrome://flags/#unsafely-treat-insecure-origin-as-secure
2 按回車(chē)鍵，配置如下信息。多個(gè)地址用逗號(hào)隔開(kāi)
image.png
如使用iframe嵌入聊天頁(yè)面，需原來(lái)需要增加 allow屬性
屬性值為： microphone;camera;midi;encrypted-media;
<iframe allow="microphone;camera;midi;encrypted-media;"></iframe>
具體代碼
var _this = this
this.thisCancas =this.$refs.canvasCamera
this.thisContext = this.thisCancas.getContext('2d')
this.thisVideo = this.$refs.videoCamera
// 舊版本瀏覽器可能根本不支持mediaDevices，我們首先設(shè)置一個(gè)空對(duì)象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {}
}
// 一些瀏覽器實(shí)現(xiàn)了部分mediaDevices，我們不能只分配一個(gè)對(duì)象
// 使用getUserMedia，因?yàn)樗鼤?huì)覆蓋現(xiàn)有的屬性。
// 這里，如果缺少getUserMedia屬性，就添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先獲取現(xiàn)存的getUserMedia(如果存在)
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.getUserMedia
// 有些瀏覽器不支持，會(huì)返回錯(cuò)誤信息
// 保持接口一致
if (!getUserMedia) {
return Promise.reject(new Error('此瀏覽器中未實(shí)現(xiàn)getUserMedia,不能調(diào)用攝像頭'))
}
// 否則，使用Promise將調(diào)用包裝到舊的navigator.getUserMedia
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject)
})
}
}
var constraints = {
audio: false,
video: {width: this.videoWidth, height: this.videoHeight, transform: 'scaleX(-1)'}
}
navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
// 舊的瀏覽器可能沒(méi)有srcObject
if ('srcObject' in _this.thisVideo) {
_this.thisVideo.srcObject = stream
} else {
// 避免在新的瀏覽器中使用它，因?yàn)樗诒粭売谩?
_this.thisVideo.src = window.URL.createObjectURL(stream)
}
// _this.thisVideo.onloadedmetadata = function (e) {
// _this.thisVideo.play()
// }
_this.thisVideo.play()
}).catch(err => {
console.log(err)
})
