Анатомия плагина WP-WebRTC2

Содержание статьи:
1.Состав плагина.
2.Использование модулей сторонних разработчиков.
3.Инструментарий разработчика.
4.Документация для разработки.
5.Цель разработки плагина.
6.Почему плагин бесплатный?
7.Отдельные моменты в разработке плагина.
8.Заключение.

1.Состав плагина.

Содержимое папки плагина после установки на сайт:

папка chart – в ней находится модуль создания диаграмм потоковых данных:
– smoothie.js от сторонних разработчиков (Smoothie Charts)
папка css – в ней находятся файлы CSS:
– dump.css определяет стиль внешнего файла-отчета, созданного нажатием кнопки Report плагина.
– webrtc2-dark.css создает темный стиль графического интерфейса плагина.
– webrtc2-light.css создает светлый стиль графического интерфейса плагина.
– webrtc2-backend.css – определяет стиль раздела “Users for Video chat” profile зарегистрированного пользователя сайта.
папка doc – в ней находится документация пользователя на русском и английском языках плагина.
папка images – в ней находятся картинки для графического интерфейса плагина.
папка includes – в ней находятся 6 файлов PHP:
– webrtc2-sign.php – выполняет функции сигнального сервера по технологии WebRTC.
– webrtc2-sse.php – определяет каждые 2-3сек. статус пользователей (on/off) по технологии SSE.
– webrtc2-profile-tbls.php – создается список контактов в профайле пользователя зарегистрированных пользователей сайта, с которыми данный пользователь хочет иметь видео связь (адресная книга).
– webrtc2-template.php – используется клиентским приложением (download: WebRTC2_desktop). Инструкция по использованию приложения WebRTC2_desktop: [ru]
Это недавно разработанное приложение видео-связи на java для десктопов на windows.
– webrtc2-create-tables.php – создает 3 пользовательские таблицы (webrtc2_countries, webrtc2_call_stat, webrtc2_stun_servers) в БД сайта.
– webrtc2-ip-info.php – берет на вход IP пользователя и возвращает информацию об этом IP.
папка js – в ней находятся 8 файлов JS:
– webrtc2-variables.js – перечень глобальный переменных для удобства программиста – собранные в один файл.
– webrtc2-init.js – инициирование объектов WebRTC с их параметрами из настроек плагина.
– webrtc2-interface.js – формирует графический интерфейс и управление им.
– webrtc2-service.js – дополнительные сервисные функции плагина.
– webrtc2-sign.js – вызов функций сигнального сервера на стороне клиента.
– webrtc2-modify-sdp.js – позволяет на лету изменять пропускную способность MediaBitrate в случае плохой видео-связи.
– webrtc2-profile.js – управляет списком контактов в профайле пользователя.
– webrtc2-meter-wrklt.js / webrtc2-meter-prcsr.js – обработка аудио потока (новое требование Google с 2020 года вместо устаревшего JavaScriptNode). Вызывается из модуля webrtc2-service.js
папка parser – в ней находится модуль определения браузера пользователя:
– detect.js от сторонних разработчиков (Darcy Clarke, Tobie Langel).
папка sound – в ней находятся 3 звуковых файла mp3:
– receive_call.mp3 – оповещение о вызове пользователя на видео-связь.
– receive_file – оповещение пользователя о приеме файла.
– receive_msg – оповещение пользователя о приеме сообщения.
файл class-webrtc2-core.php – формирует backend интерфейс плагина в административной панели управления сайтом.
файл class-webrtc2-shortcode.php – формирует frontend интерфейс плагина в браузере пользователя.
файл class-webrtc2-stun-client.php – проверяет работоспособность Stun серверов по списку.
файл class-webrtc2-tbl-stat.php – создает таблицу статистики видеозвонков в админке сайта.
файл class-webrtc2-tbl-srv.php – создает таблицу Stun серверов в админке сайта.
файл readme.txt – описание плагина по стандарту WordPress.
файл uninstall.php – удаление плагина по стандарту WordPress.
файл wp-webrtc2.php – основной файл плагина (регистрация, подключения CSS, JS).

