Очень познавательное и крутое видео!!!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 - Наслаждаемся выполненой работой;
Не встречал еще такого наглядного объяснения любой темы с помощью обычной консоли браузера. Но оказалось, что благодаря такой подачи схватываешь на лету все. А то, как реализовать в коде - дело каждого, в пределах разумного, конечно) В общем, спасибо. Продвижения вам)🔥
Спасибо, за этот ролик!! Все максимально понятно и наглядно! После просмотра наконец-то понял как это работает WebRTC и смог реализовать видеозвонки в своем курсовом проекте.
Первое видео где подробно продемонстрирован код + процесс конекта пиров, я наконец смог увидеть сериализованеую строку подключения offer/answer , до этого просто гадал как это конектится.
Лучший туториал, что я встречала по этой теме, для тех, кому нужна быстрая реализация и общее понимание. Мне для диплома больше и не нужно, но для работы я бы хотела узнать подкапотье
Если кому интересно, чтобы пофиксить баг с рендером при подключении множества клиентов к комнате, стоит сделать отдельный компонент для видео, куда нужно прокинуть функцию, которая бы добавляла в useEffect srcObject к видео, подход предложенный автором с useStateWithCallback не всегда срабатывает
Спасибо) Для первого знакомства самое то) Если что писать --save не обязательно ибо по умолчанию он это делает, это если в девДепенденсис хочешь засунуть то там уже придется писать --save-dev
видео было очень интересным но одного не понял я и это как запустить этого программу через git hub если сможете можете сделать отдельную видео сделать для этого! спасибо за внимание!
Спасибо за ваш труд!) Первый пример 5:00-10:00 работает как-то неправильно: из хрома в ФФ сообщения не приходят, а наооборот все работает. Ошибок нету. Два раза повторил по видео - результат один и тот же. Я один с такой проблемой?
Даже в 2024 году этот гайд еще актуален, спасибо огромное! Но у меня проблема, устройства которые не имеют камеры/микрофона не могут видеть других участников. Как сделать чтобы даже если у пользователя отсутствует камера/микрофон он все равно видел других участников?
Ребят если есть какой-то проект, где есть кнопка общения по видеосвязи, скажите как встроить данный проект, по нажатию на эту кнопку, есть вариант по роутерам, но как ссылаться на весь проект?
Ребят, Я хочу быть уверенным, чтобы все это работало, нужно ведь сервер, верно? Который надо покупать и каждый месяц оплачивать даже если сайт совсем не большой, правильно? Нельзя ли на локалке все это развернуть? Или тут все по-другому надо делать?
@@wisejs попытался подключиться от браузера к браузеру заработало, раздаю интернет с телефона, попробовал с другом подключиться с другого города обменялись токенами но не получилось подключиться) что может быть? изза того что у меня не 4g?
Wisejs Frontend это видео - лучшее что я видел по вебу на ютубе, ты настоящий молодец как ты собрал всю эту информацию и переварил и выдал в видосе я не понимаю) это настоящий тяжелый труд который никто не замечает
Классный урок! Но код с Github репозитория не работает. У меня React сервер и клиент запускается, но соединение не устанавливается и list комнат тоже не отображается. Можете пожалуйста сказать в чем может быть ошибка?
Верно, там конфиг клиента настроен на хероку. В файле: /src/socket/index.js Нужно изменить: const socket = io('/', options); на const socket = io('localhost:3001', options);
Какой командой деплоится в хероку? У меня npm run start на локалке открывает 3001 порт, а на хероку вообще ничего, насколько я понимаю прослушивается другой порт.
Всем привет, если делать то, что автор в начале видео в двух браузерах почему-то не срабатывает обработчик onmessage, в чем может быть причина? chanel.send("text") не работает , как исправить? Кто пробывал ?
сделал все как у вас плюс подключил turn сервер но иногда у некоторых бывает что не слышно и не видно, например подключены 4 человека и одного не слышат и не видят, проверил и по вашей ссылке у вас тоже есть такая проблема. Можете помочь? Если что можем созвонится. Заранее спасибо
Спасибо за видео! Присоединяюсь к вопросу Yusenka: при команде npx nodemon server.js запускается не наш сервер через порт 3001, а дефолтный сервер Реакта через 3000. Почему так происходит и как это исправить?
Спасибо! Автор подскажи, при JOIN к созданной комнате поймал ошибку 'Error getting userMedia: DOMException: Could not start video source', код из хуков копипастил) если подключаться с одного браузера работает, а с разных вот падает) не встречал кто ?
Здравствуйте хорошее видео, но застрял на моменте с терминалом, хочу написать какой-то символ, а оно не дает. Пишет Все права защищены. Помоги пожалуйста...
Спасибо за видео. Запускаю сервер и клиент коммандами из packages.json, в хроме в 1й вкладке создаю комнату. Во второй хочу посмотреть ее айди в списке, но она не появляется. Может у кого-то было подобное?
Очень познавательное и крутое видео!!!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 - Наслаждаемся выполненой работой;
Не встречал еще такого наглядного объяснения любой темы с помощью обычной консоли браузера. Но оказалось, что благодаря такой подачи схватываешь на лету все. А то, как реализовать в коде - дело каждого, в пределах разумного, конечно)
В общем, спасибо. Продвижения вам)🔥
Парень, гигантское тебе спасибище, ты просто лучший!
Дай Бог тебе здоровья и процветания твоему каналу 🙂
Спасибо, за этот ролик!! Все максимально понятно и наглядно! После просмотра наконец-то понял как это работает WebRTC и смог реализовать видеозвонки в своем курсовом проекте.
Крутой контент, спасибо! Да и вообще на канале нетривиальные todo list, это круто
Спасибо, приятно слышать :)
Первое видео где подробно продемонстрирован код + процесс конекта пиров, я наконец смог увидеть сериализованеую строку подключения offer/answer , до этого просто гадал как это конектится.
Лучший туториал, что я встречала по этой теме, для тех, кому нужна быстрая реализация и общее понимание. Мне для диплома больше и не нужно, но для работы я бы хотела узнать подкапотье
спасибо, приятно слышать! в скором времени будет больше подобного контента)
@@wisejs, ты большой молодец!
Лучше использовать нативный js
@@beamway317лучше не использовать нативный там, где это займёт намного больше времени, нежели с использованием библиотеки или фреймворка)
Всем привет. Кто смотрит это видео в конце 2021 года - в новой версии вместо Switch нужно прописывать Routes.
А вместо useHistory - useNavigate
Это крутой контент! Спасибо!! Очень подробно и понятно!! Ещё раз спасибо, продолжай в том же духе))
Давно хотела написать видеочат. Спасибо 😉
и? написала?
@@вчераФикусПопилус застряла на моменте установки Nodejs
@@x4r7 а ты откуда знаешь?)
Мен, спасибо тебе! Реально круто разложил все по шагам. По итогу действительно получается видео-чат, который может работать как Zoom.
Если кому интересно, чтобы пофиксить баг с рендером при подключении множества клиентов к комнате, стоит сделать отдельный компонент для видео, куда нужно прокинуть функцию, которая бы добавляла в useEffect srcObject к видео, подход предложенный автором с useStateWithCallback не всегда срабатывает
Какая у вас была проблема?
Интересная тема и подана не на 10 часов это лайк!
Нереально крутой контент, не только актуальный, но и качественный. Спасибо!)
спасибо, что оценили!)
Очень всё доступно.Спасибо
Доброго времени суток только что начал смотреть и сразу лайкнул и подписался удачи
Спасибо большое за видео, такого контента очень не хватает, продолжайте в том же духе!
спасибо за поддержку!)
Очень интересно и познавательно. Тут и теория и практика в и класная подача. Побольше бы таких видео!
Ты самый крутой. Тебя обязательно благословят боги. Ты станешь круче чем IT-kamasutra
Великолепно, отличные приложения. Спасибо за контент и знания!
5:00 - 10:00 -- не работает в firefox, однако между браузерами на хромиуме норм. Если погуглить, вроде объясняется в чём дело, но я не очень понял)
Спасибо) Для первого знакомства самое то) Если что писать --save не обязательно ибо по умолчанию он это делает, это если в девДепенденсис хочешь засунуть то там уже придется писать --save-dev
-D тогда так уже чтоб еще короче
Спасибо большое. Отличная работа!
Спасибо за ваш отзыв!
Очень круто!
Спасибо большое из 2025
видео было очень интересным но одного не понял я и это как запустить этого программу через git hub если сможете можете сделать отдельную видео сделать для этого! спасибо за внимание!
Спасибо за ваш труд!)
Первый пример 5:00-10:00 работает как-то неправильно: из хрома в ФФ сообщения не приходят, а наооборот все работает. Ошибок нету. Два раза повторил по видео - результат один и тот же.
Я один с такой проблемой?
Спасибо за коммент! Думаю что вы упускаете какой-то момент. Проверял неоднократно в разных браузерах, все было ок.
Привет.
А как сделать демонстрацию экрана в браузере?
Спасибо большое за видео. Вместо client2 может быть сервер?
Спасибо за труд.
спасибо, что смотрите!
Ты лучший, отличный контент
просто вау! очень крутое видео!
Даже в 2024 году этот гайд еще актуален, спасибо огромное!
Но у меня проблема, устройства которые не имеют камеры/микрофона не могут видеть других участников.
Как сделать чтобы даже если у пользователя отсутствует камера/микрофон он все равно видел других участников?
ты вместо then и catch используешь finally. то есть, независимо есть ли у тебя камера или видео - ты подключаешься. это первое что пришло в голову
в каком текстовом редакторе ты работал?
Спасибо за ролик!
Ребят если есть какой-то проект, где есть кнопка общения по видеосвязи, скажите как встроить данный проект, по нажатию на эту кнопку, есть вариант по роутерам, но как ссылаться на весь проект?
привет. не запускается сервер, с чем может быть связано? выдает ошибку в терминале: Error: Cannot find module './src/socket/actions'
Ребят, Я хочу быть уверенным, чтобы все это работало, нужно ведь сервер, верно? Который надо покупать и каждый месяц оплачивать даже если сайт совсем не большой, правильно? Нельзя ли на локалке все это развернуть? Или тут все по-другому надо делать?
Очень круто, спасибо за информацию
Спасибо, круто что понравилось!
@@wisejs попытался подключиться от браузера к браузеру заработало, раздаю интернет с телефона, попробовал с другом подключиться с другого города обменялись токенами но не получилось подключиться) что может быть? изза того что у меня не 4g?
@@vladosononame6376 Скорее всего да. Через 3g невозможно установить p2p соединение. Нужен дополнительно сервер, который будет проксировать трафик.
Wisejs Frontend это видео - лучшее что я видел по вебу на ютубе, ты настоящий молодец как ты собрал всю эту информацию и переварил и выдал в видосе я не понимаю) это настоящий тяжелый труд который никто не замечает
Как получить экран рабочего стола у другого клиента?
Классный урок! Но код с Github репозитория не работает. У меня React сервер и клиент запускается, но соединение не устанавливается и list комнат тоже не отображается. Можете пожалуйста сказать в чем может быть ошибка?
Верно, там конфиг клиента настроен на хероку.
В файле:
/src/socket/index.js
Нужно изменить:
const socket = io('/', options);
на
const socket = io('localhost:3001', options);
@@wisejs Большое спасибо!
@@wisejs Подскажите, пожалуйста, что нужно поменять чтобы приложение располагалась не в корне, а например в папке /chat/ ?
а есть еще камеры с меньшим разрешением. ставите в getUserMedia свойчтво video в true
Классное видео, вопрос, можно ли сделать, чтобы подключаемый не транслировал свою камеру, а просматривал видео к кому подключается?
ну да, при подключении устанавливать значение false в настройках девайса камеры, либо просто пользоваться браузерной фичей
хороший туториал, правда нифига не понятно, но спасибо
спасибо! а что именно не понятно?)
Какой командой деплоится в хероку? У меня npm run start на локалке открывает 3001 порт, а на хероку вообще ничего, насколько я понимаю прослушивается другой порт.
пир ту пир будет работать если у пиров нет белых адресов?
Всем привет, если делать то, что автор в начале видео в двух браузерах почему-то не срабатывает обработчик onmessage, в чем может быть причина? chanel.send("text") не работает , как исправить? Кто пробывал ?
Как убрать эхо если с двух устройств говорят по громкой связи и стрим идёт немного с задержкой?
как я могу получить https сертификат и использовать его?
Здравствуйте, подскажите пожалуйста, что за среда разработки?
PyCharm вроде
Можешь помочь доработать чат? Есть некоторые нюансы, которые пока не могу поправить сам
сделал все как у вас плюс подключил turn сервер но иногда у некоторых бывает что не слышно и не видно, например подключены 4 человека и одного не слышат и не видят, проверил и по вашей ссылке у вас тоже есть такая проблема. Можете помочь? Если что можем созвонится.
Заранее спасибо
почему работает только на Локал хосте? может это я дурак...
Спасибо, годное видео
спасибо, дальше больше)
Подскажите, пожалуйста, что нужно поменять чтобы приложение располагалась не в корне, а например в папке /chat/ ?
В роутер path везде добавить префикс /chat
А как сделать не видео чат, голосовое p2p соединение?
Я что то не совсем понял как соединить 3-его человека....
Кто тут после бана дискорда?🤭
Спасибо за видео! Присоединяюсь к вопросу Yusenka: при команде npx nodemon server.js запускается не наш сервер через порт 3001, а дефолтный сервер Реакта через 3000. Почему так происходит и как это исправить?
Запускайте Команды из package.json, а не на прямую. И server по дефолту запускается на 3001.
ну ты красава !
У меня тут вопросик? А как сделать чтоб это все работало через и на другом домене я про доступ к камере и микрофону?
В айфрейме нужно указать атрибут: allow="display-capture".
Спасибо! Автор подскажи, при JOIN к созданной комнате поймал ошибку 'Error getting userMedia: DOMException: Could not start video source', код из хуков копипастил) если подключаться с одного браузера работает, а с разных вот падает) не встречал кто ?
Не встречал.
Попробуй моё приложение поднять и посмотреть воспроизводится ли ошибка.
Здравствуйте хорошее видео, но застрял на моменте с терминалом, хочу написать какой-то символ, а оно не дает. Пишет Все права защищены. Помоги пожалуйста...
Выполняйте команды под sudo или с Правами Администратора на Windows.
Видео то годное, но вот на телефоне подсоединится не получается. Странно что оно вообще все работало два месяца назад без HTTPS
Проверял на iphone, все работало норм. Что и показал в превьюшке. Да и сейчас все ок.
@@wisejs на Андроиде не работает к сожалению
@@BbKk224 В Хроме открываете?
@@wisejs Да
Спасибо!
Спасибо за коммент!
Спасибо за видео.
Запускаю сервер и клиент коммандами из packages.json, в хроме в 1й вкладке создаю комнату.
Во второй хочу посмотреть ее айди в списке, но она не появляется.
Может у кого-то было подобное?
Решилось так:
const socket = io(':3001/', options);
Спасибо))
ні в кого CORS не блокував роботу додатку?
да да)) это же самое малое что можно показать, есть куча опций которые должны быть реализованы
Суть видеочата в видеосвязи. Остальное не так важно.
In app please
хероку сервер сдох?
синтаксис устарел роутер реакт
Вау
Спасибо!