ВИДЕОЧАТ C НУЛЯ НА React & WebRTC + WebSockets. Аналог Zoom, Skype, Google Meet ЗА ЧАС 2021

Пишем многопользовательский видеочат на React. Аналог Zoom, Skype, Google. И разберемся как работает стандарт WebRTC.
💻 Код готового приложения: github.com/mak...
❗️В тот код, который вы увидите в видеоуроке, я добавил еще 1 коммит с отпиской от событий и дополнительными проверками: github.com/mak...
🟢 Live: cb-clone.herok...
✔️Если хочешь изучать программирование со мной, не забудь подписаться :)
/ @wisejs
✔️Мой телеграм канал: t.me/joinchat/...
Подписывайтесь на мой канал, следите за новыми полезными роликами, пишите комментарии и приятного просмотра!
#react #webrtc #видеочат

[@ВладимирГоворов-о3г]

Не встречал еще такого наглядного объяснения любой темы с помощью обычной консоли браузера. Но оказалось, что благодаря такой подачи схватываешь на лету все. А то, как реализовать в коде - дело каждого, в пределах разумного, конечно) В общем, спасибо. Продвижения вам)🔥

[@romanlamer181]

Очень познавательное и крутое видео!!!100 из 10; Таймкоды: 0:56 - Что такое WebRTC,и как создать p2p соединение; 5:09 - Устанавливаем прямое соединеие без сервера; 10:34 - Пишем код приложения; 20:38 - Actions; 30:00 - Пример создания комнат; 32:23 - Пишем хуки; 37:53 - Захват медиа; 44:30 - Пример захвата медиа; 59:57 - Тестим наш видеочат; 1:01:00 - Добавляем стили; 1:05:50 - Наслаждаемся выполненой работой;

[@ФилиппТурбанов]

Парень, гигантское тебе спасибище, ты просто лучший! Дай Бог тебе здоровья и процветания твоему каналу 🙂

[@nilsen1879]

Крутой контент, спасибо! Да и вообще на канале нетривиальные todo list, это круто

[@wisejs]

Спасибо, приятно слышать :)

[@Luke-vd8es]

Спасибо, за этот ролик!! Все максимально понятно и наглядно! После просмотра наконец-то понял как это работает WebRTC и смог реализовать видеозвонки в своем курсовом проекте.

[@xtapofficial6732]

Всем привет. Кто смотрит это видео в конце 2021 года - в новой версии вместо Switch нужно прописывать Routes.

[@detroitbecomepixel3110]

А вместо useHistory - useNavigate

[@АлинаЧередниченко-п9ъ]

Давно хотела написать видеочат. Спасибо 😉

[@вчераФикусПопилус]

и? написала?

[@x4r7]

@@вчераФикусПопилус застряла на моменте установки Nodejs

[@вчераФикусПопилус]

@@x4r7 а ты откуда знаешь?)

[@АнатолийГорбов-о1ь]

Это крутой контент! Спасибо!! Очень подробно и понятно!! Ещё раз спасибо, продолжай в том же духе))

[@alexs7931]

Первое видео где подробно продемонстрирован код + процесс конекта пиров, я наконец смог увидеть сериализованеую строку подключения offer/answer , до этого просто гадал как это конектится.

[@kiwi9492]

Лучший туториал, что я встречала по этой теме, для тех, кому нужна быстрая реализация и общее понимание. Мне для диплома больше и не нужно, но для работы я бы хотела узнать подкапотье

[@wisejs]

спасибо, приятно слышать! в скором времени будет больше подобного контента)

[@romandeveloper7720]

@@wisejs, ты большой молодец!

[@beamway317]

Лучше использовать нативный js

[@melitopol_Russia]

​@@beamway317лучше не использовать нативный там, где это займёт намного больше времени, нежели с использованием библиотеки или фреймворка)

[@alexpresley8002]

Мен, спасибо тебе! Реально круто разложил все по шагам. По итогу действительно получается видео-чат, который может работать как Zoom.

[@suslikest3708]

Интересная тема и подана не на 10 часов это лайк!

[@МихаилТесля-б4д]

Если кому интересно, чтобы пофиксить баг с рендером при подключении множества клиентов к комнате, стоит сделать отдельный компонент для видео, куда нужно прокинуть функцию, которая бы добавляла в useEffect srcObject к видео, подход предложенный автором с useStateWithCallback не всегда срабатывает

[@andranikhakobkekhvyan868]

Какая у вас была проблема?

[@ՍերինեԲաղդասարյան]

Спасибо большое за видео. Вместо client2 может быть сервер?

[@yourtranquility667]

Нереально крутой контент, не только актуальный, но и качественный. Спасибо!)

[@wisejs]

спасибо, что оценили!)

[@mprowebuz-zamonaviyvasifat7850]

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

[@ОксанаЧередниченко-ю4э]

Очень всё доступно.Спасибо

[@dimamir1138]