2.Использование модулей сторонних разработчиков.

1. Модуль detect.js формирует информацию о браузере пользователя, которая передается плагином в шапку файла отчета, сформированного после нажатия кнопки Report плагина:

Использование модуля detect.js в плагине (модуль: webrtc2-service.js):

/**
 * Save to file.html selected content of win_messages.
 */
function webrtc2_msg_report() {
  var html      = document.createElement("html");
  var link      = document.createElement("link");
  var head      = document.createElement("head");
  var body      = document.createElement("body");
  var foot      = document.createElement("foot");
  var copyright = document.createElement("label");
  var img_flag  = document.createElement("img");

  var title    = document.createElement("h1");

  var info      = document.createElement("div");
  var userName  = document.createElement("label");
  var browser   = document.createElement("label");
  var device    = document.createElement("label");
  var os        = document.createElement("label");
  var date_time = document.createElement("label");

  var content  = document.createElement("div");

  var a        = document.createElement("a");
  var bl;

  //browser.family      Имя браузера
  //browser.name        Имя браузера и его версия
  //browser.version     Полная версия браузер
  //browser.major       Основной номер версии браузера
  //browser.minor       Дополнительный номер версии браузера
  //browser.patch       Номер патча браузера
  //device.family       Имя устройства
  //device.name         Имя устройства и версия
  //device.version      Полная версия устройства
  //device.major        Основной номер версии устройства
  //device.major        Дополнительный номер версии устройства
  //device.patch        Номер патча устройства
  //device.type         Тип устройства (например, "Desktop" или "Mobile")
  //device.manufacturer Производитель устройства
  //os.family           Название операционной системы
  //os.name             Полне имя операционной системы
  //os.version          Полная версия операционной системы
  //os.major            Основной номер версии операционной системы
  //os.minor            Дополнительный номер версии операционной системы
  //os.patch            Номер патча операционной системы

  var agentInfo = detect.parse(navigator.userAgent);

  userName.innerHTML  = "User name: " + webrtc2_hostId;
  userName.className  = "info";
  browser.innerHTML   = "Browser: " + agentInfo.browser.family + " version " + agentInfo.browser.major + "." + agentInfo.browser.minor + "." +  agentInfo.browser.patch;
  browser.className   = "info";
  device.innerHTML    = "Device: " + agentInfo.device.type;
  device.className    = "info";
  os.innerHTML        = "OS: " + agentInfo.os.name;
  os.className        = "info";
  date_time.innerHTML = "Date: " + new Date().toLocaleString();
  date_time.className = "info";

  if ("visible" == document.getElementById("fld_dump").style.visibility) {
    title.innerHTML = "WP-WebRTC2 protocol of dump";
  }
  if ("visible" == document.getElementById("fld_chat").style.visibility) {
    title.innerHTML = "WP-WebRTC2 protocol of chat";
  }

  img_flag.src = webrtc2_url + "doc/img/BY.gif";

  copyright.innerHTML = "Belarus, Minsk © 2019. Developer: Oleg Klenitsky";

  info.appendChild(userName);
  info.appendChild(browser);
  info.appendChild(device);
  info.appendChild(os);
  info.appendChild(date_time);

  link.rel = "stylesheet";
  link.href = webrtc2_url + "css/dump.css";
  link.type = "text/css";
  head.appendChild(link);

  html.appendChild(head);
  html.appendChild(title);
  body.appendChild(info);

  if ("visible" == document.getElementById("fld_dump").style.visibility) {
    var fld_dump = document.createElement("div");
    fld_dump.innerHTML = document.getElementById("fld_dump").innerHTML;
    fld_dump.id = "fld_dump_copy";
    fld_dump.style = "margin-top: 5px;";
    body.appendChild(fld_dump);
  }
  if ("visible" == document.getElementById("fld_chat").style.visibility) {
    var fld_chat = document.createElement("div");
    fld_chat.innerHTML = document.getElementById("fld_chat").innerHTML;
    fld_chat.id = "fld_chat_copy";
    fld_chat.style = "margin-top: 5px;";
    body.appendChild(fld_chat);
  }
  html.appendChild(body);
  foot.appendChild(img_flag);
  foot.appendChild(copyright);
  html.appendChild(foot);

  html = [html.outerHTML];

  bl = new Blob(html, {type: "text/html"});

  a.href = URL.createObjectURL(bl);
  if ("visible" == document.getElementById("fld_dump").style.visibility) {
    a.download = "dump.html";
  }
  if ("visible" == document.getElementById("fld_chat").style.visibility) {
    a.download = "chat.html";
  }

  html = null;

  a.hidden = true;
  document.body.appendChild(a);
  a.click();
}

