Категории

    Новости

    Тонгкат Али
    http://silverfox.in.ua/product-tag/tongkat-ali/ (англ. Long Jack, Tongkat Ali) – это средство, в основном используемое спортсменами для повышения уровня тестостерона и серьезных силовых нагрузках. Но

    Иван Айвазовский
      этой (Ованес Айвазян, Иван Гайвазовский, Aivazovsky, Ivan. 1817-1900), –   русский живописец, мастер морского пейзажа (маринист). Популярнейшие картины Айвазовского - “Радуга” (1873 г. ), “Чёрное

Полезные материалы

Интеграция видеозвонков в чат с WebRTC и PubNub

  1. Что такое WebRTC? WebRTC - это бесплатный проект с открытым исходным кодом, который позволяет веб-браузерам...
  2. Не создавайте сервер сигнализации WebRTC - используйте PubNub
  3. Пакет, поддерживаемый сообществом для звонков через WebRTC
  4. Пример видео чата с открытым исходным кодом WebRTC
  5. Руководство по приложению WebRTC
  6. app.js
  7. style.css
  8. Часто задаваемые вопросы (FAQ) о пакете WebRTC
  9. Публикует ли PubNub аудио или видео данные?
  10. Могу ли я сделать групповой звонок с более чем 2 участниками?
  11. Я нашел ошибку в плагине. Где я могу сообщить об этом?

Что такое WebRTC?

WebRTC - это бесплатный проект с открытым исходным кодом, который позволяет веб-браузерам и мобильным устройствам обеспечивать простую связь в реальном времени. Это означает, что функции приложения, такие как одноранговая видеоконференция, могут быть легко интегрированы в веб-страницу. Браузерный видеочат можно быстро спроектировать с помощью HTML и JavaScript, при этом не требуется никакого внутреннего кода.

Браузерный видеочат можно быстро спроектировать с помощью HTML и JavaScript, при этом не требуется никакого внутреннего кода

Видеозвонок через WebRTC между двумя устройствами iOS с помощью веб-браузера Safari.

WebRTC позволяет пользователям передавать одноранговое аудио и видео в современных веб-браузерах. Этот снимок экрана сделан из видеозвонка WebRTC между двумя устройствами iOS с использованием веб-браузера Safari.

Сделать пользовательское устройство клиентом WebRTC так же просто, как инициализировать новый RTCPeerConnection (); объект в интерфейсном JavaScript. В настоящее время поддержка WebRTC поставляется с веб-браузерами, такими как Chrome, FireFox, Edge, Safari и Opera на рабочем столе, а также с родными веб-браузерами iOS и Android.

Потоковая архитектура WebRTC

Видеочат установлен на двух или более клиентских устройствах по протоколу WebRTC. Соединение может быть выполнено с использованием одного из двух режимов. Первый режим одноранговый, то есть аудио и видео пакеты передаются напрямую от клиента к клиенту с UDP , Это работает до тех пор, пока обе машины имеют IP-адрес, доступный через общедоступный Интернет.

Полагаться на одноранговые соединения для видеочата в браузере нецелесообразно в производственных приложениях. Обычно для Интерактивного установления связи или инфраструктуры ICE не удается установить соединение между двумя пользователями, когда один или оба находятся за повышенной безопасностью ЛВС.

Чтобы смягчить это, вы можете установить Конфигурация RTC сначала попытаться выполнить одноранговое соединение, а затем вернуться к ретранслируемому соединению в случае сбоя однорангового соединения.

Чтобы смягчить это, вы можете установить   Конфигурация RTC   сначала попытаться выполнить одноранговое соединение, а затем вернуться к ретранслируемому соединению в случае сбоя однорангового соединения

Если общедоступные IP-адреса недоступны, как, например, в корпоративных сетях WiFi, необходимо установить соединение WebRTC через TCP с использованием сервера TURN. Каркас ICE решит, нужно ли это, когда пользователи пытаются подключиться. Сервер TURN действует как ретранслятор для видео и аудио данных. Экземпляры TURN требуют пропускной способности и машинного времени - поэтому они не бесплатны, как потоковая передача в одноранговой сети.

Такой разработчик, как вы, может создать сервер TURN, используя решения с открытым исходным кодом и общий веб-хостинг. Вы также можете использовать провайдер TURN, как Xirsys , Помните, что использование стороннего поставщика TURN означает, что все аудио- и видеоданные проходят через их системы при передаче.

Не создавайте сервер сигнализации WebRTC - используйте PubNub

WebRTC исключает очень важный компонент из видеосвязи. Клиент должен использовать службу сигнализации для передачи сообщений своим партнерам или партнерам. Эти сообщения предназначены для таких событий, как:

  • Я, Пользователь A, хотел бы позвонить вам, Пользователь B
  • Пользователь А в данный момент пытается вам позвонить, Пользователь Б
  • Я, Пользователь Б, принимаю ваш звонок. Пользователь А
  • Я, Пользователь Б, отклоняю ваш звонок. Пользователь А
  • Я, Пользователь B, хотел бы завершить наш звонок Пользователь A
  • Я, Пользователь A, хотел бы завершить наш звонок Пользователь B
  • Обмен текстовыми мгновенными сообщениями, как в Slack, Google Hangouts, Skype, Facebook Messenger и т. Д.
  • Аудио / видео кодек сессий и данные о подключении пользователя.