Очень интересно и познавательно. Тут и теория и практика в и класная подача. Побольше бы таких видео!

[@frostichekk]

Даже в 2024 году этот гайд еще актуален, спасибо огромное! Но у меня проблема, устройства которые не имеют камеры/микрофона не могут видеть других участников. Как сделать чтобы даже если у пользователя отсутствует камера/микрофон он все равно видел других участников?

[@aniiiinii]

видео было очень интересным но одного не понял я и это как запустить этого программу через git hub если сможете можете сделать отдельную видео сделать для этого! спасибо за внимание!

[@vana__f7570]

Ты самый крутой. Тебя обязательно благословят боги. Ты станешь круче чем IT-kamasutra

[@SenomSnK]

Спасибо большое за видео, такого контента очень не хватает, продолжайте в том же духе!

[@wisejs]

спасибо за поддержку!)

[@КириллПетров-ш3н3к]

Великолепно, отличные приложения. Спасибо за контент и знания!

[@ArtemSopun]

просто вау! очень крутое видео!

[@alexanderolshansky2411]

Спасибо большое. Отличная работа!

[@wisejs]

Спасибо за ваш отзыв!

[@RainbowBrilliance]

Спасибо за труд.

[@wisejs]

спасибо, что смотрите!

[@sergiistryzg9699]

Спасибо) Для первого знакомства самое то) Если что писать --save не обязательно ибо по умолчанию он это делает, это если в девДепенденсис хочешь засунуть то там уже придется писать --save-dev

[@JohnDoe-p1y]

-D тогда так уже чтоб еще короче

[@aleksandrmatyka3118]

Ты лучший, отличный контент

[@gamerecords_site]

Классное видео, вопрос, можно ли сделать, чтобы подключаемый не транслировал свою камеру, а просматривал видео к кому подключается?

[@melitopol_Russia]

ну да, при подключении устанавливать значение false в настройках девайса камеры, либо просто пользоваться браузерной фичей

[@mikhailreznichenko8035]

Спасибо за ролик!

[@akezhanrakishev9304]

Классный урок! Но код с Github репозитория не работает. У меня React сервер и клиент запускается, но соединение не устанавливается и list комнат тоже не отображается. Можете пожалуйста сказать в чем может быть ошибка?

[@wisejs]

Верно, там конфиг клиента настроен на хероку. В файле: /src/socket/index.js Нужно изменить: const socket = io('/', options); на const socket = io('localhost:3001', options);

[@akezhanrakishev9304]

@@wisejs Большое спасибо!

[@jetmix7097]

@@wisejs Подскажите, пожалуйста, что нужно поменять чтобы приложение располагалась не в корне, а например в папке /chat/ ?

[@maksym7094]

а есть еще камеры с меньшим разрешением. ставите в getUserMedia свойчтво video в true

[@me4anika]

хороший туториал, правда нифига не понятно, но спасибо

[@wisejs]

спасибо! а что именно не понятно?)

[@romandeveloper7720]

Привет. А как сделать демонстрацию экрана в браузере?

[@danissimo757]

в каком текстовом редакторе ты работал?

[@sengokusky1515]

ну ты красава !

[@maxim7603]

Спасибо, годное видео

[@wisejs]

спасибо, дальше больше)

[@vladosononame6376]

Очень круто, спасибо за информацию

[@wisejs]

Спасибо, круто что понравилось!

[@vladosononame6376]

@@wisejs попытался подключиться от браузера к браузеру заработало, раздаю интернет с телефона, попробовал с другом подключиться с другого города обменялись токенами но не получилось подключиться) что может быть? изза того что у меня не 4g?

[@wisejs]

@@vladosononame6376 Скорее всего да. Через 3g невозможно установить p2p соединение. Нужен дополнительно сервер, который будет проксировать трафик.

[@vladosononame6376]

Wisejs Frontend это видео - лучшее что я видел по вебу на ютубе, ты настоящий молодец как ты собрал всю эту информацию и переварил и выдал в видосе я не понимаю) это настоящий тяжелый труд который никто не замечает

[@studentkais]

Ребят, Я хочу быть уверенным, чтобы все это работало, нужно ведь сервер, верно? Который надо покупать и каждый месяц оплачивать даже если сайт совсем не большой, правильно? Нельзя ли на локалке все это развернуть? Или тут все по-другому надо делать?

[@duoduoo6732]

пир ту пир будет работать если у пиров нет белых адресов?

[@GamerOneStrike]

Какой командой деплоится в хероку? У меня npm run start на локалке открывает 3001 порт, а на хероку вообще ничего, насколько я понимаю прослушивается другой порт.

[@romanmelnichenko1365]

Спасибо за ваш труд!) Первый пример 5:00-10:00 работает как-то неправильно: из хрома в ФФ сообщения не приходят, а наооборот все работает. Ошибок нету. Два раза повторил по видео - результат один и тот же. Я один с такой проблемой?

[@wisejs]

