ти сам. Це було реалізовано засобами Audio API. Воно дозволяє відтворювати звукові файли як отримані у вигляді посилання на файл в Інтернеті, так і у вигляді файлу формату MP3. Для реалізації можливості установки аудіозаписи як мелодія виклику був задіяний парсинг для того, щоб виявити на сторінці Вконтакте елементи аудіозаписів. Пошук здійснюється по селектору audio . При знаходженні елементів аудіо в них додаються кнопки установки мелодії виклику.
Малюнок 17 - Пошук аудіо-елементів
При натисканні на кнопку посилання на аудіо зберігається як мелодія виклику. У розширення була додана сторінка налаштувань, на якій користувач може вибрати в якості мелодії виклику аудіо зі списку.
Після завершення написання всього програмного коду і тестування був зверстаний користувальницький інтерфейс всіх елементів програми на HTML. Огляд елементів завершеного додатки показаний на скріншотах (малюнки 18, 19, 20 і 21).
Малюнок 18 - Кнопка відеодзвінка
Малюнок 19 - Вхідний дзвінок
Малюнок 20 - Iframe з додатком. Конференція з трьома учасниками
Малюнок 21 - Установка аудіо в Як сигнал виклику
Дана практична частина цього дипломного проекту була спробою перевірити, чи можливо вже зараз, навіть незважаючи на недостатню стандартізірованностьWebRTC, реалізувати повноцінне переносиме WebRTC-додаток, яке могло б бути вбудовано на Інтернет-ресурс з боку клієнта при допомоги браузерного розширення. Поставлена ??задача була успішно виконана. Так як додаток передбачалося запускати за допомогою розширення для браузера GoogleChrome, не було необхідності в реалізації кросбраузерності підтримки, що істотно спростило розробку.
2.2 WebRTC-сервіс
Другий практичною реалізацією був web-сервіс, використання якого можливо в різних браузерах, що підтримують WebRTC. Вихідний код знаходиться у додатку Г даної дипломної роботи. Сервіс, так само як і перша практична реалізація даної дипломної роботи, грунтується на бібліотеці RTCPeerBroadcasting. Для того, щоб реалізувати можливість використання в різних браузерах, необхідно було переписати функції, взаємодіють з функціями Web API WebRTC і додати в них необхідні префікси. Це стосується об'єкта window.URL , функцій getUserMedia , PeerConnection , SessionDescription . Щоб зробити вибір потрібного префікса автоматичним, використовується конструкція з умовним АБО, перебирає методи з різними префіксами. [2]
Малюнок 22 - Перебір префіксів
Те ж саме зроблено для функцій PeerConnection і SessionDescription.
Процес прикріплення медіа потоку до HTML-елементу video також розрізняється в браузерах на движку Webkit і Gecko. Так, в Mozilla потік прикріплюється через властивість mozSrcObject , а в Chome - через властивість src . [9] Щоб зробити процес прикріплення потоку універсальним, в початок бібліотеки додана перевірка браузера, від якої залежить процес додавання потоку.
Малюнок 23 - Перевірка User-Agent
Малюнок 24 - Прикріплення потоку до відео-елементу
Деякі складнощі при реалізації кросбраузерності викликало недеклароване відмінність в реалізації методу onaddstream об'єкта RTCPeerConnection в браузерах на движках Webkit і Gecko. У браузері GoogleChrome (Webkit) з об'єкта stream можна отримати набір полів, у тому числі id і label , з...
