Создание вызова

• Предыдущий
• Следующий

Захватывающие времена — теперь вы предоставите своим пользователям возможность создавать вызовы.

1. Прежде всего, получите ссылку на кнопку "Вызов", определенную в HTML, добавив следующее в конец script.js:

   const callBtn = document.querySelector(".call-btn");
   

2. Когда вызывающий нажмет "Вызов", вам нужно будет попросить у него идентификатор участника, которого он хочет вызвать (который мы сохраним в переменной code в getStreamCode()), а затем создать подключение с этим кодом. Добавьте следующее под вашим предыдущим кодом:

   callBtn.addEventListener("click", () => {
     getStreamCode();
     connectPeers();
     const call = peer.call(code, window.localStream); // A
   
     call.on("stream", (stream) => {
       // B
       window.remoteAudio.srcObject = stream; // C
       window.remoteAudio.autoplay = true; // D
       window.peerStream = stream; //E
       showConnectedContent(); //F    });
     });
   });
   

   Давайте разберем этот код:

   • const call = peer.call(code, window.localStream): Это создаст вызов с code и window.localStream, которые мы ранее назначили. Обратите внимание, что localStream будет потоком пользователя localStream. Итак, для вызывающего А это будет его поток, а для В — его собственный поток.
   • call.on('stream', (stream) => { : peerJS предоставляет событие stream, которое вы можете использовать с созданным вами call. Когда вызов начинает передавать поток, вам нужно убедиться, что удаленный поток, поступающий от вызова, назначен правильным HTML-элементам и окну. Именно здесь вы это сделаете.
   • Анонимная функция принимает объект MediaStream в качестве аргумента, который затем нужно установить в HTML вашего окна, как вы делали раньше. Здесь мы получаем удаленный элемент <audio> и назначаем поток, переданный функции, свойству srcObject.
   • Убедитесь, что атрибут autoplay элемента также установлен в true.
   • Убедитесь, что peerStream окна установлено в переданный функции поток.
   • Наконец, вы хотите отобразить правильное содержимое, поэтому вызовите функцию showConnectedContent(), которую вы создали ранее.

3. Чтобы проверить это, откройте localhost:8000 в двух окнах браузера и нажмите «Вызов» в одном из них. Вы должны увидеть это:

   

   Если вы отправите идентификатор другого участника, вызов будет подключен!

Пока все работает, но нам нужно дать другому браузеру возможность ответить или отклонить вызов. Мы сделаем это дальше.

• Предыдущий
• Следующий