网页播放rtsp视频流

一、RTSPtoWebRTC

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

go version

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

1、开启Go的MODULE支持：

export GO111MODULE=on

2、软件源替换：

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

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

运行命令：

GO111MODULE=on go run *.go Windowsmo

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

http://localhost:8083

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

其它浏览器正常写法

三、ffmpeg+jsmpeg+node

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

ffmpeg

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

npm install

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

npm install ws
npm install http-server -g

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

node websocket-relay.js supersecret 8081 8082

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

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

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

最后启动项目

http-server

浏览器打开 demo

http://localhost:8080

四、rtsp转m3u8

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

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

使用 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>

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();

四、liveweb

liveWeb支持多种协议(RTSP/RTMP/HLS/HTTP-FLV/WebSocket-FLV/GB28181/HTTP-TS/WebSocket-TS/HTTP-fMP4/WebSocket-fMP4/MP4/WebRTC),支持协议互转。
全面支持H265/H264/AAC/G711/OPUS。
支持WebRTC推流，支持转其他协议
支持WebRTC播放，支持其他协议转WebRTC
支持TWCC rtcp动态调整码率
支持remb/pli/sr/rr rtcp
支持rtp扩展解析
支持GOP缓冲，webrtc播放秒开
支持datachannel
支持webrtc over tcp模式
优秀的nack、jitter buffer算法, 抗丢包能力卓越
支持whip/whep协议