Главная страницаКатегория react.js React и WebRTC 2023 & Приложение для обмена местоположения с видеочатом

React и WebRTC 2023 & Приложение для обмена местоположения с видеочатом

Name: React и WebRTC 2023 & Приложение для обмена местоположения с видеочатом
Price: 13 USD
Rating: 3.3 (3 reviews)

React and WebRTC 2023 & Sharing Location App with Video Chat

udemy

★3.3 (всего оценок - 3)

Продолжительность

8 ч 11 мин

Категория

React.js

Количество уроков

86 Видео

Дата добавления

10 мая 2023 г., 14:31

Язык

Английский

Дата выхода

23 февр. 2023 г., 01:00

Дата обновления

29 апр. 2026 г., 17:48

Хотите создать современное приложение с видеосвязью и обменом геолокацией? В этом курсе вы шаг за шагом освоите React, WebRTC, SocketIO и Google Maps API, развивая настоящий продакшн‑проект. Материал ориентирован на практику — вы сразу пишете код и понимаете, как работают ключевые технологии реального времени.

Что вы изучите в рамках курса

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

Основные технологии курса

WebRTC и собственная реализация PeerJS
React для создания динамичного UI
SocketIO для чата и передачи данных
Google Maps API для отображения геопозиции
Node.js и Express.js для backend‑логики

Структура и этапы разработки приложения

Каждый этап курса разработан так, чтобы вы ясно понимали, что и зачем делаете. Теория объясняется на примерах, сразу же закрепляясь в реальном приложении.

Подготовка окружения

Вы настроите проект, установите необходимые пакеты и создадите базовую структуру приложения на React с сервером Node.js.

Создание пользовательского интерфейса

На этом этапе вы построите интерфейс клиента: страницы, компоненты и логику рендеринга карты Google Maps.

Интеграция Google Maps API

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

Реализация функциональности реального времени

Вы добавите обмен сообщениями, обновление позиций пользователей и обработку событий с помощью SocketIO.

Чат между пользователями

Создайте простой и удобный чат, работающий через веб‑сокеты с минимальными задержками.

Обмен местоположением

Настройте передачу текущей геопозиции пользователя и отображение других участников на карте.

WebRTC и прямые видеозвонки

Вы подключите собственной сервер PeerJS, разберёте устройство WebRTC и реализуете видеовызовы между пользователями без посредников.

Почему этот курс полезен

Подходит для разработчиков, желающих добавить в свои проекты функции реального времени.
Объясняет сложные концепции простым языком.
Даёт практический код, который можно использовать в собственных приложениях.
Развивает навыки работы с популярными frontend и backend технологиями.

Дополнительные материалы и углубление в тему

Для тех, кто хочет глубже изучить WebRTC, в курсе доступен отдельный теоретический модуль о внутренней работе Peer-to-Peer соединений.

