浏览器API
浏览器使用设备的限制
需要使用https协议才能访问设备，并且浏览器会弹窗询问用户是否允许使用设备，大多数浏览器在同一个域名下只要询问一次就会记住，也有个别浏览器每次访问都需要询问(说的就是Safari)。
如果是http，只有在127.0.0.1和localhost下可以访问设备。
浏览器获取麦克风
通过浏览器的API来获取麦克风
<audio id="localAudio" ></audio>
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来获取摄像头
<video id="localVideo" controls ></video>
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来获取屏幕共享
<video id="localVideo" controls ></video>
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
其他
如果你也是专注前端多媒体或者对前端多媒体感兴趣，可以搜索微信公众号"前端多媒体"
