
Interactive 3D Web Development with React Three Fiber (R3F)
taejaehan
React and Three.js in one go! From 3D basics to projects applicable in the field, and even optimization tips!
초급
Interactive Web, react-three-fiber, Three.js
Handling media (video, audio) on the web is now easier than ever! Learn the MediaStream API and WebRTC by following along step by step.
MediaStream API
WebRTC
WebSocket
Technologies applicable to real-world projects
How to handle media (video, audio) on the web!!
It's not difficult anymore.
Learning MediaStream API and WebRTC by following along step by step
Learn how to work with media using the MediaStream API.
Learn how to send and receive media using WebRTC
Let's create a video conferencing system using WebSocket.
Providing know-how and various tips acquired while conducting video conferencing projects in actual practice
Among the various Web APIs, we will cover the MediaStream API and learn the basics of WebRTC through examples.
We will proceed by creating a project using JavaScript and React.
We'll explain the MediaStream API and WebRTC, and prepare a project to write an example.
Covers the basics of getting a MediaStream from a camera and microphone.
Query your media devices and learn about them.
Covers the various options that can be applied to MediaStream.
Let's implement the camera zoom function using MediaConstraints.
Learn how to use the MediaPipe library to modify camera footage and create new MediaStreams.
Learn the basics of handling audio, change the volume of sound by adjusting the gain value of audio, and draw audio graphs.
Learn the basics of webrtc and how to send and receive media.
We will create a video conferencing system while working on a project close to practical use.
We will create a FrontEnd project using JavaScript and React and a BackEnd project using Java and Spring.
Let's synthesize what we've learned so far and implement the FrontEnd functionality before joining a video call.
Create a server program to manage video chat using websocket.
It communicates directly with the server program, processes various events, and implements actual video chat functions.
Operating System: PC with Windows or macOS environment equipped with camera and microphone
Tools used: VisualStudio Code, npm, docker, java, maven
Completed source code is provided for each section.
To conduct a proper training session, you must prepare a PC with a camera and microphone installed.
Who is this course right for?
Anyone interested in media on the web
For those who want to learn practical skills that can be used in real-world scenarios after learning basic grammar.
Anyone interested in WebRTC
For those who want to learn WebSocket
Need to know before starting?
JavaScript (Basic syntax knowledge required, understanding of Promises recommended)
React (not required, but a good understanding of the concept of State is helpful)
Java (Basic syntax knowledge required)
Spring (not required, but it's good to know how to configure a project with SpringBoot).
All
85 lectures ∙ (11hr 49min)
Course Materials:
22. Prepare UI
05:58
23. Zoom feature
03:42
24. Zoom On
12:00
51. Project Creation
04:32
52. Module setup
13:04
55. Camera device
06:43
56. Camera Device
16:27
59. Test Microphone
11:37
61. Entry feature
09:10
74. WebMediaClient
07:12
75. Transaction
14:54
76. Send Message
11:14
77. Entry function
15:24
78. Publish
15:44
79. Subscribe
07:52
81. Custom Hook
13:05
82. Exit function
10:22
85. Thank you
02:23
All
1 reviews
Limited time deal ends in 00:58:16
$52.80
23%
$69.30
Explore other courses in the same field!