Эти сообщения являются частью потока транзакций сигнализации, который описан в Документация Mozilla Developer Network для WebRTC , Эта диаграмма иллюстрирует все операции, которые должны выполняться для аудио или видео вызова WebRTC.

Сервер сигнализации WebRTC является абстрактной концепцией. Многие службы могут стать таким «сигнальным сервером», как WebSockets, Socket.IO или PubNub. Если вам нужно создать решение для этого, вы в конечном итоге спросите: строить или покупать?

PubNub позволяет такому разработчику, как вы, полностью и дешево внедрить управляемые событиями решения, такие как служба сигнализации WebRTC. Библиотека с открытым исходным кодом WebRTC, которая использует PubNub доступно на GitHub. Однако следующее решение PubNub работает даже быстрее, чем сборка с использованием WebRTC SDK.

Пакет, поддерживаемый сообществом для звонков через WebRTC

PubNub похож на глобальный CDN для данных в реальном времени. Клиенты PubNub используют его IaaS для создания приложений чата в реальном времени, карт отслеживания местоположения в режиме реального времени, сигнализации устройств IoT и многого другого. Разработчики могут сосредоточиться на построении своего совместного общего опыта и оставить инфраструктуру для PubNub. Есть PubNub SDK для каждого языка программирования и устройства. Клиентские SDK обеспечивают надежные паб / суб соединения, доставку данных и управление сетью; все возможно в несколько строк кода.

Хотите включить видео- и аудиоконференции в реальном времени с WebRTC в свое веб-приложение? Это сообщество поддерживается Пакет WebRTC JS , который оборачивает PubNub JS SDK, ускорит ваш процесс разработки. Вы можете найти Пакет WebRTC JS на npm ,

Пример видео чата с открытым исходным кодом WebRTC

Сообщество открытого исходного кода создало пакет WebRTC для простых вызовов 1: 1 с PubNub. Теперь вы можете предоставить своим пользователям одноранговый или ретранслированный видеочат WebRTC. Вы можете использовать свои собственные учетные данные STUN / TURN с тем же объектом конфигурации, который показан в MDN RTCC Конфигурационная документация (обратите внимание, что Safari нравится только массив URL-адресов).

Вы можете использовать свои собственные учетные данные STUN / TURN с тем же объектом конфигурации, который показан в   MDN RTCC Конфигурационная документация   (обратите внимание, что Safari нравится только массив URL-адресов)

Пакет WebRTC JS ссылка в этом посте с открытым исходным кодом и поддерживается сообществом.

Используйте на свой риск!

Плагин использует PubNub's Pub / Sub Messaging для Служба сигнализации WebRTC , Все рукопожатия, требуемые Поток транзакций сигнализации WebRTC находятся под прикрытием плагина, так что вы можете сосредоточиться на коде более высокого уровня вашего приложения.

Список «онлайн-пользователей» в пользовательском интерфейсе обновляется в режиме реального времени с использованием PubNub Presence. Для того, чтобы это работало в вашем приложении, вам нужно включить Присутствие в Панель управления PubNub Admin , Для набора демонстрационных ключей, созданного при создании учетной записи, по умолчанию отключено присутствие. Вы должны включить его для набора ключей API.

Плагин доступен на NPM:

npm установить pubnub-js-webrtc

Попробуйте пример приложения WebRTC в JS WebRTC Пакет GitHub Репозиторий ,

Исходный код примера приложения находится в папке примера .

Теперь вы можете создать собственное полнофункциональное приложение чата WebRTC с PubNub!

Руководство по приложению WebRTC

В этом уроке мы будем использовать простой старый JavaScript, HTML и CSS. Если вы хотите использовать современный интерфейс (например, Вью , реагировать , или же угловатый ), чтобы создать приложение чата, проверьте Страница учебных пособий PubNub или PubNub Чат Ресурсный Центр ,

Вы можете использовать HTML а также CSS в моем примере проекта. Скопируйте эти файлы в папку вашего проекта.

Это делает очень общий пользовательский интерфейс приложения чата. В примере приложения есть только 1 глобальный чат и нет личных чатов 1: 1, хотя их легко реализовать. Убедитесь, что вы также копируете изображения png из пример к вашему проекту.

Откройте index.html в вашем любимом текстовом редакторе. Замените теги сценария под тегом body вашего HTML-файла этими двумя сценариями CDN. Оставьте третий тег script, который ссылается на app.js. Мы напишем этот файл вместе.

<script src = "https://cdn.pubnub.com/sdk/javascript/pubnub.4.21.7.js"> </ script> <script src = "https://cdn.jsdelivr.net/npm/pubnub [email protected]/dist/pubnub-js-webrtc.js "> </ скрипт>

