MediaDevices设置音频输出设备
- 更新:2021-07-03 17:02:17
- 首发:2019-03-10 20:22:39
- 源代码
- 5451
MediaDevices 为浏览器控制音频输入设备、音频输出设备、视频输入设备提供了接口。
简单检测浏览器对MediaDevices
API的支持情况:
checkMediaDevicesSupport () {
if (!navigator) {
throw new Error('navigator not supported.')
}
if (!navigator.mediaDevices) {
throw new Error('mediaDevices not supported.')
}
if (!navigator.mediaDevices.enumerateDevices) {
throw new Error('mediaDevices.enumerateDevices() not supported.')
}
return true
}
获取设备列表:
async getDeviceList () {
await navigator.mediaDevices.getUserMedia({ // 请保留此代码以确保用户授权访问设备
video: true,
audio: true
})
this.deviceList = await navigator.mediaDevices.enumerateDevices()
return this.deviceList
}
设置音频输出设备(来源):
setOutAudioDevices (element, sinkId) {
return new Promise((resolve, reject) => {
if (typeof element.sinkId !== 'undefined') {
element.setSinkId(sinkId)
.then(() => {
console.log(`Success, audio output device attached: ${sinkId} to element with ${element.title} as source.`)
resolve(true)
})
.catch(error => {
let errorMessage = error
if (error.name === 'SecurityError') {
errorMessage = `You need to use HTTPS for selecting audio output device: ${error}`
}
console.error(errorMessage)
reject(errorMessage)
})
} else {
console.warn('Browser does not support output device selection.')
}
})
}
大坑提示:
const audio = document.createElement('audio') // 不能用 new Audio(res.url),否则无法设置输出信号,最好不要使用 createElement
audio.src = res.url
audio.load()
if (deviceId) {
await jsMediaDevices.setOutAudioDevices(audio, deviceId)
}
audio.play()
设置输出设备不能用Audio
对象,并且不能在audio.load()
之前调用setOutAudioDevices
。
最好不要使用createElement
,应该直接写到HTML中,否则部分浏览器将会出现此报错信息:DOMException: play() failed because the user didn't interact with the document first.
,在Chrome 50+版本中,JavaScript启动的播放发生之前都需要明确的用户操作。这有助于确保用户不会在没有明确地与页面交互的情况下开始下载和播放媒体。因此video
或audio
标签需要播放前事先加载到HTML。
Uncaught (in promise) DOMException: Failed to load because no supported source was found.
:报错通常与音频源有关(src里面的地址),可能是音频大小为0,也可能是发生了跨域。
更多示例代码:https://webrtc.github.io/samples/
对MediaDevices接口的简单封装:https://github.com/yi-ge/js-media-devices
除特别注明外,本站所有文章均为原创。原创文章均已备案且受著作权保护,未经作者书面授权,请勿转载。
打赏
交流区
暂无内容




由于我使用的方案并不需要“快捷指令”等APP的配合。也无需任何系统权限。因此存在被滥用可能,请大家不要因为此事联系我,谢谢。
直接问AI吧😂
作者老哥,代码不开源。可以大致说一下实现思路吗😕
谢谢,你写的最详细,也很有效的解决了撕裂问题
很棒的教程,比我之前配置ap的方式更优雅