Использование Agora.io для совместной работы с документами

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

С помощью платформы Agora мы можем легко пропустить технические детали сети, все они абстрагированы в SDK. Он также предлагает основные функции видеозвонков, такие как отключение микрофона и отключение видео.

В этом уроке мы создадим простое веб-приложение, которое позволит вам работать с документами Google в режиме реального времени без использования мобильного телефона. Мы будем использовать простой в использовании SDK Agora для организации видеозвонка, а также возможность редактировать некоторые документы в Google Docs.

Чтобы испытать приложение нажмите здесь.

Давайте начнем!

Создайте учетную запись разработчика Agora и получите идентификатор приложения

Чтобы собрать и запустить пример приложения, вы должны получить идентификатор приложения:

  1. Зарегистрируйтесь на Agora.io, после регистрации вы будете перенаправлены в Личный кабинет.
  2. Создайте новый проект, нажав кнопку «Добавить новый проект» на вкладке «Проект». Введите название проекта, здесь мы использовали название «Совместные GoogleDocs».
  3. В панели управления проектами вы увидите идентификатор приложения.
  4. Скопируйте этот идентификатор приложения с панели инструментов в текстовый файл. Вы будете использовать это при запуске приложения.

Настройте демонстрационное приложение

  1. Загрузите и добавьте Agora Video SDK для Интернета в папку вашего проекта после распаковки.
  2. Для базового интерфейса приложения вы можете скачать или создать свой собственный шаблон. Мы рассмотрим единственную часть HTML, в которой реализованы функции Agora SDK. Образец доступен здесь для ознакомления.

Интегрируйте Agora Video SDK в демонстрационное приложение

  1. После того, как SDK загружен и разархивирован.
  2. Скопируйте файл AgoraRTCSDK js в корень папки вашего проекта.

Примечание. Имя будет похоже на AgoraRTCSDK-2.2.0.js. Номер версии может быть изменен со временем.

Обновите демонстрационное приложение

  1. Откройте файл index.html в редакторе кода.
  2. В верхней части файла в разделе <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 в приложение

  1. Установите конфиденциальность вашего документа в соответствии с вариантом использования. Для демонстрационного приложения я оставил его общедоступным. Для этого нажмите кнопку «Поделиться» в правом верхнем углу страницы документа.

Нажмите «Получить ссылку для общего доступа» и выберите «Еще».

Выберите «Общедоступный в Интернете» в параметрах «Общий доступ по ссылке», затем «Сохранить».

Вы можете прочитать больше о конфиденциальности 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 и видеоокна обоих участников.

Примеры использования приложений

  1. Классные проекты.Если два члена команды работают над каким-либо классным проектом, это приложение может подойти им лучше всего. Им нужно только открыть свой документ Google, как показано в демонстрационном приложении, и поделиться AppID. После подключения они могут общаться друг с другом и вместе редактировать документ.
  2. Технические собеседования.Многие компании не предпочитают использовать редакторы кода и просят кандидатов писать код на пустом месте. Если интервьюер приглашает кандидата с AppID и ссылкой на это приложение. Они оба увидят Google Doc и аудио и видео друг друга. Благодаря функции включения и отключения видео и аудио, это приложение устраняет необходимость в мобильном телефоне. У меня есть личный опыт работы с несколькими компаниями, где из-за плохих телекоммуникационных сетей я столкнулся с трудностями на собеседованиях.

Спасибо за прочтение статьи. Надеюсь, она поможет вам в разработке действительно замечательных приложений с RTC с использованием сервисов Agora.io.