zl程序教程

您现在的位置是:首页 >  Javascript

当前栏目

网站在线客服系统实时语音视频聊天实战开发,最兼容的getUserMedia获取音视频流的函数方法

2023-03-07 09:09:20 时间

getUserMedia() 是一个 JavaScript API,允许你访问用户的音频和视频设备(如摄像头和麦克风)。在不同的浏览器中,它的实现略有不同,但是你可以使用以下代码来实现一个最兼容的版本:

//兼容的getUserMedia
function getCompatibleUserMedia(constraints, successCallback, errorCallback) {
  var media = (navigator.getUserMedia || navigator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.msGetUserMedia);
  
  if (media) {
    media.call(navigator, constraints, successCallback, errorCallback);
    return true;
  } else {
    console.error("Your browser does not support the getUserMedia API.");
    return false;
  }
}

这个函数接受三个参数:

  • constraints:需要请求的媒体设备约束(例如音频和视频)。
  • successCallback:当请求成功时的回调函数。
  • errorCallback:当请求失败时的回调函数。

如果浏览器支持 getUserMedia,则使用 call() 方法调用它,并将 navigator 对象、约束、成功回调和错误回调作为参数传递。如果不支持,则在控制台中输出一条错误消息。

现在,你可以使用这个函数来请求媒体设备:

                var _this=this;
                let res=tools.getCompatibleUserMedia({video:true, audio: {
                    noiseSuppression: true,
                    echoCancellation: true,
                }},function(stream) {
    
                },function(err) {
                    _this.$message({
                        type: 'error',
                        message: err
                    });
                });
                if(!res){
                    _this.$message({
                        type: 'error',
                        message: "Your browser does not support the getUserMedia API."
                    });
                }