html5/浏览器vue中连接摄像头并加载显示音视频

需求说明

需要在网页浏览器中调用连接摄像头/音频，并显示在浏览器中

Javascript代码如下：

this.getUserMediaToPhoto({ video: { width: 480, height: 320 }, audio: true }, function(stream) {
    var video = document.getElementById('video');
    video.srcObject = stream;
}, function(error) {
    console.log(error);
});

// 打开摄像头，然后会返回一个Promise对象，然后其中的第一个success为成功之后，拿到一个视频流，然后把这个视频流给video播放
getUserMediaToPhoto: function(constraints, success, error) {
    if (navigator.mediaDevices.getUserMedia) {
        //最新标准API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints, success, error);
    } else if (navigator.mozGetUserMedia) {
        //firefox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
    } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
    }
},

HTML页面很简单，放一个video标签就好了，上面得到的摄像头的输出画面会显示在video标签里面:

<video id="video" autoplay style="width: 480px;height: 320px;"></video>