Следующим шагом будет создание вашего собственного файла app.js в том же каталоге, что и ваш файл index.html. Причина, по которой нам нужно создать новый app.js, заключается в том, что скрипт в моем примере использует Xirsys , Моя личная учетная запись подключена к моему серверу функций PubNub. Вам нужно будет создать свой собственный сервер и учетную запись, если вы хотите использовать TURN-провайдера, такого как Xirsys. Мой следующий пост будет содержать учебник по созданию приложений WebRTC с TURN.

Скрипт app.js, который мы напишем вместе, будет использовать только бесплатные одноранговые WebRTC-соединения. Если вы попытаетесь сделать видеозвонок с 2 устройствами в одной локальной сети, ваше приложение будет работать. Нет уверенности в том, что соединение видеовызова может быть установлено с клиентами в отдельных сетях (из-за безопасности NAT).

app.js

Сначала мы сделаем ссылки на все элементы DOM из файла index.html. Как только мы можем ссылаться на них в нашем коде JavaScript, мы можем манипулировать ими программно.

const chatInterface = document.getElementById ('chat-interface'); const myVideoSample = document.getElementById ('my-video-sample'); const myVideo = document.getElementById ('my-video'); const remoteVideo = document.getElementById ('remote-video'); const videoModal = document.getElementById ('video-modal'); const closeVideoButton = document.getElementById ('close-video'); const brokenMyVideo = document.getElementById ('broken-my-video'); const brokenSampleVideo = document.getElementById ('broken-sample-video'); const usernameModal = document.getElementById ('username-input-modal'); const usernameInput = document.getElementById ('username-input'); const joinButton = document.getElementById ('кнопка соединения); const callConfirmModal = document.getElementById ('call-verify-modal'); const callConfirmUsername = document.getElementById ('call-verify-username'); const yesCallButton = document.getElementById ('yes-call'); const noCallButton = document.getElementById ('no-call'); constcomingCallModal = document.getElementById ('coming-call-modal '); const callFromSpan = document.getElementById ('call-from'); const acceptCallButton = document.getElementById ('accept-call'); const rejectCallButton = document.getElementById ('reject-call'); const onlineList = document.getElementById ('онлайн-список'); const chat = document.getElementById ('chat'); const log = document.getElementById ('log'); const messageInput = document.getElementById ('message-input'); const submit = document.getElementById ('submit');

Далее мы добавим некоторые переменные, которые содержат имя класса CSS, глобальную информацию о приложении и информацию о конфигурации WebRTC.

const hide = 'hide'; // Канал PubNub для отправки / получения сообщений глобального чата // также используется для присутствия пользователя с помощью PubNub Presence const globalChannel = 'global-channel'; пусть webRtcPhone; пусть пабнуб; // Словарь конфигурации RTCC из браузера WebRTC API // Добавьте сюда информацию о сервере STUN и TURN для вызова WebRTC const rtcConfig = {}; пусть имя пользователя; // Имя пользователя в приложении let myAudioVideoStream; // Локальный аудио и видео поток let noVideoTimeout; // Используется для проверки успешности подключения к видео const noVideoTimeoutMS = 5000; // Ошибка предупреждения, если видео не удается подключиться

Теперь мы рассмотрим обязательный клиентский код для функциональности пакета WebRTC.

// Инициировать аудио и видео поток на этом клиенте getLocalStream (). Then ((localMediaStream) => {myAudioVideoStream = localMediaStream; myVideoSample.srcObject = myAudioVideoStream; myVideo.srcObject = myAudioVideoStream;}) {catchVideo (}) .classList.add (hide); myVideoSample.classList.add (hide); brokenMyVideo.classList.remove (hide); brokenSampleVideo.classList.remove (hide);}); // Запрашиваем у пользователя ввод имени пользователя getLocalUserName (). Then ((myUsername) => {username = myUsername; usernameModal.classList.add (hide); initWebRtcApp ();}); // Отправить сообщение чата, когда нажата клавиша Enter. MessageInput.addEventListener ('keydown', (event) => {if (event.keyCode === 13 &&! Event.shiftKey) {event.preventDefault (); sendMessage () ; вернуть; } }); // Отправка сообщения чата при нажатии кнопки отправки submit.addEventListener ('click', sendMessage); const closeVideoEventHandler = (event) => {videoModal.classList.add (скрыть); chatInterface.classList.remove (скрыть); clearTimeout (noVideoTimeout); webRtcPhone.disconnect (); // отключаем текущий телефонный звонок} // Регистрируем обработчик события отключения при нажатии кнопки закрытия видео closeVideoButton.addEventListener ('click', closeVideoEventHandler);

Новый код, который мы только что добавили:

  • Запрашивает браузер, может ли он получить доступ к веб-камере и микрофону компьютера, и сохраняет объект потока в глобальной переменной.
  • Запрашивает у пользователя «имя пользователя» в приложении, прежде чем мы инициализируем часть приложения, содержащую WebRTC.
  • Регистрирует обработчики событий для обмена сообщениями в чате, например, когда пользователь нажимает кнопку отправки или нажимает клавишу ввода.
  • Создает другой обработчик событий, когда пользователь закрывает видеочат.

Далее мы собираемся добавить код инициализации для части WebRTC веб-приложения.

const initWebRtcApp = () => {// Событие объекта телефона WebRTC, когда видео удаленного партнера становится доступным. const onPeerStream = (webRTCTrackEvent) => {console.log («Доступен одноранговый поток аудио / видео»); const peerStream = webRTCTrackEvent.streams [0]; window.peerStream = peerStream; remoteVideo.srcObject = peerStream; }; // Событие объекта телефона WebRTC, когда удаленный узел пытается вам позвонить. const onIncomingCall = (fromUuid, callResponseCallback) => {let username = document.getElementById (fromUuid) .children [1] .innerText; comingCall (username) .then ((acceptCall) => {if (acceptCall) {// Завершить уже открытый вызов перед открытием нового webRtcPhone.disconnect (); videoModal.classList.remove (hide); chatInterface.classList.add (скрыть); noVideoTimeout = setTimeout (noVideo, noVideoTimeoutMS);} callResponseCallback ({acceptCall});}); }; // Событие объекта телефона WebRTC, когда удаленный узел отвечает на ваш запрос вызова. const onCallResponse = (acceptCall) => {console.log («Ответ на вызов:», acceptCall? «принято»: «отклонено»); if (acceptCall) {videoModal.classList.remove (hide); chatInterface.classList.add (скрыть); noVideoTimeout = setTimeout (noVideo, noVideoTimeoutMS); }}; // Событие объекта телефона WebRTC для случая, когда звонок отключается или время ожидания. const onDisconnect = () => {console.log ('Вызов отключен'); videoModal.classList.add (скрыть); chatInterface.classList.remove (скрыть); clearTimeout (noVideoTimeout); }; // Выводит список онлайн-пользователей в пользовательском интерфейсе и регистрирует метод вызова в событии click // Когда пользователь щелкает имя партнера в онлайн-списке, приложение вызывает этого пользователя. const addToOnlineUserList = (оккупант) => {const userId = оккупант.uuid; const name = оккупант. остояние? оккупант.стате.имя: ноль; if (! name) return; const userListDomElement = createUserListItem (userId, name); const УжеInList = document.getElementById (userId); const isMe = pubnub.getUUID () === userId; if (readyInList) {removeFromOnlineUserList (оккупант.uuid); } if (isMe) {return; } onlineList.appendChild (userListDomElement); userListDomElement.addEventListener ('click', (событие) => {const userToCall = userId; verifyCall (name) .then ((yesDoCall) => {if (yesDoCall) {webRtcPhone.callUser (userToCall, {myStream: myAudioVideoStream)} }});}); } const removeFromOnlineUserList = (uuid) => {const div = document.getElementById (uuid); if (div) div.remove (); }; pubnub = новый PubNub ({publishKey: '_YOUR_PUBNUB_PUBLISH_API_KEY_HERE_', subscribeKey: '_YOUR_PUBNUB_SUBSCRIBE_API_KEY_HERE_'}); // Этот слушатель PubNub поддерживает текстовый чат и онлайн-список пользователей. pubnub.addListener ({message: function (event) {// Рендеринг сообщения глобального чата в пользовательском интерфейсе if (event.channel === globalChannel) {renderMessage (event);}}, status: function (statusEvent) {if ( statusEvent.category === "PNConnectedCategory") {pubnub.setState ({состояние: {имя: имя пользователя}, каналы: [globalChannel], uuid: pubnub.getUUID ()}); pubnub.hereNow ({каналы: [globalChannel] , includeUUIDs: true, includeState: true}, (status, response) => {response.channels [globalChannel] .occupants .forEach (addToOnlineUserList);});}}, присутствие: (status, response) => {if ( status.error) {console.error (status.error);} еще if (status.channel === globalChannel) {if (status.action === "join") {addToOnlineUserList (status, response);} еще if (status.action === "state-change") {addToOnlineUserList (status, response);} еще if (status.action === "уйти") {removeFromOnlineUserList (status.uuid);} еще if (status.action === "timeout") {removeFromOnlineUserList (response.uuid);}}}}); pubnub.subscribe ({channel: [globalChannel], withPresence: true}); window.ismyuuid = pubnub.getUUID (); // Отключаем PubNub перед тем, как пользователь уходит со страницы window.onbeforeunload = (событие) => {pubnub.unsubscribe ({channel: [globalChannel]}); }; // Конфигурация объекта телефона WebRTC. let config = {rtcConfig, ignoreNonTurn: false, myStream: myAudioVideoStream, onPeerStream, // требуется onIncomingCall, // требуется onCallResponse, // требуется onDisconnect, // требуется pubnub // требуется}; webRtcPhone = новый WebRtcPhone (config); };

Код, который мы только что добавили в app.js, выполняется после того, как пользователь вводит свое «имя пользователя», и это:

  • Объявляет все обработчики событий плагина для событий вызова WebRTC
  • Добавляет и удаляет элементы онлайн-списка пользователей при входе и отключении пользователей в приложении
  • Регистрирует обработчик событий для совершения нового видеовызова пользователю при каждом щелчке его имени в пользовательском интерфейсе списка пользователей.
  • Регистрирует обработчик событий для отображения новых сообщений чата при каждом отправке в глобальный чат в режиме реального времени.
  • Настраивает PubNub для отправки и прослушивания сообщений в реальном времени с Шаблон сообщения Pub / Sub ,
  • Инициализирует пакет WebRTC и передает объект конфигурации в экземпляр

Прежде чем продолжить, важно отметить, что нам нужно вставить наши бесплатные ключи API PubNub в эту функцию. Мы можем получить несколько вечно свободных ключей, используя форму регистрации ниже. Эти ключи бесплатны до 1 миллиона транзакций в месяц, что отлично подходит для любителей или профессиональных проверенных приложений.

Вы можете вставить свои клиентские ключи API Pub / Sub в файл app.js в объекте инициализации PubNub, как вы могли видеть в предыдущем фрагменте кода.

pubnub = новый PubNub ({publishKey: '_YOUR_PUBNUB_PUBLISH_API_KEY_HERE_', subscribeKey: '_YOUR_PUBNUB_SUBSCRIBE_API_KEY_HERE_'});

Нам нужно включить функцию присутствия PubNub на панели администратора PubNub. При создании набора ключей PubNub функция присутствия для ключа по умолчанию отключена. Мы можем включить его для ключа, перейдя в Панель управления PubNub Admin и нажав тумблер.

Пример приложения использует присутствие, чтобы показать, какие пользователи находятся в сети в приложении. Мы используем UUID пользователя PubNub для хранения уникальных ссылок на каждого пользователя в приложении. Когда мы выполняем операцию видеозвонка WebRTC, мы используем UUID, чтобы оба пользователя могли отображать соответствующее имя пользователя в своем пользовательском интерфейсе.

Далее нам понадобятся некоторые служебные методы для выполнения определенных функций пользовательского интерфейса. Они не характерны для всех приложений WebRTC, они предназначены только для запуска этого конкретного пользовательского интерфейса, который я разработал. Добавьте этот код в конец файла app.js.

// = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = // Функции визуализации пользовательского интерфейса // = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = функция renderMessage (сообщение) {const messageDomNode = createMessageHTML (сообщение); log.append (messageDomNode); // Сортировка сообщений в журнале чата на основе их временного маркера (значение идентификатора DOM) sortNodeChildren (log, 'id'); chat.scrollTop = chat.scrollHeight; } function messagesCall (name) {return new Promise ((resol) => {acceptCallButton.onclick = function () {comingCallModal.classList.add (hide); resol (true);} rejectCallButton.onclick = function () {comingCallModal. classList.add (hide); resol (false);} callFromSpan.innerHTML = name ;comingCallModal.classList.remove (hide);}); } function verifyCall (name) {вернуть новое Promise ((resol) => {yesCallButton.onclick = function () {callConfirmModal.classList.add (hide); resol (true);} noCallButton.onclick = function () {callConfirmModal. classList.add (hide); resol (false);} callConfirmUsername.innerHTML = name; callConfirmModal.classList.remove (hide);}); } function getLocalUserName () {return new Promise ((resol) => {usernameInput.focus (); usernameInput.value = ''; usernameInput.addEventListener ('keyup', (event) => {const nameLength = usernameInput.value. length; if (nameLength> 0) {joinButton.classList.remove ('disabled');} else {joinButton.classList.add ('disabled');} if (event.keyCode === 13 && nameLength> 0) { resolve (usernameInput.value);}}); joinButton.addEventListener ('click', (event) => {const nameLength = usernameInput.value.length; if (nameLength> 0) {resol (usernameInput.value);}} );}); } function getLocalStream () {вернуть новое Promise ((разрешить, отклонить) => {navigator.mediaDevices .getUserMedia ({audio: true, video: true}) .then ((avStream) => {resol (avStream);}) .catch ((err) => {alert ('Невозможно получить доступ к локальной камере или микрофону.'); console.error (err); reject ();});}); } function createUserListItem (userId, name) {const div = document.createElement ('div'); div.id = userId; const img = document.createElement ('img'); img.src = './phone.png'; const span = document.createElement ('span'); span.innerHTML = name; div.appendChild (IMG); div.appendChild (диапазон); вернуть div; } function createMessageHTML (messageEvent) {const text = messageEvent.message.text; const jsTime = parseInt (messageEvent.timetoken.substring (0,13)); const dateString = новая дата (jsTime) .toLocaleString (); const senderUuid = messageEvent.publisher; const senderName = senderUuid === pubnub.getUUID ()? имя пользователя: document.getElementById (senderUuid) .children [1] .innerText; const div = document.createElement ('div'); const b = document.createElement ('b'); div.id = messageEvent.timetoken; b.innerHTML = `$ {senderName} ($ {dateString}):`; div.appendChild (б); div.innerHTML + = текст; вернуть div; } // = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = // Функции утилит // = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = function sendMessage () {const messageToSend = messageInput.value.replace (/ \ r? \ n | \ r / g, ''); const trimmed = messageToSend.replace (/ (\ s) / g, ''); if (trimmed.length> 0) {pubnub.publish ({channel: globalChannel, message: {text: messageToSend}}); } messageInput.value = ''; } // Сортирует одноуровневые элементы HTML на основе значения атрибута function sortNodeChildren (parent, attribute) {const length = parent.children.length; for (пусть i = 0; i <длина-1; i ++) {if (parent.children [i + 1] [attribute] <parent.children [i] [attribute]) {parent.children [i + 1]. parentNode .insertBefore (parent.children [i + 1], parent.children [i]); я = -1; }}} function noVideo () {const message = 'Не установлено одноранговое соединение. \ n' + 'Попробуйте добавить сервер TURN в конфигурацию WebRTC.'; if (remoteVideo.paused) {alert (message); closeVideoEventHandler (); }}

style.css

Нам нужны стили CSS в нашем приложении для приятного и приятного пользовательского интерфейса. Файл index.html уже имеет ссылку на файл style.css, поэтому добавьте его в ту же папку. файл style.css для этого WebRTC приложение доступно в репозитории GitHub.

Готово! Теперь вы можете развернуть ваши статические интерфейсные веб-файлы на платформе веб-хостинга, такой как WordPress или Страницы GitHub , Ваше приложение чата WebRTC будет доступно для использования любому человеку в мире. Код совместим с мобильными устройствами. Это означает, что новейшие веб-браузеры на iOS и Android смогут запускать приложение для видео лицом к лицу!

Часто задаваемые вопросы (FAQ) о пакете WebRTC

Является ли пакет официально частью PubNub?

Нет. Это проект с открытым исходным кодом, поддерживаемый сообществом. Если у вас есть вопросы или вам нужна помощь, обратитесь к [email protected] , Если вы хотите сообщить об ошибке, сделайте это на Страница GitHub Issues ,

Публикует ли PubNub аудио или видео данные?

Нет. PubNub очень хорошо сочетается с WebRTC в качестве службы сигнализации. Это означает, что PubNub передает события от клиента к клиенту с помощью обмена сообщениями Pub / Sub. Эти события включают в себя:

  • Я, Пользователь A, хотел бы позвонить вам, Пользователь B
  • Пользователь А в данный момент пытается вам позвонить, Пользователь Б
  • Я, Пользователь Б, принимаю ваш звонок. Пользователь А
  • Я, Пользователь Б, отклоняю ваш звонок. Пользователь А
  • Я, Пользователь B, хотел бы завершить наш звонок Пользователь A
  • Я, Пользователь A, хотел бы завершить наш звонок Пользователь B
  • Обмен текстовыми мгновенными сообщениями, как в Slack, Google Hangouts, Skype, Facebook Messenger и т. Д.

Могу ли я сделать групповой звонок с более чем 2 участниками?

Групповые вызовы могут развиваться с помощью WebRTC и PubNub, однако текущий пакет PubNub JS WebRTC может подключить только 2 пользователя в частном вызове. Сообщество может разработать эту функцию в будущем, но на данный момент нет никаких планов развития.

Я нашел ошибку в плагине. Где я могу сообщить об этом?

Пакет PubNub JS WebRTC является проектом с открытым исходным кодом, поддерживаемым сообществом. Это означает, что лучшее место для сообщения об ошибках - это страница GitHub Issues для репозитория кода. Сообщество будет заниматься исправлением ошибки по желанию, поэтому нет гарантии, что исправление будет сделано. Если вы хотите предоставить исправление кода, подключите репозиторий GitHub к своей учетной записи GitHub, отправьте исправления и сделайте запрос на извлечение (процесс задокументирован на GitHub).

Для большего количества примеров, проверьте Страница учебных пособий PubNub , Если вам нравится этот плагин, вам нужна помощь или вы хотите создать нечто подобное, обратитесь к [email protected] , Мы хотим услышать ваше мнение!

Похожие

Как сделать аудио CD
Скачать Audio CD Burner Аудио CD заметно отличается от других сменных носителей. Фактически он не содержит файлов и данных, хранящихся в необработанных выборках фиксированного формата. Таким образом, вы не можете просто скопировать аудиофайлы на диск - он не будет распознан плеером. Качество звука Audio CD часто превышает форматы с потерями, такие как MP3, но уступает форматам без потерь, таким как FLAC и APE.
HDMI с аудио не работает
... видео драйверы. Хотя это может показаться нелогичным, звук, выходящий из порта HDMI, контролируется видеокартой, а не звуковой картой. Это означает, что если у вас не установлены правильные видеодрайверы, вы не получите звук на своем телевизоре. Посетите веб-сайт производителя видеокарты, чтобы загрузить последние версии драйверов. Если вы не уверены, какие драйверы вы можете получить, это может быть полезно
Что такое SOC 2 | Руководство по соответствию и сертификации SOC 2 | Imperva
Информационная безопасность является поводом для беспокойства для всех организаций, включая те, которые передают ключевые бизнес-операции сторонним поставщикам (например, SaaS, поставщики облачных вычислений). По правде говоря, поскольку неправильно обработанные данные, особенно поставщиками приложений и сетевой безопасности, могут сделать предприятия уязвимыми для атак, таких как кража данных, вымогательство и установка вредоносных программ. SOC 2 - это процедура аудита, которая обеспечивает
OneDrive, Dropbox, Google Drive и Box: Какой сервис облачного хранения вам подходит?
... я вас? Сара Митрофф / CNET Хранение ваших файлов в облаке имеет много преимуществ. Вы можете просматривать свои файлы с любого телефона, планшета или компьютера, подключенного к Интернету, и облако также может обеспечить резервное копирование файлов, чтобы они никогда не исчезали, если ваш телефон потеряется или ваш компьютер выйдет из строя. Использование облака не представляет никакой сложности, но выбрать, какой сервис использовать, немного сложнее. По этой причине я составил
Что такое Web 2.0
... с «Что будет дальше с Web 2.0?» в Web Squared: Web 2.0 пять лет спустя , Разрушение пузыря доткомов осенью 2001 года стало поворотным моментом для Интернета. Многие люди пришли к выводу, что сеть была перегружена, когда на самом деле пузыри и последующие встряхивания являются общей чертой всех технологических революций , Потрясения
Office 365, Служба информационных технологий (ITS)
Wesleyan Информационные технологии Office 365 - это набор продуктов, который включает в себя традиционный пакет Microsoft Office и онлайн-версию этих приложений. Теперь вы можете войти в систему и использовать приложения Microsoft онлайн точно так же, как вы использовали Google Docs или Google Spreadsheets. Office 365 также включает в себя хранилище на One Drive for Business. Это хранилище функционирует так же, как Google Drive.
Маршрутизаторы и роутер - в чем разница?
Несмотря на широкое применение подобного оборудования, такие вопросы встречаются достаточно часто. При этом существует мнение, что разница между маршрутизатором и роутером. На самом деле это просто разные названия. 💡 Роутер - это английское слово (router), что в переводе и есть маршрутизатор. Таким образом, оба понятия обозначают один вид техники. Что такое Wi-Fi роутер? Бурное развитие электроники в наши дни привело к тому практически у каждого в доме есть
Экологическая мебель - изобретение или революция?
Хотя я хочу посвятить этот блог в основном теме очистки сточных вод, вопросы, связанные с экологией, также близки мне. В конце концов, я врач в этой области. Недавно, в связи с этим, я натолкнулся на тему, касающуюся экологической мебели, и решил поделиться с вами своими мыслями по этому вопросу.
Что такое карта сайта XML и как ее создать?
... ять ваш веб-сайт при его сканировании. Что такое карта сайта и почему это важно? Файлы Sitemap - это протокол, который позволяет веб-мастеру веб-сайта информировать Google и другие крупные поисковые системы об URL-адресах веб-сайтов, доступных для сканирования. Файлы Sitemap позволяют поисковым системам находить все ваши веб-страницы, которые они могли бы пропустить при индексации. Карта сайта XML позволяет вам указать дополнительную информацию о каждом URL, такую ​​как:
Великобританию устраивает, что Киев не имеет шансов стать членом ЕС - Financial Times
... страция / REUTERS С географической точки зрения Великобритания и Украина находятся на противоположных концах Европы. Но по отношению к ЕС у них в какой-то момент может оказаться много общего. Об этом сообщает " Главред "Со ссылкой на Financial Times. "Соглашение об ассоциации ЕС-Украина, подписанное в 2014 году, окончательно
Зарабатывание денег в Интернете. Стоит ли торговать бинарными опционами или на рынке форекс?
Бинарные опционы или форекс - лучший способ заработать деньги в Интернете? А может, торговать не стоит? Посмотрите описание моего опыта и оцените себя. Я пытался показать различия между этими возможностями. • Что такое бинарные опционы? • Что такое форекс?

Комментарии

Или что в нашей стране есть место, где вы можете загружать данные со скоростью 600 Мбит / с, используя свой телефон?
Или что в нашей стране есть место, где вы можете загружать данные со скоростью 600 Мбит / с, используя свой телефон? Для большинства из нас Long Term Evolution (LTE) - это не более чем синоним быстрого мобильного интернета. Нам кажется, что если у нас есть телефон с LTE, мы вовремя. Оказывается, у LTE много имен и скрыто много технологий. Сама сеть отличается, и возможности наших смартфонов также разные. Статус-кво Начнем с того, что в настоящее
Но вы не отправляете им письма, не так ли?
Но вы не отправляете им письма, не так ли? Более того, ваши сообщения часто пересылаются вместе с подписью. Покажите адрес веб-сайта на визитных карточках (на которых редко пишется, чем занимается компания), фирменных бумагах, предложениях, папках. Используйте служебные автомобили в качестве мобильных рекламных щитов (здесь небольшая подсказка - сам URL без описания редко заставит кого-либо посещать сайт). Введите URL страницы на дорожном знаке. Рабочие носят рабочую одежду? и т.д.
2. Прежде чем мы начнем, нам важно уточнить, что такое кеш?
2. Прежде чем мы начнем, нам важно уточнить, что такое кеш? Что такое кэш приложений на iPad? Кэш-память - это временная область хранения устройства, в которой хранятся определенные виды данных. Ваше устройство использует части вашей памяти для хранения данных для быстрого доступа и временного хранения вашим приложением. Теоретически, со временем ваш кэш может стать большим и даже начать замедлять работу вашего устройства. Если вы хотите очистить кэш приложений на
Я не встречал человека, который решил бы учиться в Украине, не пытаясь попасть в Польшу раньше, возможно, ваш случай точно такой же?
Я не встречал человека, который решил бы учиться в Украине, не пытаясь попасть в Польшу раньше, возможно, ваш случай точно такой же? Аркадиуш Ожеховский: Я мечтал стать врачом с детства. Я всегда интересовался биологией и химией. Из малого у меня также был талант и навыки ручного труда. Выбрав направление, я решил объединить эти навыки и пойти в стоматологию - как оказалось, это был хит!
Если кому-то сказать, что ты пишешь тексты и этим зарабатываешь на жизнь, то реакция однозначна - «Разве это трудно?
Если кому-то сказать, что ты пишешь тексты и этим зарабатываешь на жизнь, то реакция однозначна - «Разве это трудно? Вот я в классе такое произведение написал ». После этого еще можно выслушать монолог на 5-10 минут о том, как трудно и важно делать то, что делает твой собеседник. Проблема также в том, что нет никакой академической подготовки для копирайтеров. Чтобы быть экономистом, надо минимум 5 лет более или менее успешно сдавать экзамены, а вот копирайтером
Как скачивать графические материалы, чтобы не беспокоиться об их лицензии и штрафах из-за нарушения авторских прав и при этом не платить за них ни копейки?
Как скачивать графические материалы, чтобы не беспокоиться об их лицензии и штрафах из-за нарушения авторских прав и при этом не платить за них ни копейки? Специально для вас мы подготовили список 10 лучших (на наш взгляд) бесплатных фотобанков, благодаря которым вы найдете всю необходимую графику бесплатно.
Значит ли это, что вы должны сосредоточиться на всех источниках?
Значит ли это, что вы должны сосредоточиться на всех источниках? Можно, но не обязательно. Не менее хорошим решением будет придание еще большего веса наиболее важным из них (например, когда речь идет о предлагаемых видеороликах на YouTube, стоит потратить больше времени на выбор интересных раритетов и миниатюр). Точный анализ статистики YouTube и отчетов может быстро и значительно увеличить количество людей, заинтересованных в вашем контенте, но не только. Благодаря им вы сможете держать
Кто-нибудь знает, что я могу сделать?
Кто-нибудь знает, что я могу сделать? Это постоянное напоминание от Apple об обновлении вашего устройства до iOS 12 / 11.4 / 11.3 может быть неприятным, и если вы хотите избавиться от него, выбирайте, когда вы обновляете свое устройство, а не Apple решает за вас, вы в праве место. Здесь мы обсудим различные способы заставить ваш iPhone или iPad перестать посылать вам эти «напоминания» постоянно. Прежде чем мы перейдем к решениям, необходимо сообщить, что простого решения
Что такое Crypto Sheriff и как я могу его использовать?
Что такое Crypto Sheriff и как я могу его использовать? Crypto Sheriff - это инструмент, который помогает определить, какой тип вредоносного программного обеспечения заразил ваше устройство. Благодаря этому мы можем проверить, можем ли мы расшифровать ваши файлы. Чтобы узнать, как это работает, посмотрите видео ниже: Инструмент дешифрования не работает, и я уверен, что я выбрал их правильно - почему? К сожалению, это возможно. Иногда для данной семьи у нас
Должно ли это быть простое судно для того, чтобы не отставать от соответствующих предупреждений и информации без необходимости тянуться к вашему телефону?
Должно ли это быть простое судно для того, чтобы не отставать от соответствующих предупреждений и информации без необходимости тянуться к вашему телефону? Или это должно быть больше об активном запуске приложений и выполнении больших задач самостоятельно? Должны ли часы быть чем-то, на что вы смотрите несколько секунд подряд? Или это должно быть то, на что ты смотришь несколько минут подряд? Помимо всего прочего, должен ли он служить дополнением к вашему смартфону?
Давайте начнем с того, что такое SEO-аудит или веб-аудит для SEO?
Давайте начнем с того, что такое SEO-аудит или веб-аудит для SEO? SEO аудит - это основной элемент процесса оптимизации сайта, его целью является тщательная проверка сайта , выявление его самых слабых элементов и поиск решений, которые помогут улучшить положение сайта в результатах поиска. Основываясь на выводах, полученных в результате аудита сайта, оптимизация элементов, квалифицированных как оказывающие неблагоприятное воздействие на

Что такое WebRTC?
Могу ли я сделать групповой звонок с более чем 2 участниками?
Где я могу сообщить об этом?
Что такое WebRTC?
Если вам нужно создать решение для этого, вы в конечном итоге спросите: строить или покупать?
Хотите включить видео- и аудиоконференции в реальном времени с WebRTC в свое веб-приложение?
«Ответ на вызов:», acceptCall?
?остояние?
GetUUID ()?
R?