Спасибо за коммент! Думаю что вы упускаете какой-то момент. Проверял неоднократно в разных браузерах, все было ок.

[@xxcrypt234]

Спасибо!

[@ЭминШахабов]

привет. не запускается сервер, с чем может быть связано? выдает ошибку в терминале: Error: Cannot find module './src/socket/actions'

[@cryptoclubchannel]

Можешь помочь доработать чат? Есть некоторые нюансы, которые пока не могу поправить сам

[@hpc832]

Здравствуйте, подскажите пожалуйста, что за среда разработки?

[@nickolya00]

PyCharm вроде

[@corvus278]

5:00 - 10:00 -- не работает в firefox, однако между браузерами на хромиуме норм. Если погуглить, вроде объясняется в чём дело, но я не очень понял)

[@ЕвгенийЖ-н6м]

Всем привет, если делать то, что автор в начале видео в двух браузерах почему-то не срабатывает обработчик onmessage, в чем может быть причина? chanel.send("text") не работает , как исправить? Кто пробывал ?

[@elenap.7341]

почему работает только на Локал хосте? может это я дурак...

[@NeoJohnSmit]

Спасибо))

[@karmahchannel]

Как получить экран рабочего стола у другого клиента?

[@ДмитрийМельников-ъ3в]

Спасибо! Автор подскажи, при JOIN к созданной комнате поймал ошибку 'Error getting userMedia: DOMException: Could not start video source', код из хуков копипастил) если подключаться с одного браузера работает, а с разных вот падает) не встречал кто ?

[@wisejs]

Не встречал. Попробуй моё приложение поднять и посмотреть воспроизводится ли ошибка.

[@andranikhakobkekhvyan868]

сделал все как у вас плюс подключил turn сервер но иногда у некоторых бывает что не слышно и не видно, например подключены 4 человека и одного не слышат и не видят, проверил и по вашей ссылке у вас тоже есть такая проблема. Можете помочь? Если что можем созвонится. Заранее спасибо

[@uggarshorts]

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

[@wisejs]

Выполняйте команды под sudo или с Правами Администратора на Windows.

[@svetlanasmirnova5623]

Спасибо за видео! Присоединяюсь к вопросу Yusenka: при команде npx nodemon server.js запускается не наш сервер через порт 3001, а дефолтный сервер Реакта через 3000. Почему так происходит и как это исправить?

[@wisejs]

Запускайте Команды из package.json, а не на прямую. И server по дефолту запускается на 3001.

[@kihawi1627]

как я могу получить https сертификат и использовать его?

[@JohnDoe-ru9yp]

Как убрать эхо если с двух устройств говорят по громкой связи и стрим идёт немного с задержкой?

[@pavel2702]

Ребят если есть какой-то проект, где есть кнопка общения по видеосвязи, скажите как встроить данный проект, по нажатию на эту кнопку, есть вариант по роутерам, но как ссылаться на весь проект?

[@jetmix7097]

Подскажите, пожалуйста, что нужно поменять чтобы приложение располагалась не в корне, а например в папке /chat/ ?

[@wisejs]

В роутер path везде добавить префикс /chat

[@BbKk224]

Видео то годное, но вот на телефоне подсоединится не получается. Странно что оно вообще все работало два месяца назад без HTTPS

[@wisejs]

Проверял на iphone, все работало норм. Что и показал в превьюшке. Да и сейчас все ок.

[@BbKk224]

@@wisejs на Андроиде не работает к сожалению

[@wisejs]

@@BbKk224 В Хроме открываете?

[@BbKk224]

@@wisejs Да

[@MRratatyq]

Я что то не совсем понял как соединить 3-его человека....

[@ТвойДруг-н7и]

А как сделать не видео чат, голосовое p2p соединение?

[@muxa258]

У меня тут вопросик? А как сделать чтоб это все работало через и на другом домене я про доступ к камере и микрофону?

[@wisejs]

В айфрейме нужно указать атрибут: allow="display-capture".

[@dankryt]

Кто тут после бана дискорда?🤭

[@ОлександрТищенко-в3щ]

ні в кого CORS не блокував роботу додатку?

[@sergeinosachyev5320]

да да)) это же самое малое что можно показать, есть куча опций которые должны быть реализованы

[@wisejs]

Суть видеочата в видеосвязи. Остальное не так важно.

[@arrurp]

Спасибо за видео. Запускаю сервер и клиент коммандами из packages.json, в хроме в 1й вкладке создаю комнату. Во второй хочу посмотреть ее айди в списке, но она не появляется. Может у кого-то было подобное?

[@arrurp]

Решилось так: const socket = io(':3001/', options);

[@lynnpelly2277]

In app please

[@NeoJohnSmit]

Вау

[@lisofsky8151]

синтаксис устарел роутер реакт

[@bad4iz]

хероку сервер сдох?

[@КнязьВасилий-п8ж]

Спасибо!

[@wisejs]

Спасибо за коммент!