【问题标题】:WebRTC - Change audio output deviceWebRTC - 更改音频输出设备
【发布时间】:2017-07-17 14:00:54
【问题描述】:

我有一个使用用户媒体设备的应用程序,我希望允许用户自行更改音频输出。为此,我关注了this example

当我选择我想要的设备时尝试这样做:

var deviceId = "b6d4b95564be24f8be5b8e982fdf851e658a05bb9d3aeec09280976b11debc2a";
var audioElement = document.querySelector('audio');
if (typeof audioElement.sinkId !== 'undefined') {
    audioElement.setSinkId(deviceId)
        .then(function() {
            console.log('Success, audio output device attached: ' + deviceId);
        })
        .catch(function(error) {
            var errorMessage = error;
            if (error.name === 'SecurityError') {
                errorMessage = 'You need to use HTTPS for selecting audio output ' + 'device: ' + error;
            }
            console.error(errorMessage);
        });
} else {
    console.warn('Browser does not support output device selection.');
}

audioElement 是 HTML 文件中的音频标签。 deviceId 是我想用作输出的设备的 ID(例如:b6d4b95564be24f8be5b8e982fdf851e658a05bb9d3aeec09280976b11debc2a

但这给了我一个DOMException error : Requested device not found

然而enumerateDevices函数的deviceId结果:

navigator.mediaDevices.enumerateDevices().then(function(devices){
    var audioInputList = _.filter(devices, function(device){ return device.kind == "audioinput"; });
    var audioOutputList = _.filter(devices, function(device){ return device.kind == "audiooutput"; });
}).catch(function(){
    console.log("error");
});

那么有什么问题吗?

编辑

这就是我获取用户媒体和设备列表的方式:

function handleSuccess(stream){
    var audioElement = document.querySelector('audio');
    audioElement.srcObject = stream;
    return navigator.mediaDevices.enumerateDevices();
}

function gotDevices(devices){
    var audioDevice = { input:[], output:[] };
    audioDevice.input = _.filter(devices, function(device){ return device.kind == "audioinput"; });
    audioDevice.output = _.filter(devices, function(device){ return device.kind == "audiooutput"; });
}

function start(contraints){
    deconnectPeerConnection();
    navigator.mediaDevices.getUserMedia(contraints).then(handleSuccess)
    .then(gotDevices).catch(handleError);
}
start(constraints);

【问题讨论】:

  • 您是否在.mediaDevices.getUserMedia() 通话中执行naviagtor.mediaDevices.enumerateDevices().setSinkId() 通话?要授予设置sinkId的权限?
  • @guest271314 不,我已经完成了getUserMedia() 功能。之后,当用户在选择列表中选择设备时,我会这样做。
  • deviceId 定义在audioElement.setSinkId(deviceId) 上?你为什么不在.then() 中调用.setSinkId() 链接到.enunerateDevices() 调用?
  • @guest271314 我发现了问题,上面的代码运行良好...感谢您的建议;)
  • @Berserk 出了什么问题?我鼓励您发布您的发现作为这个问题的答案,以供后人参考。

标签: javascript webrtc getusermedia


【解决方案1】:

此外,您应该检查此媒体元素播放的 MediaStream 是否有音轨,否则会引发异常。

【讨论】:

猜你喜欢
  • 2021-11-19
  • 1970-01-01
  • 1970-01-01
  • 2011-04-04
  • 2020-04-29
  • 2017-05-25
  • 2021-07-27
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多