Simple WebRTC using Nodejs

EditNew Pagenatsumi edited this page on 28 Mar · 1 revision

Nice to meet you, I'm Natsumi, and I was working as a part-time server developer for iTour.
This time, I would like to make the video chat that is used in iTour possible between browsers.

WebRTC

This video chat is realized using a technology called WebRTC.

There are many libraries for using WebRTC, but this timeSoraUsing
for JavaScriptSDKuse
以下sora.min.jsThe file will be an SDK file, so download it and place it in the specified directory.

Now let's write the programs for the sender and receiver.

Publisher

First, we will create the operation of the publisher that delivers the video chat.The directory structure will be as follows.
Ads
├── index.html
└── index.js
js
├── pub.js
└── sora.min.js

1 Create a markup (index.html) to display the video being distributed on the browser

Pub  Pub

2 Write JavaScript (js/pub.js) to distribute video
var debug = true; var sora = Sora.connection(“Sora server URL”); var metadata = ”; var publisher = sora.publisher(“Channel 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);})
Please rewrite the server URL and channel ID appropriately according to your environment.

3 Create a web server (index.js) using node.js

var fs = require('fs'); var http = require('http'); var url = require('url'); var path = require('path'); .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);

The program on the distributor side is now complete.
Next, we will create the receiver side

Subscriber

Next on the distributor side, we will create a receiver (subscriber)

There are many common parts in the code, but please note that they are slightly different

First is the directory structure
under
├── index.html
└── index.js
js
├── sub.js
└── sora.min.js The difference from the distributor side is that js/pub.js is sub.js

1 Write the markup for viewing the video that was distributed this time as well
Sub Sub
The difference from the distributor side is that the file read by the script tag is js/sub.js
Everything else is common

2 Write JavaScript (js/sub.js) to receive video chat
var debug = true; var sora = Sora.connection('URL of server using Sora', debug); var metadata = ”; subscriber = sora.subscriber(“Channel ID”, metadata); subscriber.connect() .then (stream => { document.querySelector('#local-video').srcObject = stream; }) .catch(e => { console.error(e); });

Please rewrite the server URL and channel ID accordingly.

3 Prepare a web server (index.js) with node.js
var fs = require('fs'); var http = require('http'); var url = require('url'); var path = require('path'); .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);
this is also the lastserver.listen(8000);
Please be careful because it is different from the distributor side due to the port.

Operation check

Let's start each program and check in the browser

Distributor

Start the server with the following command $ node index.js
in the browser after launchinglocalhost:8080If you access to and the image from the camera is flowing, it is a success

Receiver

Start the server with the same command
$ node index.js
In the browserlocalhost:8000It is a success if you can access and check the video from the distributor