1. node-rtsp-stream
Through node call, ws mode, output is mPEG-TS video stream; This is then fed to canvas via JSMpeg; Disadvantages: Can only play one video at the same time Advantages: low delay,1s improvement: can be self-encapsulated twice, support multi-channel playback;
2. ke-rtsp
An HTML5 live video broadcast solution based on Media Source Extensions (MSE) technology. Node.js calls FFMPEG to wrap the RTSP stream, and then forwards the wrapped stream through socket. IO. Front-end HTML5 retrieves the stream data and feeds the stream bit by bit to the video tag through MSE for video playback. Supports Google Chrome, Firefox, Edge, and Android native browsers, but Internet Explorer is not supported. High-performance, supports simultaneous forwarding of multi-channel video, occupies few hardware resources. Low delay, 1s delay. Disadvantages: The video stream is fed to the video label at the beginning of video playing. The video label has a video buffer, resulting in loading waiting time every time a video is opened. Advantages: Supports multi-channel and multi-channel video playing at the same time. Optimization: If the project is not interested in the initial loading speed of the video, it can use the open source project directly.
3. ws-rtsp
Based on the implementation of the above two libraries, further unencapsulation; Use node to execute, front-end use JSMpeg playback functions: 1. Supports simultaneous multi-channel video playback; 2. Low latency (1s), using Canvas to draw video; 3. Video loading in seconds (the same RTSP video is opened in seconds when opened for the second time, and only waits for 1s when opened for the first time); Disadvantages: Not suitable for projects requiring very high picture quality Advantages: Supports multi-channel playback, low latency, and video on in seconds Disadvantages: picture quality needs to be improved
Install NPM I WS-RTSP
// node /app.js
var http = require('http');
var rtsp = require('ws-rtsp');
var server = http.createServer();
new rtsp.StreamingMediaServer(server);
server.listen(8089);
Copy the code// index.html < HTML >< body> <button onclick="player()"> play </button> <canvas ID ="canvas"></canvas> </body> <script type="text/javascript" src="./js/jsmpeg.min.js"></script> <script type="text/javascript"> function player() { new JSMpeg.Player('ws://localhost:8089/flv? url=cnRzcDovL2FkbWluOjEyMzQ1NmFhQDE3Mi4xNi4xLjcwL1N0cmVhbWluZy9DaGFubmVscy8xMDE=&channelid=2', { canvas: document.getElementById('canvas'), }) } </script> </html>Copy the code