Проектирование видеокомпонента WebRTC для Vue.js

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

Краткое введение в WebRTC видео

WebRTC (коммуникация в реальном времени) стал стандартом для представления видео, аудио и других данных в реальном времени на веб-страницах. Это было долгое время в разработке со многими другими конкурирующими решениями на основе плагинов для видео. В конце концов потребность в стандарте победила и теперь все современные браузеры поддерживают WebRTC приложения, созданные только с помощью HTML5 и без плагинов. WebRTC — это сложный набор протоколов под прикрытием: SDP, RTP, RTCP, ICE/STUN/TURN и DTLS. К счастью, использование его из javascript может быть очень простым для простых сценариев.

Вот несколько ссылок, которые помогут вам начать понимать WebRTC:

Краткое введение в Vue.js

В наши дни нет недостатка в клиентских фреймворках для создания веб-приложений… React, Angular и Polymer, и это лишь некоторые из них. Vue.js стал популярным сам по себе, и, на мой взгляд, это один из самых простых фреймворков для изучения, который можно добавить в любое существующее веб-приложение, даже понемногу, если хотите. Он имеет активное сообщество компонентов, которые можно установить в ваш проект, как правило, с помощью нескольких нпм команды. Также появились инструменты сборки на стороне клиента, которые позволяют создавать каркасы для проектов, которые настолько просты или сложны, насколько вы хотите.

Вот несколько ссылок, которые помогут вам начать работу с Vue.js:

Компонентный дизайн в Vue.js

Для нового компонент, который я хотел создать, я хотел опубликовать его на npm и открыть исходный код. Хороший способ приблизиться к этому — изучить структуру многих замечательных компонентов с открытым исходным кодом, которые вы можете найти на таких сайтах, как https://vuejsexamples.com (всегда стоять на плечах гигантов, или воровать у лучших, как когда-то сказал Пикассо… а может это была Metallica? 😉 Еще я нашел отличную библиотеку демок на WebRTC-эксперименты который включает в себя RTCMultiConnection сценарий, предоставляющий пользователям возможность присоединиться к видеокомнате.

Сигнальный сервер

Для подключения пользователей к комнате требуется код на сервере, который позволяет людям находить друг друга. Видео в нашем сценарии одноранговое, поэтому серверу просто нужно подключить людей, и после этого ему не требуется куча ресурсов. С RTCMultiConnection библиотека, у вас есть много вариантов для настройка сигнального сервера которые вы можете проверить здесь.

Покажи мне товар

Готовый компонент можно найти здесь на Гитхабе.

Вы можете найти это демонстрационная страница в vue-webrtc/demo/src папка.

Немного вдохновения

Что вы можете сделать с такими вещами? Подумайте не только о приложениях для видеочата, таким образом между пользователями можно отправлять любые данные… изображения, файлы, движения мыши. Какие данные вы хотите отправить? Какой общий опыт вы могли бы создать? Какие еще SDK вы могли бы скомбинировать, чтобы обеспечить ценность?

Что дальше?

Вы говорите нам… в настоящее время дорожная карта включает в себя выбор камеры и улучшенную поддержку передачи данных… так что оставьте свой отзыв и сообщите нам, что еще вы хотели бы видеть добавленным!

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *