Створення свого WebRTC додатки на платформі 1С-Бітрікс

  
 
На просторах Хабра все частіше і частіше публікуються статті про технологію WebRTC, вже написано кілька хороших статей про те, як почати працювати з технологією WebRTC (наприклад: раз , два ).
 
У цій статті я хочу розповісти, як використовуючи технології WebRTC і Бітрікс, створити своє мультимедійне веб-додаток :)
 
 
 

Трохи про технології

Технологія WebRTC з'явилася порівняно недавно, перший чернетку був представлений в листопаді 2012 року і буквально за рік технологія досягла хорошого рівня і її вже можна і потрібно використовувати.
 
Технологія пропонує розробникам можливість створити мультимедійні веб-додатки (відео / аудіо дзвінки) без необхідності завантажувати і встановлювати додаткові плагіни.
Її мета полягає в побудові єдиної платформи для комунікацій в реальному часі, яка працюватиме в будь-якому браузері і на будь-якій операційній системі.
 
Зовсім недавно список підтримуваних додатків був дуже малий і складався всього з одного браузера: Google Chrome.
За останній рік цей список значно розширився і технологію почали підтримувати майже всі сучасні браузери :)
 
У даний момент це: Mozilla Firefox 27 + і засновані на WebKit браузери — Google Chrome 29 +, Opera 18 +, Яндекс.Браузер 13 +.
Є надія, що в цей список скоро повинен увійти Safari, тому що компанія увійшла до робочої групи WebRTC в лютому 2014 .
 
На жаль, компанія Microsoft не планує впроваджувати WebRTC і створюють свою технологію CU-RTC-Web , але можливо вони зроблять свою технологію більш-менш сумісної .
Для користувачів Internet Explorer ми пропонуємо випускати десктоп додаток на основі Chromium і пропонувати її користувачам браузерів без підтримки цієї технології.
 
Про те як ми використовуємо технології WebRTC і про роботу десктопного додатка, я розповідав на Зимової партнерської конференції 1С-Бітрікс , ви можете подивитися мою доповідь онлайн або завантажити відео :)
 
 
 

Як працює WebRTC?

Насправді все працює дуже просто , буквально три пункти :)
 
1. У користувача запитується дозвіл на використання відео-камери і мікрофону;
2. Єднаймося з іншим користувачем (який теж дав дозвіл на використання обладнання), обмінюючись з ним даними про кодеках і ip адресах для прямого підключення;
3. Показуємо відео і відтворюємо звук;
 
 
 
Все так просто? Так… майже :)
 
Технологія WebRTC не надає інструментів для початкового зв'язування користувачів, саме цю частину ви і повинні зробити самі, ця частина називається «Сигналінг» або «Сигнальний протокол».
 
 
 

Що таке «Сигнальний протокол»?

Під Сигнальним протоколом або Сигналінг (Signaling) мається на увазі організація комунікацій між користувачами, для обміну командами і даними.
 
У найпростішій схемі, вам потрібно організувати обробку наступних команд:
1. invite — Запрошення на дзвінок (вам дзвонить користувач такий то, відповісти чи ні);
2. answer — Відповідь на дзвінок;
3. decline — Скасування дзвінка;
4. busy — Користувач зайнятий іншим дзвінком;
5. ready — Користувач готовий до обміну даними;
6. signaling — Обмін даними;
 
Вище зазначені тільки базові команди, їх насправді може бути більше:
 - Join — підключення до існуючого розмови;
 - Wait — користувач онлайн, чекайте відповіді;
 - WaitTimeout — інший користувач не дочекався відповіді;
 - ErrorAccess — у користувача технічні проблеми;
 - Reconnect — користувач не зміг встановити з'єднання, потрібно перепідключення;
 
Що буде відбуватися при отриманні команди, які будуть показані повідомлення і якою буде інтерфейс, вирішуєте ви, під ваші бізнес-завдання.
 
 
 

Я все зрозумів, хочу створити додаток!

Для роботи з WebRTC необхідно розуміти, що поки це не затверджений стандарт , API в різних браузерах трохи різниться .
Так само варто подумати про те, як організувати realtime-транспорт для сигналінгу, подумати як обходити NAT і прочитати інструкції як же це все змусити працювати .
 
Після прочитання рядків вище, ви швидше за все вже перехотіли робити WebRTC додаток і практично закрили сторінку :)
 
 
 
 Але відставити паніку! У нас в продукті вже все є, дивіться самі:
 
1. Сигнальний протокол в режимі реального часу ви зможете організувати на основі нашого модуля «Push & Pull» і модуля для сервера nginx — nginx-push-stream-module , як з ними працювати докладно написано в моєму блозі на Бітрікс (Якщо цей варіант вас не влаштовує, ви можете легко замінити на інший продукт, наприклад на Socket.io );
 
2. Для обходу NATа ми створили хмарний сервіс, який доступний всім користувачам продукту за адресою turn.calls.bitrix24.com ;
 
3. У ядро ​​продукту, ми додали спеціальну бібліотеку core_webrtc яка приховає від вас різночитання в АПИ і більшу частину логіки роботи WebRTC (бібліотека доступна в «Головному модулі» починаючи з версії 14.0.15);
 
і найприємніше :)
 
4. Ми розробили спеціальний компонент, в якому реалізована вся логіка для того, що б ви могли швидко вникнути і почати писати свій додаток (компонент доступний в модулі «Push & Pull» починаючи з версії 14.1.5);
 
 
 

