Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Front-end

Web でメディアを扱う方法 MediaStream API

Webでメディア(ビデオ、オーディオ)を扱う方法!! もう難しくありません。 一つ一つ 따라しながら 배우는 MediaStream API と WebRTC

  • sir24is
websocket
WebRTC
mediastream
Web API
webrtc
React
Java

こんなことが学べます

  • MediaStream API

  • WebRTC

  • WebSocket

  • 実戦プロジェクトに適用できる技術

Web でメディアを扱う方法 MediaStream API

Webでメディア(ビデオ、オーディオ)を扱う方法!

今は難しくありません。

一つ一つずつ従いながら学ぶMediaStream APIとWebRTC

  • MediaStream APIを介してメディアを扱う方法を学ぶ

  • WebRTCを使用してメディアを送受信する方法を学ぶ

  • WebSocketを使用してビデオ会議システムを作成します

  • 実際の実務でテレビ会議プロジェクトを進めながら得意なノウハウや各種ヒントの提供

このようなことを学びます。


前半

複数の Web API のうち MediaStream API について取り上げ、WebRTC の基本的な内容を例を進めながら学習していきます。

JavaScriptとReactを使用したプロジェクトを作成して進めます。

セクション (1) はじめに

MediaStream APIとWebRTCについて説明し、サンプルを作成するためのプロジェクトを準備します。

セクション (2) MediaStream 基本

カメラとマイクロからMediaStreamを取得する基本的な方法について説明します。

セクション (3) Media デバイス

メディアデバイスを検索し、デバイスの情報を学びます。

セクション(4) MediaConstrainsts

MediaStreamに適用できるさまざまなオプションについて説明します。

セクション (5) Zoom

MediaConstraintsを使ってカメラのズーム機能を実装してみます。

セクション(6) MediaStreamの作成

MediaPipeライブラリを使用してカメラの画像を修正し、新しいMediaStreamを作成する方法を学びます。

セクション(7) AudioContext

Audioを扱う基本的な方法を学び、AudioのGain値を調整して音の大きさを変更し、Audioグラフを描きます。

セクション(8) WebRTC

webrtcの基本的な内容を学び、メディアを送受信する方法を学びます。

後半

実務に近いプロジェクトを進めながらテレビ会議システムを作成します。

JavaScriptとReactを使用したFrontEndプロジェクトと、JavaとSpringを使用したBackEndプロジェクトを作成して進めます。

セクション(9)本番プロジェクト - FrontEnd Part 1

以前に学んだ内容を総合して、ビデオ会話に参加する前のFrontEnd機能を実装します。

セクション(10)本番プロジェクト - BackEnd

websocket を使用して、ビデオ会話を管理するためのサーバープログラムを作成します。

セクション(11)本番プロジェクト - FrontEnd Part2

サーバープログラムと直接通信を行い、各種イベントを処理し、実際の画像会話機能を実装します。

受講前の注意

練習環境

  • オペレーティングシステム:カメラとマイクを搭載したWindowsまたはmacOS環境のPC

  • 使用ツール: VisualStudio Code, npm, docker, java, maven

学習資料

  • 各セクションごとに完成したソースコードを提供します。

注意事項

  • カメラとマイクが設置されたPCを準備しなければ、きちんとした練習を進めることができます。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • ウェブで扱うメディアに関心のある方

  • 基本文法を学習した後、実践で使えるスキルを身につけたい方

  • WebRTCにご興味のある方

  • WebSocketを学びたい方

前提知識、
必要でしょうか?

  • JavaScript(基本的な文法に関する知識が必要で、Promiseの概念をご存知だとより理解しやすいでしょう)

  • React (必須ではありませんが、Stateの概念をご存知だと理解しやすいです)

  • Java(基本的な文法の知識が必要です)

  • Spring (必須ではありませんが、SpringBootでプロジェクトを構成する方法をご存知であれば尚良いです)

こんにちは
です。

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

カリキュラム

全体

85件 ∙ (11時間 49分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

1件

5.0

1件の受講レビュー

  • junes_dept님의 프로필 이미지
    junes_dept

    受講レビュー 1

    平均評価 5.0

    5

    31% 受講後に作成

    ¥10,504

    似ている講座

    同じ分野の他の講座を見てみましょう!