Nodejsを使った簡単WebRTC

EditNew Pagenatsumi edited this page on 28 Mar · 1 revision

はじめましてアルバイトでiTourのサーバ開発をしていたなつみです
今回はそのiTourの中でも使われているビデオチャットをブラウザ同士で出来るようにしていこうと思います。

WebRTC

今回のビデオチャットはWebRTCと言う技術を使って実現されています

WebRTCを使うためのライブラリは多々ありますが今回Soraを使い
JavaScript用のSDKを用います
以下sora.min.jsファイルはSDKファイルになりますのでダウンロードし指定のディレクトリに配置してください

それでは配信者側、受信者側のプログラムを書いていこうと思います


配信者(Publisher)

まずはビデオチャットを配信するpublisherの動作を作って行きます ディレクトリ構成は以下の様になります
pub
├── index.html
└── index.js
js
├── pub.js
└── sora.min.js

1 ブラウザ上に配信している映像を表示させるためのマークアップ(index.html)を作ります

<title>Pub</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./js/sora.min.js"></script>
    <script type="text/javascript" src="./js/pub.js"></script>
 
 
     <h1>Pub</h1>
     <video id="local-video" autoplay="" controls="" width="400" height="300">
     </video>

2 映像を配信するためのJavaScript(js/pub.js)を書きます
var debug = true; var sora = Sora.connection(“Soraを使うサーバのURL”); var metadata = ”; var publisher = sora.publisher(“チャンネルID”,metadata,{“video”:{“codec_type”:”H264″}}); navigator.mediaDevices.getUserMedia({audio: true,video:true}) .then(stream => publisher.connect(stream)) .then(stream => { document.querySelector(‘#local-video’).srcObject = stream; }) .catch(e => { console.error(e);})
サーバのURLとチャンネルIDはお使いの環境に合わせて適宜書き換えてください

3 node.jsを使ってWebサーバ(index.js)を作る

var fs = require('fs');
var http = require('http');
var url = require('url');
var path = require('path');
var server = http.createServer();

server.on('request',function(req,res){
  let url = req.url;
  let tmp = url.split('.');
  let jsSplit = tmp[tmp.length - 1];
  if(jsSplit === 'js'){
    let filePath = '.' + url;
    fs.readFile(filePath,function(err,data){
      res.writeHead(200,{'Content-Type':'text/javascript'});
      res.end(data,'UTF-8');
    });
  }
  else{
    var stream = fs.createReadStream('index.html');
    res.writeHead(200,{'Content-Type':'text/html'});
    stream.pipe(res);
  }
});

server.listen(8080);

以上で配信者側のプログラムは完成です
続いて受信者側も作っていきます

受信者(Subscriber)

配信者側の次は受信者(subscriber)を作っていきます

コード的には共通部分が多いですが少し違うので注意してください

まずはディレクトリ構成です
sub
├── index.html
└── index.js
js
├── sub.js
└── sora.min.js 配信者側との違いはjs/pub.jsがsub.jsになっています

1 今回も配信された映像を見るためのマークアップを書きます
<title>Sub</title> <meta charset=”utf-8″> <script type=”text/javascript” src=”./js/sora.min.js”></script> <script type=”text/javascript” src=”./js/sub.js”></script> <h1>Sub</h1> <video id=”local-video” autoplay=”” controls=”” width=”400″ height=”300″> </video>
配信者側との違いはscriptタグで読み込んでいるファイルがjs/sub.jsになっています
それ以外は共通となっています

2 ビデオチャットを受信するJavaScript(js/sub.js)を書く
var debug = true; var sora = Sora.connection(‘Soraを使うサーバのURL’, debug); var metadata = ”; subscriber = sora.subscriber(“チャンネルID”, metadata); subscriber.connect() .then(stream => { document.querySelector(‘#local-video’).srcObject = stream; }) .catch(e => { console.error(e); });

こちらもサーバのURLとチャンネルIDは適宜書き換えてください

3 node.jsでWebサーバ(index.js)を用意する
var fs = require(‘fs’); var http = require(‘http’); var url = require(‘url’); var path = require(‘path’); var server = http.createServer(); server.on(‘request’,function(req,res){ let url = req.url; let tmp = url.split(‘.’); let jsSplit = tmp[tmp.length – 1]; if(jsSplit === ‘js’){ let filePath = ‘.’ + url; fs.readFile(filePath,function(err,data){ res.writeHead(200,{‘Content-Type’:’text/javascript’}); res.end(data,’UTF-8′); }); } else{ var stream = fs.createReadStream(‘index.html’); res.writeHead(200,{‘Content-Type’:’text/html’}); stream.pipe(res); } }); server.listen(8000);
こちらも最後のserver.listen(8000);が
ポートの都合上配信者側と違っているので気をつけてください

動作確認

それぞれのプログラムを起動してブラウザで確認してみましょう

配信者

以下のコマンドでサーバを起動させます $ node index.js
起動したらブラウザでlocalhost:8080へアクセスをしカメラからの映像が流れていたら成功です

受信者

同じコマンドでサーバを起動させます
$ node index.js
ブラウザでlocalhost:8000へアクセスし配信者からの映像が確認できたら成功です