2. Модуль smoothie.js создания диаграмм потоковых данных формирует графики статистики WebRTC:
– кнопка Graph1: report.type == “inbound-rtp” && report.mediaType == “video”
– кнопка Graph2 report.type == “outbound-rtp” && report.mediaType == “video”
– кнопка Graph3: report.type == “transport”
– кнопка Graph4: report.type == “remote-inbound-rtp” && report.kind == “video”
Использование модуля smoothie.js в плагине (модуль: webrtc2-service.js) на примере одного графика:

/**
 * Display graph1.
 */
function webrtc2_graph1() {
  document.getElementById("graph_local").style.visibility = "visible";
  document.getElementById("graph_remote").style.visibility = "visible";
  // Нажата
  document.getElementById("btn_graph1").style.boxShadow =
  "inset -2px -2px 3px rgba(200, 200, 200, .6),inset 2px 2px 3px rgba(0, 0, 0, .6)";
  // Отжата
    document.getElementById("btn_graph3").style.boxShadow =
  "inset 2px 2px 3px rgba(255, 255, 255, .6),inset -2px -2px 3px rgba(0, 0, 0, .6)";
  document.getElementById("btn_graph2").style.boxShadow =
  "inset 2px 2px 3px rgba(255, 255, 255, .6),inset -2px -2px 3px rgba(0, 0, 0, .6)";
  document.getElementById("btn_graph4").style.boxShadow =
  "inset 2px 2px 3px rgba(255, 255, 255, .6),inset -2px -2px 3px rgba(0, 0, 0, .6)";

  graph = "graph1";

  var smoothie = new SmoothieChart({grid:{sharpLines:true},tooltip:true,timestampFormatter:SmoothieChart.timeFormatter});

  // Legends
  document.getElementById("local_legend1").innerHTML  = "KbytesReceived/sec";
  document.getElementById("local_legend2").innerHTML  = "PacketsReceived/sec";
  // Data
  var line1 = new TimeSeries();
  var line2 = new TimeSeries();

  // Add to SmoothieChart
  smoothie.addTimeSeries(line1,
    { strokeStyle:'rgb(0, 255, 0)', fillStyle:'rgba(0, 255, 0, 0.4)', lineWidth:2 });
  smoothie.addTimeSeries(line2,
    { strokeStyle:'rgb(255, 0, 255)', fillStyle:'rgba(255, 0, 255, 0.3)', lineWidth:2 });
  smoothie.streamTo(document.getElementById("canvas_local"), 500);

  // Add value to each line every second
  var graph1_interval_local = setInterval(function() {
    var pliCount = (!!inbound_rtp_video.pliCount) ? inbound_rtp_video.pliCount : "0";
    var packetsLost = (!!inbound_rtp_video.packetsLost) ? inbound_rtp_video.packetsLost : "0";
    document.getElementById("graph_title_local").innerHTML =
    "<b>Local: </b> [inbound-rtp]:video packetsLost: " + packetsLost + "; pliCount: " + pliCount + ";";
    line1.append(inbound_rtp_video.timestamp, inbound_rtp_video.bytesReceivedPerSec);
    line2.append(inbound_rtp_video.timestamp, inbound_rtp_video.packetsReceivedPerSec);
    if (graph !== "graph1") {
      document.getElementById("graph_title_local").innerHTML = "<b>Local: Wait...</b>";
      clearInterval(graph1_interval_local);
    }
  }, 1000);
  document.getElementById("graph_title_remote").innerHTML = "<b>Remote:</b> Wait...";
  webrtc2_graph1_remote();
}

