Отказ от ответственности: это руководство предназначено только для демонстрационных целей, и в нем опущены многие сложности, связанные с функцией производственного уровня.
После нескольких часов использования Netflix Party для просмотра шоу вместе с друзьями вас может отвлекать необходимость набирать свои реакции в боковой панели чата в середине какой-то напряженной нервной сцены. Что, если есть функция, позволяющая одновременно общаться в голосовом чате с друзьями? К счастью, приложив немного усилий, вы можете самостоятельно добавить эту функцию в расширение!
Что такое Netflix Party?
Netflix Party - это расширение Chrome, идеально подходящее для удаленного просмотра Netflix с друзьями. Он позволяет синхронизировать ваши любимые шоу Netflix, чтобы вы могли смотреть их одновременно с группой друзей и семьей. Также есть групповой чат для обсуждения в реальном времени; однако Netflix Party на данный момент не поддерживает голосовой чат.
Скачивание исходного кода
Для начала нам нужно скачать исходный код расширения Netflix Party Chrome. Для этого мы сначала устанавливаем расширение под названием Программа просмотра исходного кода расширений Chrome.
Затем перейдите на страницу расширения Chrome для Netflix Party и нажмите на подсвеченный значок CRX в правом верхнем углу окна браузера. Затем загрузите папку с исходным кодом в виде zip-архива и разархивируйте ее.
Мы увидим структуру папок, подобную следующей.
oocalimimngaihdkbihfgmpkcpnmlaoa ├── _locales ├── _metadata ├── img ├── background.js ├── content_script.js ├── icon.png ├── iconx300.png ├── jquery.js ├── manifest.json ├── normalize.css ├── old_content_script.js ├── popup.css ├── popup.html ├── popup.js └── README.md
Использование Agora Web SDK
Чтобы иметь возможность добавить функцию голосового чата без реализации протокола WebRTC и настройки наших собственных серверов STUN и TURN, нам необходимо использовать сторонний SDK. Для этого мы можем использовать Agora’s Web SDK NG, поскольку он предлагает 10 000 бесплатных минут каждый месяц. Во-первых, давайте зарегистрируемся и войдем на страницу консоли. Затем нажмите New Project в Projects и дайте нашему проекту имя. В демонстрационных целях мы можем выбрать опцию APP ID.
После создания проекта мы можем перейти на страницу проектов и записать идентификатор приложения (чтобы отобразить идентификатор приложения, щелкните значок глаза).
Редактирование content_script.js
content_script.js - это файл в папке с распакованным исходным кодом расширения Netflix Party Chrome. Чтобы использовать SDK, нам нужно скопировать содержимое файла AgoraRTC_N-0.1.9.js в content_script.js, как показано ниже.
Затем мы можем начать добавлять код для нашей новой функции голосового чата. Давайте определим новый раздел RTC Voice Chat над разделом Main logic в content_script.js.
Конфигурации
Теперь нам нужно определить некоторые переменные и конфигурации. Скопируйте следующий код под разделом RTC Voice Chat и замените <YOUR_APP_ID> идентификатором приложения, полученным на предыдущем шаге. RTC_CHANNEL_NAME произвольно и может иметь любое имя.
startCall ()
Нам нужно определить функцию для запуска голосового чата с помощью Agora SDK. Сначала мы создаем клиента AgoraRTC и запрашиваем присоединение к каналу. Затем мы создаем звуковую дорожку из звука, захваченного микрофоном, и публикуем его на канале.
subscribeAudioCallback ()
Затем нам нужна функция, чтобы иметь возможность слушать аудио удаленного пользователя, когда он присоединяется к каналу. Для этого мы определяем функцию обратного вызова, которая подписывается на удаленного пользователя с помощью нашего клиента RTC и воспроизводит удаленную звуковую дорожку.
Отказ от подписки на звуковые дорожки
Наконец, нам нужно реализовать unsubscribeAudio() и unsubscribeAudioCallback(), чтобы мы могли покинуть канал, когда покидаем вечеринку Netflix.
Вызов наших функций
После того, как мы определили наши функции, мы можем вызывать их в соответствующих местах. Сначала найдите функцию popupInteraction и добавьте следующие строки кода над initChat() в 2 местах.
startCall(userId);
rtc.client.on("user-published", subscribeAudioCallback);
rtc.client.on("user-left", unsubscribeAudioCallback);
Фрагмент кода должен выглядеть так:
и это:
Наконец, добавьте unsubscribeAudio() под if (request.type === ‘leaveSession’) как таковое.
Поздравляем, мы закончили кодирование! Осталось только заархивировать папку с исходным кодом и раздать ее друзьям. Чтобы установить это «расширенное» расширение в Chrome, зайдите на chrome://extensions в браузере Chrome и включите «Режим разработчика» в правом углу, а затем нажмите «Загрузить распакованный». Выберите папку с исходным кодом в браузере файлов и используйте расширение, как обычно.
Заключительные слова
Я надеюсь, что вы нашли этот урок интересным и полезным. Теперь вы можете общаться с друзьями во время любого шоу Netflix! И последнее, но не менее важное: я хотел бы поблагодарить Netflix Party за создание такого замечательного расширения и Agora.io за предоставление SDK и сетевой инфраструктуры.
Не стесняйтесь оставлять свои комментарии ниже!
