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