当前位置：网站首页>Real time preview of RTSP video based on webrtc

Real time preview of RTSP video based on webrtc

2022-06-24 01:00:00 【ruochen】

brief introduction

background

Because the project needs , You need to use the camera preview function , The equipment model is Hikvision . The existing one is based on FFmpeg The delay of our solutions is too high , So the final choice of the project is based on this scheme .

programme

The scheme is based on WebRTC Video instant messaging for , It's native support for RTP Decoding protocol , So the delay is very low , Probably 0.2-0.4 About seconds , All other schemes are larger than 1 Second delay .

WebRTC There are requirements for browsers , You can view the supported browsers in the address below .

https://caniuse.com/rtcpeerconnection

image

The following introduction is from Baidu Encyclopedia

WebRTC, The name comes from web instant messaging （ English ：Web Real-Time Communication） Abbreviation , Is a web browser to support real-time voice or video dialogue API. It's on 2011 year 6 month 1 Japan open source and in Google、Mozilla、Opera With the support of W3C Recommended standards .
WebRTC Realized video conference based on Web page , The standard is WHATWG agreement , The goal is to provide simple javascript You can achieve real-time communication （Real-Time Communications (RTC)） Ability .

WebRTC The implementation scheme of is in Github There are many , After a series of comparisons and tests , The final choice is to use [webrtc-

streamer](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fmpromonet%2Fwebrtc-

streamer) This project , It's easy to use and more stable .

Getting Started

[webrtc-

streamer](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fmpromonet%2Fwebrtc-

streamer) Not only support for RTSP Stream capture and support for V4L2 And the capture of screen window snapshots .

webrtc-streamer Built in a small HTTP server Come on webrtc Need the relevant interface to support .

The following is how to set it ：

Configure the camera

because webrtc Our core library doesn't support h265, So it needs to be set to h264 code .

Log in to the background configuration center of Hikvision camera , stay “ Video and audio ” Make settings under the menu , Then save .

image

Download the latest package

stay github The publishing page selects the corresponding package to download according to the required platform

[https://github.com/mpromonet/webrtc-

streamer/releases](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fmpromonet%2Fwebrtc-

streamer%2Freleases)

After downloading, you can use the following command to test ：

./webrtc-streamer rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov

open localhost:8000 Page visited

Test equipment

If there is no problem , You can use the local device to test , The default address of Hikvision video stream is ：

rtsp:// account number : password @IP Address :554/Streaming/Channels/101

Replace the corresponding information for testing .

If it's in windows Next ,webrtc-streamer It also grabs snapshot pages of windows and screens , have access to -q Parameters are filtered , It supports regular expressions . This parameter is not in

help The list is listed in the source code I found .

./webrtc-streamer  rtsp:// account number : password @IP Address :554/Streaming/Channels/101 -q (?=rtsp).*

Integrate

You can download the distribution package in html Found in folder index.html To see the sample code , Here's the core code ：

<html>

<head>

<script src="libs/adapter.min.js" ></script>

<script src="webrtcstreamer.js" ></script>

<script>

    var webRtcServer      = null;

    window.onload         = function() {

        webRtcServer      = new WebRtcStreamer("video",location.protocol+"//"+window.location.hostname+":8000");

    webRtcServer.connect("rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov");

    window.onbeforeunload = function() { webRtcServer.disconnect(); }

</script>

</head>

<body>

    <video id="video" />

</body>

</html>

Use WebComponent Integrate

<html>

<head>

    <script type="module" src="webrtc-streamer-element.js"></script>

</head>

<body>

   <webrtc-streamer url="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"></webrtc-streamer>

</body>

</html>

summary

Mainly right webrtc Familiar with , You can (https://links.jianshu.com/go?to=https%3A%2F%2Fwebrtc.org%2Fgetting-

started%2Foverview) Find the guide .

For example, what is TURN server, What is? peer connections You can find it in the guide above .

原网站

版权声明
本文为[ruochen]所创，转载请带上原文链接，感谢
https://yzsam.com/2021/11/20211121160438074r.html