Запускаємо демо-додаток :)

У модулі «Push & Pull» (/ bitrix / modules / pull /) починаючи з версії 14.1.5 з'явилася папка demo в ній в даний момент два приклади:
1. Приклад роботи з модулем «Push & Pull»;
2. Приклад роботи з WebRTC;
 
Про другий якраз і хотів поговорити :)
 
 
 
Для початку роботи, виконайте такі дії:
1. Скопіюйте компонент з папки / bitrix / modules / pull / demo / webrtc / compontents /, наприклад сюди / bitrix / compontens / yourcompanyprefix /
2. Скопіюйте сторінку / bitrix / modules / pull / demo / webrtc / html /, наприклад в корінь вашого сайту;
3. Налаштуйте модуль Push & Pull на роботу з Сервером черг;
4. Зареєструйте двох користувачів;
 
Все, тепер можна зайди на цю сторінку під двома різними користувачами і почати один одному дзвонити :)
 
 
 

Краща документація, це вихідний код

Я коротко опишу призначення кожної функції, які використані в demo_webrtc.js (розташований в компоненті), все інше, сподіваюся, буде зрозуміло з вихідного коду.
 
Що б краще розуміти компонент і як він працює, прочитайте ці дві статті, це допоможе вам легше орієнтуватися:
 Створення своєї JS бібліотеки: JS, CSS, Фрази, Залежності.
 Робота з модулем «Push & Pull»
 
 WebRTC: Ініціалізація YourCompanyPrefix.webrtc ()
Це клас по роботі з WebRTC в ньому описуються значення за замовчуванням і робота з Сигналінг.
На замітку: BX.garbage відпрацює при догляді зі сторінці або перезавантаженні, тим самим ви зможете обірвати дзвінок.
 
 BX.inheritWebrtc (YourCompanyPrefix.webrtc);
Цю функцію необхідно виконати відразу після ініціалізації, вона пронаследуюет всі базові класи нашої базової бібліотеки BX.webrtc
 
 WebRTC: UserMedia API YourCompanyPrefix.webrtc.startGetUserMedia
Функція для запиту доступу до відео-камері і мікрофону
 
 YourCompanyPrefix.webrtc.onUserMediaSuccess
Ця функція викликається коли спрацьовує подія «Успішного отримання доступу до обладнання»
 
 YourCompanyPrefix.webrtc.onUserMediaError
Ця функція викликається коли спрацьовує подія «Помилки при отриманні доступу до обладнання»
 
 WebRTC: PeerConnection API YourCompanyPrefix.webrtc.setLocalAndSend
Функція встановлює мета-інформацію про поточного користувача і передає її іншому користувачеві
 YourCompanyPrefix.webrtc.onRemoteStreamAdded
Ця функція викликається коли спрацьовує подія «Отримано віддалений медіа-потік», для відображення його в тезі video
 
 YourCompanyPrefix.webrtc.onRemoteStreamRemoved
Ця функція викликається коли спрацьовує подія «Відключений віддалений медіа-потік», для виключення його в тезі video
 
 YourCompanyPrefix.webrtc.onIceCandidate
Ця функція викликається коли спрацьовує подія «Про необхідність передачі мета-інформації про кодеки, айпі та іншої інформації» іншому користувачу
 
 YourCompanyPrefix.webrtc.peerConnectionError
Функція викликається при виникненні помилки створення з'єднання між користувачам
 
 YourCompanyPrefix.webrtc.peerConnectionReconnect
Функція відправляє запит на спробу перепідключити користувача до існуючого сеансу, наприклад через виниклу помилки
 
 YourCompanyPrefix.webrtc.deleteEvents
Функція обнуляє всі змінені змінні, для нового дзвінка.
 
 WebRTC: Signaling API YourCompanyPrefix.webrtc.callInvite
Функція для відправки запрошення іншого користувача в відео-дзвінок
 
 YourCompanyPrefix.webrtc.callAnswer
Функція для відправлення підтвердження на установку відео-дзвінка
 
 YourCompanyPrefix.webrtc.callDecline
Функція для відправки скасування або завершення відео-дзвінка
 
 YourCompanyPrefix.webrtc.callCommand
Функція для відправки інших команд іншому користувачеві (користувач готовий до встановлення з'єднання, користувач зайнятий і тд)
 
 WebRTC: Базові команди (з бібліотеки core_webrtc.js) YourCompanyPrefix.webrtc.ready
Перевірка чи доступний WebRTC в поточному браузері
 
 YourCompanyPrefix.webrtc.signalingReady
Перевірка чи доступний Сигналінг на поточній сторінці
 
 YourCompanyPrefix.webrtc.toggleAudio
Включення / вимикання мікрофона
 
 YourCompanyPrefix.webrtc.toggleVideo
Включення / вимикання камери
 YourCompanyPrefix.webrtc.onIceConnectionStateChange
Функція викликається коли спрацьовує подія «Установка з'єднання»
 
 YourCompanyPrefix.webrtc.onSignalingStateChange
Функція викликається коли спрацьовує подія «Зміна стану зв'язку»
 
 YourCompanyPrefix.webrtc.attachMediaStream
Функція для установки відео / аудіо потоку в тег video
 
 YourCompanyPrefix.webrtc.log
Функція логування
 
 

Сподіваюся дана стаття буде вам корисна.
Якщо у вас виникли питання, пишіть в коментарях :)
  
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.