Webcam Broadcast using WebRTC and JavaScript
This document is created to describe
technologies used and process flow of Video Broadcasting project.
Basic knowledge: HTML5, CSS, JQuery/JavaScript, experience in
Online Chat application
Experience of Node.js would also be useful.
Installed on your development machine:
- Google Chrome or Firefox.
- Code editor.
- Web cam.
- Node.js with socket.io and express.
Node.JS
Node.js
is a platform built on Chrome's
JavaScript runtime for easily building fast, scalable network
applications. Node.js uses an event-driven, non-blocking I/O model that makes
it lightweight and efficient, perfect for data-intensive real-time applications
that run across distributed devices. We used Node.js for making signalling
server.
WebRTC
Its
a free, open project that enables web browsers with Real-Time
Communications (RTC) capabilities via simple JavaScript APIs. The WebRTC
components have been optimized to best serve this purpose.
Socket.IO
Aims to make Realtime Apps
possible in every browser and mobile device.
WEBRTC Video Conference
chat app requires some modules i.e. socket.io, express
INSTALLATION
1. create folder videoconf
2. open command prompt. Go to
path of videoconf folder.
3. command to install socket.io –
[path to nodejs folder]/npm install socket.io
4. command to install express -
[path to nodejs folder]/npm install express
Note:
socket.io and express modules will install by node.js in folder videoconf/node_modules.
Node.js
automatically assigns Apache’s Server Host to Socket.io.js and will use as
follows:
Client
side:
< script src = "http://locahost/socket.io/socket.io.js" > < /script>
Server.js
Server.js
file is used for Communication/Chat Server. Server.js makes socket connections,
receives messages to and from clients, can run any Javascript functionality on
Server side like making AJAX requests from Server side only, converting video
formats using FFMPEG command.
Server.js sample:
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
socket.emit('news', {
hello: 'world'
});
socket.on('my other event', function (data) {
console.log(data);
});
});
Note: any unique port can assign
Multiple servers can create on one platform using multiple server.js files but
need to give different ports.
5. RUN SERVER - [path to nodejs folder]/node [path to webchat
folder]/server.js.
6. Server will run in command prompt
7. on Linux to run server in background, I used: nohup command
Command to run any Linux
command oin background:
nohup node server.js
client.js sample:
<script src="http://localhost/socket.io/socket.io.js"></script>
<!-- socket.io.js will run on your localhost and this path is
automatically set by node.js. Its node.js magic. -->
var socket = io.connect('http://localhost');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', {
my: 'data'
});
});
navigator.getUserMedia
navigator.getUserMedia
function of Mozilla and Chrome bowser us used to open webcam in the browser.
RTCPeerConnection.js
Javascript class RTCPeerConnection is the WebRTC
API for video and audio calling.
HTML5
HTML5 is used at client side to get stream and
give stream to Video element.
Process flow for Webcam
Broadcasting:
1. We run server.js file on
server using node command[described above]. The code is in javascript. We can
use jquery also we need to install jquery module in node. We assign one unique
port in server.js which is used to make connection on client side.
2. On client side A user
using HTML5, JQuery and Socket.io creates socket connection on server using
unique port
3. Also A user make global
object of Conference class [conference.js].
4. On connect method, A
user asked to open the webcam.
5. Once browser gets A
user’s webcam stream, stream get attach with conference attach using
config.attachstream method.
6. Conference object sends
offer to other peer.
7. When other peer B user
connects to server with above procedure, he gets offer sent by A user peer
connection and also receives A user’s stream
8. B user in return sends
answer to A user that he joins him. But we are not asking B user to open the
webcam because he will be viewer only.
9. Once both users get
joined and B User receives A user’s webcam stream using socket.getremotestream
function, and puts stream in video element.
10. B user starts viewing
A’s webcam.
11. A’s stream stops when
user call leave function of conference.
12. If A user close his
browser, his stream will stop sending.
13. We can notify B user and
other peer connections that host has closed his webcam
14. Any number of peer
connections can be made. We need to test load.
File Structure in
Fleshcast for Webcam Broadcasting:
1.
Server.js - placed on root
2.
RTCPeerConnection.js and conference.js JS files placed in
assets/js folder
3.
HTML5 and Javascript code to make connection and open webcam is
done in golive method in sitemodels controller.
