获取浏览器麦克风、摄像头和屏幕共享(一)

浏览器API

浏览器使用设备的限制

需要使用https协议才能访问设备，并且浏览器会弹窗询问用户是否允许使用设备，大多数浏览器在同一个域名下只要询问一次就会记住，也有个别浏览器每次访问都需要询问(说的就是Safari)。
如果是http，只有在127.0.0.1和localhost下可以访问设备。

浏览器获取麦克风

通过浏览器的API来获取麦克风

if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({audio: true}).then((mediastream) => {
    // 返回的是Mediastream，并不是audiotrack
    let audioTrack = mediastream.getAudioTracks()[0];

    // 如果需要播放，则可以直接使用auido播放
    let audioElement = document.getElementById("localAudio");
    audioElement.srcObject = mediastream;
    audioElement.play().then(() => {
      // 播放成功
    }).catch((err) => {
      // 播放失败
    })
  }).catch((err) => {
    // 获取麦克风失败，可以通过 err.name 或者 err.message 来判断错误原因，err并没有返回错误错误码
  })
} else {
  // 浏览器不支持获取设备权限，有可能是当前页面不是https，也可能是当前浏览器不支持获取设备权限
}

运行以上代码，浏览器会弹出一个窗口，询问是否允许使用麦克风

image.png

如果点击允许，会进入到then部分的代码。禁止则会进入到catch中.

浏览器获取摄像头

通过浏览器的API来获取摄像头

if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({video: true}).then((mediastream) => {
    // 返回的是Mediastream，并不是videotrack
    let videoTrack = mediastream.getVideoTracks()[0];

    // 如果需要播放，则可以直接使用auido播放
    let videoElement = document.getElementById("localVideo");
    videoElement.srcObject = mediastream;
    videoElement.play();
  }).catch((err) => {
    // 获取摄像头失败，可以通过 err.name 或者 err.message 来判断错误原因，err并没有返回错误错误码
  })
} else {
  // 浏览器不支持获取设备权限，有可能是当前页面不是https，也可能是当前浏览器不支持获取设备权限
}

运行以上代码，浏览器会弹出一个窗口，询问是否允许使用摄像头

image.png

如果点击允许，会进入到then部分的代码。禁止则会进入到catch中.
在video中我们能看到摄像头捕获的内容

image.png

浏览器获取屏幕共享

通过浏览器的API来获取屏幕共享

if (navigator && navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
  navigator.mediaDevices.getDisplayMedia({video: true}).then((mediastream) => {
    // 返回的是Mediastream，并不是videotrack
    let videoTrack = mediastream.getVideoTracks()[0];

    // 如果需要播放，则可以直接使用auido播放
    let videoElement = document.getElementById("localVideo");
    videoElement.srcObject = mediastream;
    videoElement.play();
  }).catch((err) => {
    // 获取摄像头失败，可以通过 err.name 或者 err.message 来判断错误原因，err并没有返回错误错误码
  })
} else {
  // 浏览器不支持获取屏幕共享，有可能是当前页面不是https，也可能是当前浏览器不支持屏幕共享
}

运行以上代码，浏览器会弹出一个窗口，让用户选择想要分享的内容

image.png

选择要分享的内容然后点击分享，会进入到then部分的代码。取消则会进入到catch中.

浏览器支持

获取设备权限

image.png

获取屏幕共享

image.png

其他

如果你也是专注前端多媒体或者对前端多媒体感兴趣，可以搜索微信公众号"前端多媒体"