View real-time monitoring with webrtc-streamer

webrtc-streamer

webrtc-streamer is a project that uses a simple mechanism to stream video capture devices and RTSP sources through WebRTC. It has a built-in small HTTP server to provide support for related interfaces required by WebRTC. Compared with the solution of ffmpeg +flv.js, the delay is reduced to about 0.4 seconds, the loading speed of the screen is also faster, the screen will not be paused after switching the browser tab, and the concurrency limitation in the same domain name of http1.1 is solved. (More than 6 videos can be played simultaneously in Google Chrome).

webrtc-streamer download

windows: download address , select the corresponding version to download, decompress and run [webrtc-streamer.exe]

centos7.4: For some environmental reasons, it is recommended to use it in docker

# Get webrtc-streamer in docker
docker pull mpromonet/webrtc-streamer

# Start the webrtc-streamer image
docker run -itd -p 8000:8000 --name webrtc-streamer mpromonet/webrtc-streamer
  • 1
  • 2
  • 3
  • 4
  • 5

test

The js files that need to be used in the page: [webrtcstreamer.js], [adapter.min.js], respectively in the [html] and [html\libs] directories of the windows version

Core code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<video id='video' style='object-fit:fill' controls autoplay autobuffer muted preload='auto'></video>
		
		<script type="text/javascript" src="./js/webrtcstreamer.js"></script>
		<script type="text/javascript" src="./js/adapter.min.js"></script>
		<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
		<script>var webRtcServer =null;        
		     
		    
		    //Load the video screen when the page loads 
		    window . onload  =  function ( )  {  
		    	//video: video control ID that needs to be bound 
		    	//192.168.1.226: IP of the device that starts webrtc-streamer 
		        webRtcServer =  new  WebRtcStreamer ( "video" , location .protocol + "//192.168.1.226:8000" ) ; // 
		        The rtsp address to view webRtcServer 
				.connect ( "rtsp://admin: [email protected] :554/h264/ch1/main/av_stream" ) ; }
		    
		    
			//Destroy the 
		    window when the page exits . onbeforeunload  =  function ( )  {  
				webRtcServer . disconnect ( ) ; 
			} 
		</ script > 
	</ body > 
</ 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

Common RTSP formats

#haikangcamera
rtsp:// < account > : < password > @ < IP > : < port, default 554 > /<video codec, h264/h265>/ < channel, ch1 start > / < stream, main  sub > / av_stream
: : Rtsp: // admin: [email protected]: 554 / h264 / ch1 / main / av_stream

#haikangNVR, the account password is NVR instead of the camera account password, distinguish the camera by the channel number, time format: add T after the day, add Z after the second
rtsp:// < account > : < password > @ < address > : < port, default 554 > /Streaming/tracks/ < The front is the channel number  D1: 1, the last two are the stream  01: main  02: sub > ? starttime= < start time, 20210814T173350Z > &endtime= < end time, 20210814T180000Z >
例:rtsp://admin:[email protected]:554/Streaming/tracks/101?starttime=20210818T171300Z&endtime=20210818T171400Z


#大华camera
rtsp:// < account > : < password > @ < IP > : < port, default 554 > /cam/realmonitor?channel= < channel, start1 > &subtype= < stream,0: main1  : sub >
例:rtsp://admin:[email protected]:554/cam/realmonitor?channel=1&subtype=0

#大华NVR, the account password is the NVR instead of the camera account password, the camera is distinguished by the channel number, the time format: add _ after the year, month, day, hour and minute
rtsp:// < account > : < password > @ < address > : < port, default 554 > /cam/playback?channel= < channel number, D1:1 > &subtype= < stream, 0: main  1: sub) > &starttime= < start time, 2021_08_18_14_13_41 > &endtime= < end time, 2021_08_18_14_15_41 >
例:rtsp://admin:[email protected]:554/cam/playback?channel=1&subtype=0&starttime=2021_08_18_10_52_00&endtime=2021_08_18_10_53_00
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

Related: View real-time monitoring with webrtc-streamer