How to play RTSP stream from ip video camera and NVR on user web page

user_18274493 0
Viewed 2324

I want to play RTSP stream from ip video cameras (MP4, H264) on my intranet web page, I use React. I have 12 cameras and NVR. I did not find a way to do this without an intermediate server (Webrtc is not suitable), that spends resources on transcoding h264 stream to the mjpeg. If I set a high resolution and quality of the stream, then a lot of resources are spent on transcoding, and most importantly, the streaming of mjpeg images takes a lot of traffic.

Is there a way or solution to stream from the ip camera directly to the web page so that the decoding is on the user's webbrowser side. This will free the intermediate server from a heavy load for big streams. It is necessary that the playback work on mobile phones.

Thanks for the answer.

playback rtsp mp4 h.264 browser
2 Answers

There is no way to stream RTSP camera's H264 video directly to web browser. But cameras support outputting still jpeg images - you can create a webpage that will display such an image from a camera every 200ms or so.

If you are not happy with the above solution, you must use a media server in between, which will pull RTSP stream from the camera and will convert it to some protocol that browser understands. You are mistaken in one thing: no video transcoding is involved. I don't know why WebRTC is not an option for you, but most media servers will offer 4 types of output:

Low latency:

  • WebRTC
  • Websockets to MSE

High latency:

  • HLS
  • MPEG-Dash

All these methods do NOT require transcoding of your original H264 video, encoded by RTSP camera/NVR. Some media servers you can use: Unreal Media Server, Wowza, Janus.

Live demo: http://www.umediaserver.net/umediaserver/demos.html

user_13902080

No browser has native RTSP support, so if you want decoding to happen on the end user side, then you'll have to write your own custom web player. You can start by looking at the open-source solution like this one:

git://github.com/Streamedian/html5_rtsp_player.git

It works on PC and Android, but didn't work with iPhone for me (but you can try it for yourself https://streamedian.com/demonstration/ maybe it's just my issue), but maybe you can find better alternative or fork it and make it work on all devices. It still requires a middle-man proxy server though because it uses a websocket tech to work, but since it doesn't do any video converting or decoding, it don't suppose to take any resources at all.

user_196727380
Related