Hello I'm working on a new project and I want to stream through a node web server a RTSP stream from my Network Camera. I don't want to steam using the ONFIV protocol but straight away the rtsp stream. So far I have tested the most of the projects that presented at github but I had no success. Does anyone now a documentation or a project that explain (server and html side) how to stream RTSP stream using a node javascript server to a HTML page?
Hello I'm working on a new project and I want to stream through a node web server a RTSP stream from my Network Camera. I don't want to steam using the ONFIV protocol but straight away the rtsp stream. So far I have tested the most of the projects that presented at github but I had no success. Does anyone now a documentation or a project that explain (server and html side) how to stream RTSP stream using a node javascript server to a HTML page?
Share Improve this question asked Apr 4, 2019 at 5:11 Nikos KalantasNikos Kalantas 1052 gold badges4 silver badges11 bronze badges4 Answers
Reset to default 2I am used the node-rtsp-stream NPM for streaming RTSP into HTML websites using web sockets. This below code streams the live frames into HTML via WebSocket which is running in the port 9999.
This is the simple NodeJS server code which is working properly. NOTE:
- If you have user name and password for your IP camera don't forget add user name and password in URL. EX:rtsp://username:password@ipaddress:port/h264_ulaw.sdp'
- Install FFmpeg in your machine and set the bin path of FFmepg to system environment.
Server.js:
var stream = require('node-rtsp-stream')
const express = require('express')
const app = express()
stream = new stream({
name: 'name',
streamUrl: 'your RTSP URL',
wsPort: 9999
})
For client side you don't need much, make sure you have jsmpeg.min.js, run the below code in browser. Once you run the server.js in node you will get the live stream in HTML page.
This HTML code uses JSMpeg Player to display the binary images in HTML from the WebSocket
NOTE: https://raw.githubusercontent./phoboslab/jsmpeg/master/jsmpeg.min.js client.html: I copied the raw jsmpeg.min.js from this link and paste it.
<html>
<body>enter code here
<div style="height: 30rem; width:30rem ;">
<canvas id="canvas" onclick="stop()"></canvas>
</div>
</body>
<script type="text/javascript" src="jsmpeg.min.js"></script>
<script type="text/javascript">
player = new JSMpeg.Player('ws://localhost:9999', {
canvas: document.getElementById('canvas') // Canvas should be a canvas DOM
element
})
function stop(){
player.stop()
}
</script>
</html>
Use node-rtsp-stream node module, install ffmpeg, set ffmpeg PATH OS wide. At the browser level use node module jsmpeg and display stream within a canvas element.
I have done that things using 'node-rtsp-stream-jsmpeg' package and installed ffmpeg
- Ubuntu
- Nodejs
{
const Stream = require('node-rtsp-stream-jsmpeg')
const options = {
name: 'streamName',
url: 'provide your rtsp URL',
wsPort: 3001
}
stream = new Stream(options);
stream.start();
}
The node-rtsp-stream modules only support http and requires an additional port. This solution is a bit convoluted but it works. The browsers are picky about the headers, what data format is sent and when.
http://blog.northfield.ws/streaming-rtsp-directly-to-browsers/