Inflearn English brand logo
Inflearn English brand logo
NEW
Programming

/

Front-end

How to handle media on the web: MediaStream API

Handling media (video, audio) on the web is now easier than ever! Learn the MediaStream API and WebRTC by following along step by step.

10 students are taking this course

Web API
webrtc
websocket
React
Java
Thumbnail

This course is prepared for Basic Learners.

What you will learn!

  • MediaStream API

  • WebRTC

  • WebSocket

  • Technologies applicable to real-world projects

How to handle media on the web MediaStream API

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

Learn about these things


First half

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.

Getting started with Section (1)

We'll explain the MediaStream API and WebRTC, and prepare a project to write an example.

Section (2) MediaStream Basics

Covers the basics of getting a MediaStream from a camera and microphone.

Section (3) Media Devices

Query your media devices and learn about them.

Section (4) MediaConstrainsts

Covers the various options that can be applied to MediaStream.

Section (5) Zoom

Let's implement the camera zoom function using MediaConstraints.

Section (6) Creating a MediaStream

Learn how to use the MediaPipe library to modify camera footage and create new MediaStreams.

Section (7) AudioContext

Learn the basics of handling audio, change the volume of sound by adjusting the gain value of audio, and draw audio graphs.

Section (8) WebRTC

Learn the basics of webrtc and how to send and receive media.

The second half

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.

FrontCapture

Section (9) Real Project - FrontEnd Part 1

Let's synthesize what we've learned so far and implement the FrontEnd functionality before joining a video call.

Section (10) Real Project - BackEnd

Create a server program to manage video chat using websocket.

Section (11) Real Project - FrontEnd Part2

It communicates directly with the server program, processes various events, and implements actual video chat functions.

Things to note before taking the class

Practice environment

  • Operating System: PC with Windows or macOS environment equipped with camera and microphone

  • Tools used: VisualStudio Code, npm, docker, java, maven

Learning Materials

  • Completed source code is provided for each section.

Note

  • To conduct a proper training session, you must prepare a PC with a camera and microphone installed.

Recommended for
these people!

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).

Hello
This is sir24is

새로운 것을 꿈꾸는 개발자 입니다.

Curriculum

All

85 lectures ∙ (11hr 49min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Become the author of a review that helps everyone!