HTML5打开摄像头及音频

这几天在搭建教育直播功能，使用了腾讯云的教育直播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拦截