Let me tell you one thing that real time video streaming in Node.js is super simple. When the question comes in our mind to stream data we think Ohhh.. this is very big task and you overhead yourself.
In this article I'll explain you that you can stream your data with few lines of code by using sockets.
I'll be using socket library to stream the data in real time. I also will be using express module for just to manage my routes and to defining my static directories.
I'm assuming that you have installed Node.js and NPM at your system.
First of all you need to create package.json which will be keeping your app info and app dependency modules info.
package.json
1
2
3
4
5
6
7
8
|
{
"name": "Video-Stream",
"version": "0.0.1",
"dependencies": {
"socket.io": "*",
"express": "*"
}
}
|
Now if you'll run the below command it'll install all the dependencies by node package manager(NPM).
1
|
sudo npm install
|
Now create a javascript file just like I have created app.js.
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
var express = require("express");
var app = new express();
var http = require("http").Server(app);
var io = require("socket.io")(http);
var port = process.env.port || 3000;
app.use(express.static(__dirname + "/public" ));
app.get('/',function(req,res){
res.redirect('index.html');
});
io.on('connection',function(socket){
socket.on('stream',function(image){
socket.broadcast.emit('stream',image);
});
});
http.listen(port,function(){
console.log("Server running at port "+ port);
});
|
Here in this JavaScript file first we created a server which is listening 3000 port. I also have broad casted the streaming data i.e image through the socket.
Create a a new directory named as 'public' which we have defined in our app.js.
Here is the public/index.html
1
2
|
<a href="emit.html">Start Video Stream</a>
<a href="visualize.html">Visualize Video Stream</a>
|
public/emit.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
</head>
<body>
<video src="" id="video" style="width:700px; height: 350px;" autoplay="true"></video>
<canvas style="display:none;" id="preview"></canvas>
<div id="logger"></div>
</body>
<script type="text/javascript">
var canvas = document.getElementById("preview");
var context = canvas.getContext('2d');
canvas.width = 900;
canvas.height = 700;
context.width = canvas.width;
context.height = canvas.height;
var video = document.getElementById("video");
var socket = io();
function logger(msg){
$('#logger').text(msg);
}
function loadCamera(stream){
try {
video.srcObject = stream;
} catch (error) {
video.src = URL.createObjectURL(stream);
}
logger("Camera connected");
}
function loadFail(){
logger("Camera not connected");
}
function viewVideo(video,context){
context.drawImage(video,0,0,context.width,context.height);
socket.emit('stream',canvas.toDataURL('image/webp'));
}
$(function(){
navigator.getUserMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msgGetUserMedia );
if(navigator.getUserMedia){
navigator.getUserMedia({video: true, audio: false},loadCamera,loadFail);
}
setInterval(function(){
viewVideo(video,context);
},5);
});
</script>
</html>
|
Here I have included socket.io.js library. Apart from socket I also have used HTML 5 video player for displaying the video. You also can see the preview of your video right now I have hidden that.
On document ready we will get the user media with the help of navigator or you can say we load the camera here. After that I'm passing the video and context after each 5 milliseconds to viewVideo() function.
Inside viewVideo() function we draw the image and emit the image as a stream.
Now the second screen comes to the picture to accept the image stream. For second screen I have created an another HTML file.
public/visualize.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
</head>
<body>
<img id="play">
<div id="logger"></div>
</body>
<script type="text/javascript">
var socket = io();
socket.on('stream',function(image){
$('#play').attr('src',image);
$('#logger').text(image);
});
</script>
</html>
|
You noticed that we are emitting the stream from emit.html and now in visualize.html on socket stream I'm setting the image data by using JQuery. In logger div I'm also displaying the stream data.
After all setup run you project with following command:
1
|
node app.js
|
I have implemented the code, following each step, but it is not clear, after typing "node app.js", how to visualize the streaming..
First of all: which is the source of the stream? can I use a webcam?
Secondly: which is the webpage to visualize the streaming?
Thank you very much..
Hi i have simple socket server in nodejs. the server is getting data(includes base64 encoded images) continuously. After running almost 7-8 hours am getting a memory leak issue in nodejs. Node:6.10.0 socket 2.1.1
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
console.log('a user connected');
socket.on("live",function(data){
io.emit("detection",data)
})
});
This is very good blog. Can I know one thing how can I save the streaming video in nodejs.
how can we store video in the database
has your issue resolve?
Great Tutorial,
I needed to change :
into
and
video.src=window.URL.createObjectURL(stream);
into
video.srcObject = stream;
and it worked perfectly!
thank you.
F.
Thanks!!! I was having trouble with that <3
use video.srcObject = stream; not video.src = window.URL.createObjectURL(stream); for the emit.html line 32 for updated browsers
In this example ,we are constantly sending images to server and receiving that ..what if there are 5-6 streamers.In that case socket can handle that image load? I am trying to make live streaming application but this question arises for me.Please let me know if you have any solution for this
I tried to enable the audio, but the audio cannot be sent to the client's side
It is working on localhost but not remotely, im working on AWS EC2.
It might be possible that some dependency isn't installed yet at EC2 server. Make sure node server is running.
It requires SSL to run it on cloud server
Yes, Now your webcam works only when your domain has SSL. It has been implemented by the browsers to consider security issues.
how to solve video broadcast not sound?
it is working fine for me without audio , but the audio cannot be sent to the client's side..please solve this & mail me