[React] WebRTC x React でP2Pビデオ電話アプリを作ってみる #2 ~準備編~
# 概要 第2回は準備編です。環境構築などを進めます。
今回やること
- node.jsのインストール
- 作業ディレクトリの作成
- Reactのインストール
node.jsのインストール
Reactを使用するのにはnode.jsが必要です。このインストールはOSごとにやり方が違うので公式とかここ(Windows)とかここ(Mac)とかを参考にしてみてください。参考までに僕がインストールした手順を残しておきます。(僕のPCのOSはmacOS Montereyです。)
①nodebrewのインストール
brew install nodebrew
②node.js(最新版)のインストール
nodebrew install-binary latest
これでOKのはずです。
作業ディレクトリの作成
適当な場所に作業ディレクトリを作ります。 僕は、Documentsディレクトリ内にreact-webrtcというディレクトリを作成しました。
npm init -y
でpackage.jsonを作成しておきましょう。
Reactのインストール
Reactをインストールします。(Reactをインストールって言い方あっているのかとても不安です。教えてください詳しい方...)
npx create-react-app frontend
この後、
cd frontend
でfrontendディレクトリに移動した後
npm start
その後、ブラウザでhttp://localhost:3000にアクセスして のような画面が表示されればOKです。
まとめ
ひとまずこれで準備完了です。次回から製作に入る予定です。
次のページ→ [React] WebRTC x React でP2Pビデオ電話アプリを作ってみる #3 ~映像・音声取得編~ - やってみたらなんとかなる