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

2022-07-13 110点热度 0人点赞 0条评论

需求说明

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

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>

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论