Использование Agora.io для совместной работы с документами
Работа в коллективной среде стала очень важной, чем когда-либо. Будь то школьный проект или техническое собеседование, нам нужны приложения, которые позволяют общаться с вашими товарищами по команде или хостить во время работы с документами.
С помощью платформы Agora мы можем легко пропустить технические детали сети, все они абстрагированы в SDK. Он также предлагает основные функции видеозвонков, такие как отключение микрофона и отключение видео.
В этом уроке мы создадим простое веб-приложение, которое позволит вам работать с документами Google в режиме реального времени без использования мобильного телефона. Мы будем использовать простой в использовании SDK Agora для организации видеозвонка, а также возможность редактировать некоторые документы в Google Docs.
Чтобы испытать приложение нажмите здесь.
Давайте начнем!
Создайте учетную запись разработчика Agora и получите идентификатор приложения
Чтобы собрать и запустить пример приложения, вы должны получить идентификатор приложения:
- Зарегистрируйтесь на Agora.io, после регистрации вы будете перенаправлены в Личный кабинет.
- Создайте новый проект, нажав кнопку «Добавить новый проект» на вкладке «Проект». Введите название проекта, здесь мы использовали название «Совместные GoogleDocs».
- В панели управления проектами вы увидите идентификатор приложения.
- Скопируйте этот идентификатор приложения с панели инструментов в текстовый файл. Вы будете использовать это при запуске приложения.
Настройте демонстрационное приложение
- Загрузите и добавьте Agora Video SDK для Интернета в папку вашего проекта после распаковки.
- Для базового интерфейса приложения вы можете скачать или создать свой собственный шаблон. Мы рассмотрим единственную часть HTML, в которой реализованы функции Agora SDK. Образец доступен здесь для ознакомления.
Интегрируйте Agora Video SDK в демонстрационное приложение
- После того, как SDK загружен и разархивирован.
- Скопируйте файл
AgoraRTCSDK
js в корень папки вашего проекта.
Примечание. Имя будет похоже на AgoraRTCSDK-2.2.0.js
. Номер версии может быть изменен со временем.
Обновите демонстрационное приложение
- Откройте файл
index.html
в редакторе кода. - В верхней части файла в разделе
<head>
убедитесь, что источник файла JavaScript изменен наAgoraRTCSDK-2.6.1.js
. Убедитесь, что номер версии такой же, как у вас в каталоге вашего проекта.
<script src="build/AgoraRTC-2.6.1.js"></script>
Включить и отключить звук
Чтобы отключить и включить звук, вызовите методы enableAudio()
и disableAudio()
соответственно. Демонстрационное приложение применяет метод muteAudio()
к кнопке пользовательского интерфейса 🔊, чтобы включить звук в сеансе, и метод unmuteAudio()
к кнопке пользовательского интерфейса 🔈, чтобы отключить звук в сеансе. Определение этих функций приведено ниже:
function muteAudio() { var video = document.getElementById("video"); video.disabled = true; video.muted = true; localStream.muteAudio(); } function unmuteAudio() { var video =document.getElementById("video"); video.disabled=true; video.muted=true; localStream.unmuteAudio(); }
Включить и отключить видео
Аналогично для включения и выключения видео вызовите метод enableVideo()
и disableVideo()
соответственно. Демонстрационное приложение применяет методы muteVideo()
и unmuteVideo()
к кнопкам пользовательского интерфейса для отключения и включения звука в сеансе и метод unmuteVideo()
к кнопке пользовательского интерфейса для отключения звука в сеансе. Определение этих функций приведено ниже:
function muteVideo(){ console.log('mute video'); var video =document.getElementById("video"); video.disabled=true; video.muted=true; localStream.muteVideo(); } function unmuteVideo(){ console.log('mute video'); var video =document.getElementById("video"); video.disabled=false; video.muted=false; localStream.unmuteVideo();
Интеграция Google Docs в приложение
- Установите конфиденциальность вашего документа в соответствии с вариантом использования. Для демонстрационного приложения я оставил его общедоступным. Для этого нажмите кнопку «Поделиться» в правом верхнем углу страницы документа.
Нажмите «Получить ссылку для общего доступа» и выберите «Еще».
Выберите «Общедоступный в Интернете» в параметрах «Общий доступ по ссылке», затем «Сохранить».
Вы можете прочитать больше о конфиденциальности Google Doc: Общий доступ к файлам с Google Диска
2. Чтобы встроить документ в свое веб-приложение, перейдите в меню вашего документа, нажмите «Файл» и выберите «Опубликовать в Интернете».
3. Выберите вкладку «Встроить» и нажмите кнопку «Опубликовать».
4. Нажмите «ОК», чтобы подтвердить публикацию.
5. Скопируйте код для встраивания.
6. В файле index.html
вашего проекта создайте еще один раздел и вставьте этот код. Вы также можете редактировать таблицу стилей для этого раздела вашей HTML-страницы.
<div class="col-lg-7" style="margin-left:80px;"> <iframe src="https://docs.google.com/document/d/1tqwxPPCM9nu9xcMCLLB6WR0yp8NNwYJyArfo0bDKQZ8/edit" height="600" width="800"></iframe> </div>
7. Ваш документ Google теперь является частью вашего приложения. 😃
Запуск приложения
После разработки полного проекта со структурированным каталогом вы можете разместить это приложение в Интернете, используя любые службы хостинга, такие как Heroku. Вы можете узнать, как развернуть приложение flask на Heroku здесь (поскольку в нашем демонстрационном приложении flask используется в качестве бэкенда).
После размещения вы можете открыть ссылку и ввести идентификатор приложения, а затем нажать кнопку «Присоединиться».
Вы увидите документы Google и видеоокна обоих участников.
Примеры использования приложений
- Классные проекты.Если два члена команды работают над каким-либо классным проектом, это приложение может подойти им лучше всего. Им нужно только открыть свой документ Google, как показано в демонстрационном приложении, и поделиться AppID. После подключения они могут общаться друг с другом и вместе редактировать документ.
- Технические собеседования.Многие компании не предпочитают использовать редакторы кода и просят кандидатов писать код на пустом месте. Если интервьюер приглашает кандидата с AppID и ссылкой на это приложение. Они оба увидят Google Doc и аудио и видео друг друга. Благодаря функции включения и отключения видео и аудио, это приложение устраняет необходимость в мобильном телефоне. У меня есть личный опыт работы с несколькими компаниями, где из-за плохих телекоммуникационных сетей я столкнулся с трудностями на собеседованиях.
Спасибо за прочтение статьи. Надеюсь, она поможет вам в разработке действительно замечательных приложений с RTC с использованием сервисов Agora.io.