3.Инструментарий разработчика.

В процессе разработки плагина постоянно использовалась отладка WebRTC, встроенная в браузеры:
1. Для Chrome: chrome://webrtc-internals/
2. Для FireFox: about:webrtc
3. Для Opera: opera://webrtc-internals
4. Для Edge: edge://webrtc-internals/
5. Для Yandex: browser://webrtc-internals/

4.Документация для разработки.

Существует много интересной информации ознакомительного характера о технологии WebRTC. Ее можно без особого труда найти на просторах интернета. Поэтому я лишь приведу перечень документации, которая была полезна в конкретных случаях реализации функционала в плагине:
1. WebRTC 1.0
2. Getting Started WebRTC
3. Anatomy of a WebRTC SDP.
4. WebRTC-stats.
На мой личный взгляд, будущее WebRTC 1.0 – туманно, неоднозначно. С одной стороны – технология WebRTC – великолепна. Даже со своими текущими багами. Но ведь это проблемы роста. Обычное дело. Но вот что смущает: зреющий новый WebRTC 2.0 может стать могильщиком, а не продолжателем WebRTC 1.0. Звериный оскал капитализма не предполагает преемственности поколений, технологий. Это скорее похоже на тараканьи бега по вертикали. Кто первый, любой ценой. И если продолжать без аллегорий, то может однажды придут веселые дяди из Microsoft (Edge), Google, Hookflash и скажут: все что вы все сделали на основе WebRTC 1.0 – выбросить, теперь все будете работать по WebRTC 2.0.
Откуда такое настроение? Читайте сами, думайте сами:
1. OBJECT-RTC – IS IT WRTC 2.0?
2. What Developers Should Know About ORTC

5.Цель разработки плагина.

Когда-то, работая в одном учреждении, мы использовали Skype для организации видео-мостов между странами на высоком государственном уровне. К сожалению были обрывы связи, замедление трансляции. Да и смущал тот факт, что некоторые реплики, как впрочем и вся трансляция писалась на английских серверах без нашего на то решения. Потому, что Skype.
С тех пор прошло много времени. Перестройка, дружба с Западным “цивилизованным миром” в засос, развал СССР – в прошлом. Растет внучка 12 лет. И захотелось делать с ней уроки не по телефону, а по видео-связи. Вот так и появился WP-WebRTC2.

6.Почему плагин бесплатный?

Мне нравится философия WordPress: бесплатность и доступность для ВСЕХ к современным технологиям. Это не реклама. Это и мой жизненный принцип. Тут, что называется: нашли друг друга два одиночества. 🙂

7.Отдельные моменты в разработке плагина.

На мой взгляд интересным моментом в этом плагине видео-связи является вопрос:
1. как реализован принцип сигнализации в плагине?
Весь остальной функционал имеет пусть и нужное, но все-таки второстепенное значение. Итак:
Ниже представлен код основной функции сигнализации на стороне клиента (webrtc2-sign.js).
Сама по себе эта функция webrtc2_chat_init() создает соединение путем отправки по мере готовности определенной информации (sdp, ice-candidates) и приема соответствующей информации (sdp, ice-candidates) в ожидающем цикле setInterval().

/**
 * Peer to Peer video-chat.
 */
