01. 開発環境を準備する

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

解説

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

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

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

サーバー側で動作するプログラムを作成する。( server.js )
クライアント側で表示させるウェブページを作成する。（ public/index.html )
クライアント側で動作するプログラムを作成する。( public/client.js )

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

静的なウェブページを表示するサーバー側プログラムを作成する。( server.js )
静的なウェブページを作成する。（ public/index.html )

Node.jsのインストール

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

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

Windows の場合の例。

Raspberry Pi の場合の例。

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

Raspberry Pi の場合は、以下コマンドで、Node.js をインストールします。
sudo apt update sudo apt install -y npm

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

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

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

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

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

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

npm init

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」ファイルの内容は以下のような内容になります。
{ "name": "myvideochat", "version": "1.0.0", "description": "", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

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

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

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

npm install express --save

npm install socket.io --save

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

「package.json」ファイルの内容は以下のような内容になります。
（dependenciesセクションが追加され、ExpressとSocket.IO に関する記述が追加されます。）
{ "name": "myvideochat", "version": "1.0.0", "description": "", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "express": "^4.17.1", "socket.io": "^2.3.0" } }

サーバー起動処理

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

「server.js」の内容を以下のようにします。
"use strict"; // 厳格モードとする // モジュール const express = require( "express" ); const http = require( "http" ); // オブジェクト const app = express(); const server = http.Server( app ); // 定数 const PORT = process.env.PORT || 1337; // サーバーの起動 server.listen( PORT, () => { console.log( "Server on port %d", PORT ); } );

動作確認

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

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

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

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

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

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

「public/index.html」の内容を以下のようにします。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My Video Chat</title> </head> <body> <h1>My Video Chat</h1> </body> </html>

「server.js」の「サーバーの起動」処理の前に、以下の「公開フォルダの指定」処理を追加します。
// 公開フォルダの指定 app.use( express.static( __dirname + "/public" ) );

「server.js」全体としては、以下のようにします。
"use strict"; // 厳格モードとする // モジュール const express = require( "express" ); const http = require( "http" ); // オブジェクト const app = express(); const server = http.Server( app ); // 定数 const PORT = process.env.PORT || 1337; // 公開フォルダの指定 app.use( express.static( __dirname + "/public" ) ); // サーバーの起動 server.listen( PORT, () => { console.log( "Server on port %d", PORT ); } );

動作確認

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

01. 開発環境を準備する

解説

Node.jsのインストール

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

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

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

サーバー起動処理

動作確認

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

動作確認

ダウンロード

デモ

関連ページ