После прохождения курса вы сможете самостоятельно создавать приложения с видеосвязью, картами и обменом данными в реальном времени. Курс поможет вам уверенно применять полученные знания в собственных проектах и понимать, как устроены современные веб‑приложения.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:03:19
Application Preview
Урок 2. 00:02:15
Node.js installation
Урок 3. 00:02:23
Creating Server Project
Урок 4. 00:06:53
Creating Express Server
Урок 5. 00:05:37
Adding Socket.IO Server
Урок 6. 00:02:56
Testing Connection with Postman
Урок 7. 00:04:31
Disconnected Event Handler
Урок 8. 00:01:00
More about Events Handlers
Урок 9. 00:04:12
Creating React Application
Урок 10. 00:08:21
Connecting with Redux State Management
Урок 11. 00:05:39
Routing with react-router-dom
Урок 12. 00:07:26
Creating Login Page View
Урок 13. 00:04:02
Handling Username Input
Урок 14. 00:06:26
Handling Login Button
Урок 15. 00:03:48
Code Refactoring
Урок 16. 00:07:23
Getting Geo Location
Урок 17. 00:01:52
Disabling Button on Location Error
Урок 18. 00:03:47
Saving Location In Store
Урок 19. 00:05:07
Redux Store Debugging
Урок 20. 00:05:52
Getting Fake Location
Урок 21. 00:09:45
Connection with Socket.IO Server
Урок 22. 00:07:27
Storing Online Users
Урок 23. 00:08:33
Login functionality
Урок 24. 00:11:38
Emitting Event with Online Users
Урок 25. 00:07:46
Saving Online Users In Store
Урок 26. 00:06:11
Removing Disconnected User From Store
Урок 27. 00:03:30
Testing Functionality Of Removing Disconnected User
Урок 28. 00:08:25
Rendering Google Map
Урок 29. 00:13:06
Rendering Map Markers
Урок 30. 00:02:30
Rendering Username Label
Урок 31. 00:04:34
Creating User Card
Урок 32. 00:06:49
Connecting User Info Card
Урок 33. 00:05:21
Calculating Distance Between Two Coordinates
Урок 34. 00:04:20
Converting Number to Two Decimals
Урок 35. 00:05:05
Creating Chat Button
Урок 36. 00:07:03
Preparing Store For Messages
Урок 37. 00:06:47
Creating Dummy Chatboxes
Урок 38. 00:06:19
Adding Nav Bar to Chatbox
Урок 39. 00:01:45
Adding Messages Container
Урок 40. 00:02:06
Adding New Message Input
Урок 41. 00:05:27
Handling User Input
Урок 42. 00:06:31
Rendering Dummy Messages
Урок 43. 00:06:19
Displaying Real Chatboxes
Урок 44. 00:03:22
Closing Chatboxes
Урок 45. 00:18:29
Appending Local Messages
Урок 46. 00:02:56
Fixing Bug With Messages
Урок 47. 00:09:45
Sending Messages To Other Users
Урок 48. 00:04:28
Displaying Messages At Server Side
Урок 49. 00:04:50
Automatically Opening Chatboxes
Урок 50. 00:04:02
Messages Scroll Automatically
Урок 51. 00:00:55
Introduction To Video Rooms
Урок 52. 00:05:23
Preparing Store For Video Rooms
Урок 53. 00:07:03
Create Room Button
Урок 54. 00:07:02
Creating Join Room Buttons
Урок 55. 00:10:48
Informing Server About New Room Created
Урок 56. 00:02:27
Fixing Bug With Emitting Event With New Room
Урок 57. 00:06:17
Broadcasting Rooms List to All Users
Урок 58. 00:03:28
Setting Real Rooms In Store
Урок 59. 00:04:48
Rendering Real Rooms
Урок 60. 00:13:57
Getting Access To Local Stream
Урок 61. 00:08:38
Displaying Local Video
Урок 62. 00:04:03
PeerJS Introduction
Урок 63. 00:04:31
Creating Peer Object
Урок 64. 00:08:11
How Peer Server Works
Урок 65. 00:08:18
Connecting With Peer Server
Урок 66. 00:07:51
Preparing Peer Implementation For Calling
Урок 67. 00:11:00
Joining Video Room
Урок 68. 00:09:17
Updating Rooms At Server Side
Урок 69. 00:01:08
Testing Broadcasting Rooms After Login Event
Урок 70. 00:03:36
Connecting (Calling) With Second User
Урок 71. 00:04:03
Displaying Remote Stream
Урок 72. 00:06:37
Creating Video Room Buttons
Урок 73. 00:05:10
Leaving Room At Initiator Side
Урок 74. 00:01:39
Testing Leaving Room
Урок 75. 00:07:36
Server Side Logic Of Leaving Room
Урок 76. 00:11:17
Closing Peer Connection At Both Sides
Урок 77. 00:12:28
Handling Case Of ,,Dirty Leave"
Урок 78. 00:10:19
Microphone and Camera Buttons
Урок 79. 00:03:19
Muting And Switching Camera Off
Урок 80. 00:01:39
What is WebRTC ?
Урок 81. 00:01:17
What is Signaling Server ?
Урок 82. 00:01:11
What is STUN Server ?
Урок 83. 00:02:07
What is TURN Server ?
Урок 84. 00:01:37
What is SDP ?
Урок 85. 00:01:44
What are ICE Candidates ?
Урок 86. 00:03:12
How To Establish Direct Connection Between Peers

Автор - udemy

udemy

Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.

+197

Комментарии