Playing RTSP video stream on webpage

Preface

At present, the four methods I have used can realize web page playback rtsp Video streaming , Tested in major browsers , Basically, it can be displayed . The following can be played on major mainstream browsers , But I don't know much about , It's all some demo, So this article is for reference only

---

Method

At present, almost all of these four methods are stream code to realize the function of web page playing , Don't talk much , as follows ：

• RTSPtoWebRTC
• VLC
• ffmpeg+jsmpeg+node
• rtsp turn m3u8

One 、RTSPtoWebRTC

install go Environmental Science （ Download address ）. It is recommended to install by default , If there is no default, you may need to configure environment variables . Check whether it is used globally after downloading and installing ：

go version

Relevant information proves that the installation is successful . commonly go Need to change source , The domestic speed is too slow , Or I can't visit at all , It is recommended to change the source （ The following command ）

1、 Turn on Go Of MODULE Support ：

export GO111MODULE=on

2、 Software source replacement ：

export GOPROXY=https://goproxy.cn,direct

packed Go After the required environment variables , download RTSPtoWebRTC , When the download is complete , modify confing.json Medium url Just go

Run the command ：

GO111MODULE=on go run *.go Windowsmo

If it's in cmd Running the command will report an error , because Windows I don't support . Change it to Git.bash Run it , without Git, You can click on the download , I believe most of them will , After all, it is commonly used . Whether the test run is successful , Web page open link ( If you haven't changed your port )：

http://localhost:8083

After opening, you will see the video playing , If you fail, please go to other blogs to see how to use it , I am successful , This is relatively simple demo

Two 、VLC

download VLC, Suggest using 32 Bit ,64 I haven't succeeded , Click on download , Open... After downloading 【 The media 】—【 Open Network Stream 】, Input rtsp After the address , Select the small arrow next to play 【 Streaming 】–【 next 】, Change the file option to http Click later 【 add to 】, Enter an address you remember , Such as ：video, The port number defaults . When you're done, click 【 next 】, Check 【 Activate transcoding 】, Change the configuration file to 【Video - Theora + Vorbis（OGG）】—【 next 】, Check 【 Stream all basic streams 】—【 flow 】, That's it , If you don't understand, you can Baidu the following , After all, there are many graphic tutorials , I'm too lazy to pass pictures here . If you want to see the graphic tutorial, please read this article . After testing ,ie It is written as follows ( Other browsers do not support this writing )：

<object type='application/x-vlc-plugin' id='vlc' events='True' width="720" height="540" pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
        	<param name='mrl' value='http://localhost:8080/video' />
        	<param name='volume' value='50' />
        	<param name='autoplay' value='true' />
        	<param name='loop' value='false' />
        	<param name='fullscreen' value='false' />
</object>

Other browsers write normally

3、 ... and 、ffmpeg+jsmpeg+node

The first step is to install ffmpeg, And set environment variables （/bin Catalog ）, Click on download , See whether the setting of environment variables is successful (cmd)：

ffmpeg

There are a lot of things that prove successful , The next step is to download the script jsmpeg, Click on download , After downloading, open the installation dependency package ：

npm install

After installation, install in sequence websocket and http-server , Enter the following commands in turn ：

npm install ws
npm install http-server -g

It is not intended to install globally websocket , The global installation operation will report that the module cannot be found , So choose to install it in the dependent package under this directory . Next, start the service ：

node websocket-relay.js supersecret 8081 8082

• supersecret It's a password
• 8081 yes ffmpeg Push port
• 8082 Is the front webSocket port

Open a new window after running , Input :

ffmpeg -I "rtsp Address " -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret

Last launch project

http-server

Browser open demo

http://localhost:8080

Four 、rtsp turn m3u8

Refer to the third installation above ffmpeg and http-server, In your own demo Create a name called hls Folder , function （cmd):

ffmpeg  -i rtsp Address  -c copy -f hls F:\demo\his\test.m3u8  #  The back is  hls  File path  + \name.m3u8

Use video.js Play m3u8 file , Head introduction ：

<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video.min.js"></script>

html

<video id="my-player" class="video-js vjs-big-play-centered" controls>
  <source src="http://localhost:8080/hls/test.m3u8" type="application/x-mpegURL"></source>
</video>

script

var player = videojs('myv');
player.play();

ending

At present, I can realize web page playing rtsp This is the way , I hope it helped you