网页播放rtsp视频流_rtsp播放

前言

目前我所用过的四种方法可以实现网页播放rtsp视频流，在各大浏览器做了测试，基本都能显示。以下这些都可以在各大主流浏览器上播放，但我并没有深入了解，全是一些demo，所以此文仅供参考

---

方法

目前这四种方法几乎都是流码实现网页播放功能,话不多说，如下：

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

一、RTSPtoWebRTC

安装go环境（下载地址）。建议默认安装，如果没默认可能要配置环境变量。下载安装后查看是否全局使用：

go version
1

有相关信息就证明安装成功。一般go需要换源，国内速度太慢，或者说根本访问不了，建议换源（下面命令）

1、开启Go的MODULE支持：

export GO111MODULE=on
1

2、软件源替换：

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

装好Go所需的环境变量后，下载 RTSPtoWebRTC ，下载完成后，修改 confing.json 中的url就行

运行命令：

GO111MODULE=on go run *.go Windowsmo
1

如果是在cmd运行命令会报错，因为 Windows下不支持。改为 Git.bash 运行就可以了， 如果没有 Git, 可以点击 下载，我相信大多会有的，毕竟是常用。测试运行是否成功，网页打开链接(如果你端口没改的话)：

http://localhost:8083
1

打开后会看到视频播放，如果没成功请去其它博文看一下怎么使用吧，本人是成功显示的，这个还算比较简单的 demo

二、VLC

下载VLC，建议用32位的，64位没成功过，点击 下载，下载完成后打开 【媒体】—【打开网络串流】，输入rtsp地址后，选择播放旁边那个小箭头【串流】–【下一个】，把文件选项改为http后再点击【添加】，输入一个你记得住的地址，如：video,端口号默认即可。填完后点击【下一个】，勾选【激活转码】，把配置文件改为【Video - Theora + Vorbis（OGG）】—【下一个】，勾选【串流所有基本流】—【流】，这样就可以了，看不懂的可以百度以下这个，毕竟这个有很多的图文教程，这里我就懒得传图了。如果想看图文教程的推荐看这篇 文章。经过测试，ie写法如下(其它浏览器不支持这种写法)：

<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>
1
2
3
4
5
6
7
8
9

其它浏览器正常写法

三、ffmpeg+jsmpeg+node

第一步是先安装 ffmpeg，并设置环境变量（/bin目录），点击 下载，看设置环境变量是否成功(cmd)：

ffmpeg
1

有一大堆东西就证明成功了，接下来就是下载脚本 jsmpeg，点击 下载，下载完成之后打开安装依赖包：

npm install
1

安装完成后依次安装 websocket 和 http-server ,依次输入如下命令：

npm install ws
npm install http-server -g
1
2

这里并不打算全局安装 websocket ，全局安装运行会报找不到该模块，所以这里选择安装在该目录下的依赖包中就行。接下来启动服务：

node websocket-relay.js supersecret 8081 8082
1

• supersecret 是密码
• 8081 是ffmpeg推送端口
• 8082 是前端webSocket端口

运行后在开一个新窗口，输入:

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

最后启动项目

http-server
1

浏览器打开 demo

http://localhost:8080
1

四、rtsp转m3u8

参考上面第三安装 ffmpeg 和 http-server，在你自己的demo中创建一个叫 hls 的文件夹，运行（cmd):

ffmpeg  -i rtsp地址 -c copy -f hls F:\demo\his\test.m3u8  # 后面为 hls 的文件路径 + \name.m3u8
1

使用 video.js播放 m3u8 文件，头部引入：

<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>
1
2

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>
1
2
3

script

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

结尾

目前我所能够实现网页播放 rtsp 的就这中方法，希望对你有所帮助