Javascript getUserMedia在新浏览器上不工作

我正在玩HTML媒体捕获和

getUserMedia

方法。它与Chrome不兼容，我收到了失败时的警报

以下是我使用的示例代码：

if（navigator.getUserMedia）{
navigator.getUserMedia(
//约束条件
{
视频：没错，
音频：正确
},
//成功回调
函数（localMediaStream）{
var video=document.querySelector（'video'）；
video.src=window.URL.createObjectURL（localMediaStream）；
//对视频做些什么
video.play（）；
},
//错误回调
功能（err）{
log（“发生以下错误：“+err”）；
}
);
}否则{
警报（“您的web浏览器或操作系统版本不支持getUserMedia”）；
}

它不适用于Chrome

尝试使用

webkit

，

moz

前缀，请参阅

navigator.getUserMedia=navigator.getUserMedia||
navigator.webkitGetUserMedia||
navigator.mozGetUserMedia；
if（navigator.getUserMedia）{
//做事
}

Chrome无法识别标准navigator.getUserMedia。它与Microsoft Edge配合使用。您需要添加供应商前缀。 对于Chrome:

navigator.webkitGetUserMedia

下面是一个关于JSFIDLE的工作代码

//浏览器支持检查“ms”供应商功能适用于IE8
navigator.getUserMedia=（navigator.getUserMedia||
navigator.webkitGetUserMedia||
navigator.mozGetUserMedia||
navigator.msGetUserMedia）；
if（navigator.getUserMedia）{
navigator.getUserMedia(
//约束条件
{
视频：没错，
音频：正确
},
//成功回调
函数（localMediaStream）{
var video=document.querySelector（'video'）；
video.src=window.URL.createObjectURL（localMediaStream）；
//对视频做些什么
video.play（）；
},
//错误回调
功能（err）{
log（“发生以下错误：“+err”）；
}
);
}否则{
警报（“您的web浏览器或操作系统版本不支持getUserMedia”）；
}

导航器。getUserMedia已被取代

后者使用现代承诺，在Edge、Firefox和Chrome中本机提供。还有官方的WebRTC polyfill帮助他们赶上标准（例如，

srcObject

）

这是一把在三种情况下都有效的小提琴：

---

这个小小的验证怎么样

async getMediaStream(constraints): Promise<MediaStream> {
  return new Promise(function (resolve, reject) {
    if (navigator.mediaDevices
      && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia(constraints)
        .then((stream) => resolve(stream))
        .catch(err => reject(err));
    } else {
      const getUserMedia = navigator.getUserMedia
      || navigator['webkitGetUserMedia']
      || navigator['mozGetUserMedia']
      || navigator['msGetUserMedia'];
      getUserMedia(
        constraints,
        (stream) => resolve(stream),
        (err) => reject(err)
      );
    }
  });
}

const isEdge = navigator.userAgent.indexOf('Edge') !== -1
  && (!!navigator.msSaveOrOpenBlob || !!navigator.msSaveBlob);

getMediaStream({
  audio: isEdge ? true : {
    echoCancellation: false
  }
})
.then(stream => console.log(stream))
.catch(err => console.error(err))

异步getMediaStream（约束）：承诺{ 返回新承诺（功能（解决、拒绝）{ 如果（navigator.mediaDevices &&navigator.mediaDevices.getUserMedia）{ navigator.mediaDevices.getUserMedia（约束） 。然后（（流）=>解析（流）） .catch（err=>reject（err））； }否则{ const getUserMedia=navigator.getUserMedia ||导航器['webkitGetUserMedia'] ||导航器['mozGetUserMedia'] ||导航器['msGetUserMedia']； getUserMedia( 制约因素， （流）=>解析（流）， （错误）=>拒绝（错误） ); } }); } const isEdge=navigator.userAgent.indexOf（'Edge'）！=-1. &&（！！navigator.msSaveOrOpenBlob | |！！navigator.msSaveBlob）； getMediaStream({ 音频：iEdge？正确：{ 回声消除：假 } }) .then（stream=>console.log（stream）） .catch（err=>console.error（err））

---

您好，Nicholls:）

FIREFOX现在是问题所在，因为您的小提琴和我的所有应用程序LOL“navigator.mozGetUserMedia已被navigator.mediaDevices.getUserMedia替换发生以下错误：NotReadableError:分配视频源失败”@Rami Sarieddine firefox中的上述URL不起作用，请检查。使用最新版本的Chrome和FF都会破坏该功能。。。NotFoundError：在这里找不到对象。@ScottStensland该错误通常意味着在您的系统上找不到摄像头或麦克风。Fiddle仍然适合我。有关正确的HTML媒体捕获语法（有几个版本），请参阅使用最新版本。。。navigator.getUserMedia（）现在被navigator.mediaDevices.getUserMedia替换

async getMediaStream(constraints): Promise<MediaStream> {
  return new Promise(function (resolve, reject) {
    if (navigator.mediaDevices
      && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia(constraints)
        .then((stream) => resolve(stream))
        .catch(err => reject(err));
    } else {
      const getUserMedia = navigator.getUserMedia
      || navigator['webkitGetUserMedia']
      || navigator['mozGetUserMedia']
      || navigator['msGetUserMedia'];
      getUserMedia(
        constraints,
        (stream) => resolve(stream),
        (err) => reject(err)
      );
    }
  });
}

const isEdge = navigator.userAgent.indexOf('Edge') !== -1
  && (!!navigator.msSaveOrOpenBlob || !!navigator.msSaveBlob);

getMediaStream({
  audio: isEdge ? true : {
    echoCancellation: false
  }
})
.then(stream => console.log(stream))
.catch(err => console.error(err))