Блог

Главная - Вопросы по программированию - проверьте, подключено ли аудио- и видеоустройство с помощью javascript

проверьте, подключено ли аудио- и видеоустройство с помощью javascript

#javascript #angular #video #twilio #webrtc

#javascript #angular #Видео #twilio #webrtc

Вопрос:

Я создаю веб-платформу для видеозвонков с использованием twilio video API, у нас есть требование, чтобы перед тем, как пользователь присоединится к вызову, мы должны проверить, подключено ли у пользователя аудио- и видеоустройство к его компьютеру, если у пользователя нет ни одного из них, тогда не разрешайте пользователю присоединяться к видеозвонку.

Я уже пробовал mediaDevices.enumerateDevices из https://webrtc.org/getting-started/media-devices .Ниже приведен код,

 function getConnectedDevices(type, callback) {
  navigator.mediaDevices.enumerateDevices()
    .then(devices => {
        console.log(devices);
        callback(filtered);
    });
}

Это дает мне приведенный ниже json,

 [{
    deviceId: "default",
    groupId: "10684f807204708d605cc3ad0e5c4eaf763f1440775b8f79cdecf72806cc82f5",
    kind: "audioinput",
    label: "Default - Microphone (Realtek Audio)"
},
{
    deviceId: "communications",
    groupId: "10684f807204708d605cc3ad0e5c4eaf763f1440775b8f79cdecf72806cc82f5",
    kind: "audioinput",
    label: "Communications - Microphone (Realtek Audio)"
},
{
    deviceId: "491ccf0569924a7c1264a6afd337a8f744f239d78414e80f17a07122725bb46c",
    groupId: "10684f807204708d605cc3ad0e5c4eaf763f1440775b8f79cdecf72806cc82f5",
    kind: "audioinput",
    label: "Microphone (Realtek Audio)"
},
{
    deviceId: "823160fcdef4bedf2d1769cfbcb9058fe41bc01258b811f9aef19eb21a27cb76",
    groupId: "f86216b491186ac3208f9fc59d31b913e7017bafb505005d39983345ab35811f",
    kind: "videoinput",
    label: "Integrated Webcam (0bda:5689)"
},
{
    deviceId: "default",
    groupId: "10684f807204708d605cc3ad0e5c4eaf763f1440775b8f79cdecf72806cc82f5",
    kind: "audiooutput",
    label: "Default - Speakers / Headphones (Realtek Audio)"
},
{
    deviceId: "communications",
    groupId: "10684f807204708d605cc3ad0e5c4eaf763f1440775b8f79cdecf72806cc82f5",
    kind: "audiooutput",
    label: "Communications - Speakers / Headphones (Realtek Audio)"
},
{
    deviceId: "213851f9659d4751c7c60016112d74e290d1ce398d12d774bda0c68ef590f61c",
    groupId: "10684f807204708d605cc3ad0e5c4eaf763f1440775b8f79cdecf72806cc82f5",
    kind: "audiooutput",
    label: "Speakers / Headphones (Realtek Audio)"
}
]

Глядя на json, я не совсем понимаю, как проверить наличие доступных аудио- и видеоустройств. Поскольку я должен реализовать это в angular, я не хочу использовать jquery или какой-либо плагин

Ответ №1:

Если на вашем компьютере нет подключенных аудио- или видеоустройств, то этот массив будет пустым. Похоже, у вас уже подключено несколько устройств.

То, что вы хотите искать, — это audioinput для микрофонов и videoinput для камер.

Итак, вы могли бы сделать что-то вроде этого:

 navigator.mediaDevices.enumerateDevices()
    .then(devices => {
        const microphones = devices.filter(d => d.kind === 'audioinput');
        const cameras = devices.filter(d => d.kind === 'videoinput');
        callback(
          microphones,
          cameras
        );
    });

если cameras.length > 0 , то у вас подключена какая-то камера, и если microphones.length > 0 , то у вас подключено какое-то микрофон. Вы могли бы использовать это, чтобы проверить, хотите ли вы разрешить кому-либо вызов.

Комментарии:

1. Евангелист-разработчик Twilio здесь. Это хороший ответ, я просто хотел добавить еще один момент. Это означает, что некоторые платформы (особенно iOS) не будут выдавать вам результаты от enumerateDevices до тех пор, пока вы не запросите доступ к камере или микрофону через getUserMedia сначала.

2. Спасибо @philnash за то, что поделился своим пониманием. Похоже, что если бы нужно было обнаружить наличие устройства в iOS (и некоторых других подобных платформах), к нему следует получить доступ? И если есть исключение / сбой, нужно сделать вывод, что требуемое устройство отсутствует.

3. Вы можете запустить getUserMedia , чтобы запросить доступ к камере или микрофону, вы даже можете указать какое-либо направление, например, запросить facingMode: “user” . Но обещание может быть отклонено, потому что оно не существует или потому, что пользователь отказал в разрешении, и вам нужно будет обработать оба результата (хотя вы можете обработать их одинаково). Получив разрешение в первый раз, вы можете перечислить все устройства.