Создание видеочата с помощью IBM Watson, Twilio Video и WebRTC

В Хьюстоне, штат Техас, пациенты ездили со всего штата, чтобы получить лечение в ведущей онкологической клинике. Некоторым пациентам приходилось ездить шесть часов в одну сторону. В прошлом году эта онкологическая клиника полностью исключила необходимость для пациентов ездить в клинику, позволяя им общаться с врачами из комфорта своего собственного дома через видеочат.

IBM Developer Advocate, Джефф Слоер, поделился историей о Техасской клинике на прошлогодней конференции Kranky Geek. Слоер объясняет, как компоненты видеочата работают вместе, охватывая интеграцию IBM Bluemix, Twilio Video и WebRTC.

Джефф демонстрирует приложение в прямом эфире и проходит через все, от установки видеозвонка до инициализации вебсокет-соединения с Node до IBM Watson в следующем видео.

Если вы заинтересованы в том, чтобы увидеть, что можно сделать с помощью IBM Bluemix и Twilio, посетите нас на конференции IBM Interconnect на стенде #158. У нас также есть много технических докладов, показывающих, как разработчики могут легко встраивать средства связи в свои приложения. Расписание можно найти здесь.

Прочитайте полный анализ приложения Джеффа на блоге IBM Bluemix. Джефф объясняет, как WebRTC играет свою роль:

WebRTC по сути абстрагирует все это действительно низкоуровневое и сложное технологии в простые и многоразовые API. Хотя WebRTC имеет свои проблемы в настоящее время (в основном зрелость и принятие), это удивительная технология, которая направлена на то, чтобы сделать видеоконференции легкими.

С помощью WebRTC вы можете позвонить кому-то, используя следующие строки JavaScript

Честно говоря, только это и вы можете настроить видеозвонок! Что, если мы хотим пойти дальше и позволить кому-то позвонить нам? Ну, мы уже сделали это, функция выше endpointConnected вызывается, когда кто-то звонит нам в видеочат. Итак, давайте посмотрим на это:

С помощью вышеприведенного кода мы по сути ждем, пока кто-то позвонит нам; в терминах технологий, это приглашение. Когда приглашение поступает, мы принимаем приглашение в браузере, затем разговор начинается. Опять же, базовый WebRTC.

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

Вау, только 3 строки, чтобы фактически подключить видеозвонок, сумасшедшее! Если бы вы пытались сделать это с помощью инфраструктуры VoIP, вы бы буквально ненавидели свою жизнь и имели бы много седых волос. В вышеуказанной функции есть 2 вызова функций, showLocalVideo и showRemoteVideo. Эти функции по сути прикрепляют видео- и аудиопотоки к элементу DOM в вашей веб-странице.

Прикрепление локального потока (если вы позвонили кому-то, то вы являетесь локальным потоком) довольно простое. См. ниже:

Да, я знаю, что вышеуказанный селектор использует идентификатор и это невероятно плохо, но это иллюстрирует точку, что вам нужно прикрепить видео к определенному элементу в DOM.

Хорошо, так что мы имеем локальное видео, отображаемое, давайте покажем удаленное видео в браузере. Для этого мы можем использовать следующий код:

По сути, вышеуказанный код прикрепляет удаленный аудио- и видеопоток к элементу в DOM.

Итак, все в целом, давайте посчитаем… Это только 26 строк кода, чтобы настроить видеозвонок через ваш браузер. Опять же, если бы вы сделали это с помощью традиционных средств VoIP, вы, вероятно, не имели бы волос в это время, это действительно очень трудно настроить; не говоря уже о поддержке.