浏览器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,也可能是当前浏览器不支持获取设备权限
}
运行以上代码,浏览器会弹出一个窗口,询问是否允许使用麦克风
如果点击允许,会进入到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,也可能是当前浏览器不支持获取设备权限
}
运行以上代码,浏览器会弹出一个窗口,询问是否允许使用摄像头
如果点击允许,会进入到then部分的代码。禁止则会进入到catch中.
在video中我们能看到摄像头捕获的内容
浏览器获取屏幕共享
通过浏览器的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,也可能是当前浏览器不支持屏幕共享
}
运行以上代码,浏览器会弹出一个窗口,让用户选择想要分享的内容
选择要分享的内容然后点击分享,会进入到then部分的代码。取消则会进入到catch中.
浏览器支持
获取设备权限
获取屏幕共享
其他
如果你也是专注前端多媒体或者对前端多媒体感兴趣,可以关注微信公众号“前端多媒体”