ホーム > プログラミング > ビデオチャットアプリを作る > 01. 開発環境を準備する

01. 開発環境を準備する



開発環境を準備します。
Node.js、Express、Socket.IO をインストールし、簡単なウェブアプリを作成し、動作を確認します。

解説

WebRTC を用いて、ビデオチャットアプリを作成するために、Node.js をインストールします。加えて、Node.jsのパッケージである、Express、Socket.IO をインストールします。

Node.js
JavaScript実行環境の1つです。Node.js を利用するとウェブアプリケーションを作成することができます。
Express
最も一般的なNode.js ウェブフレームワークです。Express を利用するとウェブアプリケーションを簡単に作成することができます。
Socket.IO
WebSocketを用いたライブラリです。Socket.IO を利用するとリアルタイムにサーバーとクライアントが通信するウェブアプリケーションを簡単に作成することができます。

Nodeを用いて、Webアプリを作成するために、最低限すべきことは以下です。

上記以外に、今回やっていることは、以下です。

Node.jsのインストール

Node.js をインストールしていない場合は、まず、Node.js をインストールします。

Node.js がインストール済みかは、「node --version」コマンドで確認できます。

Windows の場合の例。


Raspberry Pi の場合の例。


Node.js がインストールされていない、もしくは、インストールされているNode.js のバージョンが古い場合は、Node.js をインストールします。

Raspberry Pi の場合は、以下コマンドで、Node.js をインストールします。


Windows の場合は、以下ページより、Node.js インストーラーをダウンロードし、インストールします。
Node.js公式サイトのダウンロードページ

ビデオチャットアプリ用のフォルダの作成

ビデオチャットアプリ用のフォルダとして、「MyVideoChat」というフォルダを作成します。

Node.jsのパッケージ管理の初期化

Node.jsのライブラリ「Express」「Socket.IO」のインストールに先立ち、パッケージ管理の初期化をします。

「MyVideoChat」フォルダに移動し、以下コマンドを実行します。



package name : 何も入力せずエンターキーを押します ( myvideochatとなる )
version : 何も入力せずエンターキーを押します ( 1.0.0となる )
description : 何も入力せずエンターキーを押します (空となる)
entry point : server.js と入力しエンターキーを押します
test command : 何も入力せずエンターキーを押します (既定のtest コマンドが設定される)
git repository : 何も入力せずエンターキーを押します (空となる)
keywords : 何も入力せずエンターキーを押します (空となる)
author : 何も入力せずエンターキーを押します (空となる)
license : 何も入力せずエンターキーを押します (ISCとなる)

Is this OK? : y を入力しエンターキーを押します。

Windows の場合の例。


「MyVideoChat」フォルダに、「package.json」ファイルが生成されます。
「package.json」ファイルの内容は以下のような内容になります。

Node.jsのパッケージのインストール

「MyVideoChat」フォルダに、Node.jsのライブラリパッケージ 「Express」と「Socket.IO」 をインストールします。

ビデオチャットアプリ用のフォルダに移動し、以下コマンドを実行します。





「MyVideoChat」フォルダに、「node_modules」フォルダが生成され、フォルダ内に、Node.jsのパッケージ 「Express」と「Socket.IO」および関連パッケージがインストールされます。

「package.json」ファイルの内容は以下のような内容になります。
(dependenciesセクションが追加され、ExpressとSocket.IO に関する記述が追加されます。)

サーバー起動処理

「MyVideoChat」フォルダに、「server.js」というファイルを作成します。

「server.js」 の内容を以下のようにします。

動作確認

node でサーバーを起動します。
「MyVideoChat」フォルダで、以下のコマンドを実行します。



「Server on port 1337」と表示されます。

起動したサーバーは、「Ctrl + C」で終了します。

公開フォルダ・ファイルの作成と、公開フォルダの指定

「MyVideoChat」フォルダに、「public」というフォルダを作成します。

「public」フォルダに、「index.html」というウェブページファイルを作成します。

「public/index.html」 の内容を以下のようにします。


「server.js」 の「サーバーの起動」処理の前に、以下の「公開フォルダの指定」処理を追加します。


「server.js」 全体としては、以下のようにします。

動作確認

node でサーバーを起動します。

ブラウザから、「localhost:1337」にアクセスします。


「My Video Chat」と表示されます。

起動したサーバーは、「Ctrl + C」で終了します。

ダウンロード

サンプルプログラム

デモ

デモ(Google App Engine) : https://my-video-chat.appspot.com/app01/index.html
デモ(Heroku) : https://myvideochat1234.herokuapp.com/app01/index.html

関連ページ

次項目 : 02. カメラとマイクの開始と停止


ご意見、ご感想、ご質問、ご要望等は、「コメントを投稿する」もしくは「ホーム > コンタクト」よりお願いいたします。
内容の誤り、誤字脱字、リンクミスなどの問題点を発見された場合には「コメントを投稿する」もしくは「ホーム > コンタクト」より連絡していただけると幸いです。


Copyright (c) 2005-2018 Nobuki HIRAMINE All rights reserved.