Ответ на вызов

• Предыдущая
• Следующая

Теперь наши пользователи могут совершать звонки, но не могут на них отвечать. Добавим недостающий элемент, чтобы пользователи могли отвечать на входящие звонки.

1. Фреймворк peerJS предоставляет .on('call') событие, давайте его используем. Добавьте это в конец script.js.

   peer.on("call", (call) => {
     const answerCall = confirm("Do you want to answer?");
   });
   

   Сначала предложим пользователю ответить с помощью подтверждения. Это отобразит окно на экране (как показано на изображении), где пользователь сможет выбрать «ОК» или «Отмена» — это соответствует возвращаемому булевому значению. При нажатии кнопки «Вызов» в вашем браузере должно появиться следующее окно:

   

   Предупреждение: Поскольку мы используем диалоговое окно подтверждения, чтобы спросить пользователя, хочет ли он принять вызов, важно, чтобы браузер и открытая вкладка были «активными», то есть окно не должно быть свёрнуто, а вкладка должна быть на экране и иметь фокус мыши. В продуктовой версии приложения рекомендуется создать собственное модальное окно в HTML, чтобы избежать этих ограничений.

2. Разработаем этот обработчик событий. Обновите его следующим образом:

   peer.on("call", (call) => {
     const answerCall = confirm("Do you want to answer?");
   
     if (answerCall) {
       call.answer(window.localStream); // A
       showConnectedContent(); // B
       call.on("stream", (stream) => {
         // C
         window.remoteAudio.srcObject = stream;
         window.remoteAudio.autoplay = true;
         window.peerStream = stream;
       });
     } else {
       console.log("call denied"); // D
     }
   });
   

   Рассмотрим важнейшие части этого кода:

   • call.answer(window.localStream): если answerCall равно true, необходимо вызвать функцию answer() peerJS для создания ответа, передав локальный поток.
   • showCallContent: Аналогично тому, что вы сделали в обработчике события кнопки «Вызов», необходимо убедиться, что вызываемый человек видит правильное содержимое HTML.
   • Все в блоке call.on('stream', () => { } абсолютно идентично обработчику события кнопки «Вызов». Причина, по которой его нужно добавить сюда, заключается в обновлении браузера и для человека, принимающего вызов.
   • Если человек отклонит вызов, просто выведем сообщение в консоль.

3. Теперь у вас достаточно кода для создания и ответа на вызов. Обновите браузеры и протестируйте. Убедитесь, что в обоих браузерах открыта консоль, иначе не будет появляться запрос на принятие вызова. Нажмите кнопку «Вызов», введите идентификатор собеседника в другом браузере и примите вызов. Окончательная страница должна выглядеть так:

   

• Предыдущая
• Следующая