这几天在搭建教育直播功能,使用了腾讯云的教育直播web SDK,其开发的前端框架是用的vuejs,千行main.js代码,大致看了一遍,还是好理解的。
在看其他的web直播工具时,存在了设备检测的功能,但腾讯云web SDK并没有提供这个,所以要自己写。
在浏览main.js时,发现其调用摄像头和麦克风使用的是WebRTCAPI创建了房间后打开的。这个文件有万行代码,实在是不想看,况且设备检测不涉及推流,所以在网上搜了一下如何调用。
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getUserMedia({video: true, audio: true}, this.gotStream, this.noStream);
上面的代码中,是兼容了主流内核浏览器的用户多媒体设备。
在调用 navigator.getUserMedia 时,第一个传调用的设备:摄像头(video),麦克风(audio),使用时传true,不调用时不需要传(默认false)
第二个参数是,获取流时,调用的函数,这个下面讲解。
第三个参数是,没有流时,调用的函数。
当获取了流时,则调用了我们自己写的gotStream方法,这个方法的内容可以是将流的地址和html中video的url绑定,然后这个流就可以展示在video标签内了:
gotStream: function(stream){
var $this = this;
var video = document.getElementById('video');
video.srcObject = stream;
video.onerror = function () {
stream.stop();
};
stream.onended = $this.noStream;
video.onloadedmetadata = function () {
alert('摄像头成功打开!');
};
},
在上面代码的第四行中,网上有说是video.src = URL.createObjectURL(stream); 这个在实际使用时,被chrome告知不推荐使用此方式,因此改为 video.srcObject = stream;
当没有流时,则调用noStream方法,方法传的参数是错误的信息。方法内可以写自己的逻辑,我就仅仅写了一个alert提示错误信息
noStream: function(err){
alert(err);
},
现在在本地的服务器中执行这个方法,则提示了这个错误:
意思是只有安全的源才可以打开用户设备。
而安全的源指的是:
(https, *, *)
(wss, *, *)
(*, localhost, *)
(*, 127/8, *)
(*, ::1/128, *)
(file, *, —)
(chrome-extension, *, —)
我的本地测试地址并不是localhost,用了MAMP改写了地址,所以弹出了这个提示,因此转为localhost就可以看到摄像头的内容了:
(摄像头被我用便签纸封了起来)
因此,当项目上线时,必须是https的网址才可以使用,目前阿里云也提供很便宜的泛域名SSL证书(大概一年2000左右),在chrome66版本以上的,也是可以显示的(有部分的免费ssl证书会被拦截)
七牛云提供了免费的单域名SSL证书,但没有测试过是否会被66版本的chrome拦截