Отображение и скрытие HTML

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

Итак, у вас настроены разрешения на микрофон. Следующий шаг — убедиться, что каждый пользователь знает свой идентификатор узла, чтобы они могли установить соединения. Фреймворк peerJS предоставляет нам множество обработчиков событий, которые мы можем вызвать для созданного ранее узла.

1. Давайте воспользуемся событием open для создания обработчика, который отображает идентификатор узла, когда он открыт. Добавьте следующий код в конец script.js.

   peer.on("open", () => {
     document.getElementById("cast-status").textContent =
       `Your device ID is: ${peer.id}`;
   });
   

2. Попробуйте перезагрузить приложение в браузере. Вместо connecting..., вы должны увидеть Your device ID is: <peer ID>.

   

3. Пока вы здесь, можете создать несколько функций для отображения и скрытия различных элементов, которые вам понадобятся позже. Вам необходимо создать две функции: showCallContent() и showConnectedContent(). Эти функции будут отвечать за отображение кнопки вызова, отображение кнопки завершения звонка и аудиоэлементов при необходимости.

   const audioContainer = document.querySelector(".call-container");
   
   // Displays the call button and peer ID
   function showCallContent() {
     document.getElementById("cast-status").textContent =
       `Your device ID is: ${peer.id}`;
     callBtn.hidden = false;
     audioContainer.hidden = true;
   }
   
   // Displays the audio controls and correct copy
   function showConnectedContent() {
     document.getElementById("cast-status").textContent = "You're connected";
     callBtn.hidden = true;
     audioContainer.hidden = false;
   }
   

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