やってみたらなんとかなる

プログラミングをする上で調べたこととかやったこととか

[React] WebRTC x React でP2Pビデオ通話アプリを作ってみる #1

WebRTC React

概要

最近見つけたWebRTCという技術と最近勉強したかったReactを使ってP2Pビデオ通話アプリを作ってみたいと思います。

今回すること

  • そもそもWebRTCって何？
  • どんなものを作るのか？

ここらへんをはっきりさせておきたいと思います。

そもそもWebRTCって何？

WebRTC (Web Real-Time Communications、ウェブリアルタイムコミュニケーション) は、ウェブアプリケーションやウェブサイトにて、仲介を必要とせずにブラウザー間で直接、任意のデータの交換や、キャプチャしたオーディオ／ビデオストリームの送受信を可能にする技術です。 WebRTC に関する一連の標準規格は、ユーザーがプラグインやサードパーティ製ソフトウェアをインストールすることなく、ピア・ツー・ピアにて、データ共有や遠隔会議を実現することを可能にします。

WebRTC API - Web API | MDN

つまり、ブラウザ間での直接データ交換を可能にする技術という感じです。
しかもほとんどのブラウザに標準で入っている機能なのでjavascriptやTypescriptで記述するだけで使えちゃいます。
大体次の様なステップで使うみたいです。(かっこの中は使うメソッドなど)

  1. ビデオとオーディオの取得 (getUserMedia)

  2. ピア接続 (RTCPeerConnection)

どんなものを作るのか？

今回は簡単なビデオ通話アプリを作成します。 部屋指定をして、同じ部屋にいれば1対1でビデオ通話ができるアプリを目指します。 余力があればチャット機能も実装したいと思います。

次のページ→ [React] WebRTC x React でP2Pビデオ電話アプリを作ってみる #2 ~準備編~ - やってみたらなんとかなる