function webrtc2_chat_init() {
	let webrtc2_guestId = sessionStorage.getItem("webrtc2_guestId");
	let timer_receive_answer;
	let timer_receive_ice;

	if ( "true" == sessionStorage.getItem("webrtc2_initiator") ) {
		// Init data channel for receive/send of messages and files.
		webrtc2_dataChannel = webrtc2_pc.createDataChannel("dataChannel");
		webrtc2_dataChannel.binaryType = "arraybuffer";
		webrtc2_datachannel_msg();

		// Init data channel for statistics data of guestId.
		webrtc2_statChannel = webrtc2_pc.createDataChannel("statChannel");
		webrtc2_statChannel.binaryType = "arraybuffer";
		webrtc2_datachannel_stat();

		webrtc2_pc.createOffer(webrtc2_offerOptions)
		// Modifying the SDP to check ice-ufrag, ice-pwd.
		.then(offer => {
			offer.sdp = webrtc2_chk_ufrag_pwd(webrtc2_hostId, "Offer", offer.sdp);
			return offer;
		})
		.then(offer => {
			webrtc2_pc.setLocalDescription(offer);
			return offer;
		})
		// modify the SDP after calling setLocalDescription.
		.then(offer => {
			offer.sdp = webrtc2_setMediaBitrates(webrtc2_hostId, "Offer", offer.sdp);
			return offer;
		})
		.then(offer => {
			webrtc2_log_sdp(webrtc2_hostId, " -> Send [Offer] to " + webrtc2_guestId + ":", offer.sdp);
			webrtc2_send_sdp(JSON.stringify(offer), "offer");
		})
		// Receive answer sdp of webrtc2_guestId from server.
		.then(timer_receive_answer = setInterval(() => {
			webrtc2_receive_sdp("answer").then(answer => {
				if (answer) {
					webrtc2_log_sdp(webrtc2_hostId, " -> Receive [Answer] from " + webrtc2_guestId + ":", answer.sdp);
					webrtc2_pc.setRemoteDescription(answer);
					clearInterval(timer_receive_answer);
				}
			})
		}, 10000))
		// Receive ice-candidates of webrtc2_guestId from server.
		.then(timer_receive_ice = setInterval(() => {
			webrtc2_receive_ice().then(iceCandidates => {
				if (iceCandidates) {
					webrtc2_ice_remote(iceCandidates);
					for (let iceCandidate of iceCandidates) {
						webrtc2_pc.addIceCandidate(iceCandidate).catch(err => console.log(err));
					}
					clearInterval(timer_receive_ice);
				}
			})
		}, 10000));
	}else{
		// Receive offer sdp of webrtc2_guestId from server.
		let timer_receive_offer = setInterval(function () {
			webrtc2_receive_sdp("offer").then(offer => {
				if (offer) {
					webrtc2_log_sdp(webrtc2_hostId, " -> Receive [Offer] from " + webrtc2_guestId + " :", offer.sdp);
					webrtc2_pc.setRemoteDescription(offer).then(() => webrtc2_pc.createAnswer())
					.then((answer) => {
						// Modifying the SDP to check ice-ufrag, ice-pwd.
						answer.sdp = webrtc2_chk_ufrag_pwd(webrtc2_hostId, "Answer", answer.sdp);
						return answer;
					})
					.then(answer => {
						webrtc2_pc.setLocalDescription(answer);
						return answer;
					})
					// modify the SDP after calling setLocalDescription.
					.then(answer => {
						answer.sdp = webrtc2_setMediaBitrates(webrtc2_hostId, "Answer", answer.sdp);
						return answer;
					})
					.then(answer => {
						webrtc2_log_sdp(webrtc2_hostId, " -> Send [Answer] to " + webrtc2_guestId + ":", answer.sdp);
						webrtc2_send_sdp(JSON.stringify(answer), "answer");
					})
					// Receive ice-candidates of webrtc2_guestId from server.
					.then(timer_receive_ice = setInterval(() => {
						webrtc2_receive_ice().then(iceCandidates => {
							if (iceCandidates) {
								webrtc2_ice_remote(iceCandidates);
								for (let iceCandidate of iceCandidates) {
									webrtc2_pc.addIceCandidate(iceCandidate).catch(err => console.log(err));
								}
								clearInterval(timer_receive_ice);
							}
						})
					}, 10000));
					clearInterval(timer_receive_offer);
				}
			})
		}, 10000);
	}
}

8.Заключение.

Предварительные испытания показали, что плагин WP-WebRTC2 работает удовлетворительно. Практическое использование покажет истинное состояние дел в работоспособности плагина.

Leave a Reply