rtsp流浏览器播放方案

rtsp流在主流浏览器并不支持直接播放。比如大华的视频流：rtsp://admin:123456@

192.168.10.129/cam/realmonitor?channel=1&subtype=0，用vlc可以直接播放。但在浏览器会报ERR_UNKNOWN_URL_SCHEME。那如何在浏览器中播放呢哗备。

以下列出几种方案。

1、安装插件（chrome最新版基本都不支持）

类如：kurento，vlc插件（谷歌浏览器版本41以下),vgx插件(不支持高版本，chrome72.0版本可用)等。

2、安装软件（中间件，基本都付费）

类如：Appemit（调用vlc插件播放rtsp），可以免安装的，目前只能windows,免费版会有提示。

猿大师中间件（底层调用VLC的ActiveX控件，实现在主流浏览器网页中内嵌播放多路RTSP的实时视频流），中间件收费的。

PluginOK(牛插乱行毁)中间件。底层调用ActiveX控件VlcOcx.dll。（商业用途需付费使用）

3、服务器拉流转发及协议转换

示意图如下所示：

推流--------------服务器转发--------------拉流

方法一览：

a,vlc软件串流到http协议 ，网页显示几个视频需启动几个vlc,只适合应急场景。

b,html5 + websocket_rtsp_proxy 实现视频流直播 ，基于MSE（Media Source Extensions,W3C），扩展H5的功能。

步骤：服务器安装streamedian服务器，客户端通过video标签播放。

原型图：

价格：

c.基于nginx的rsmp转发

基于nginx实现rtmp转化，用flash实现播放。由于flash目前大多浏览器默认禁用，不推荐此方式。

步骤：安装ffmpeg工具,安装nginx。

另外nginx-rtmp-module也支持HLS协议,可以搭建基于hls的直播服务器。

d.rtsp转hls播放带猛,通过ffmpeg转码

步骤：安装ffmpeg工具，ffmpeg转码。

形如：

ffmpeg -i "rtsp://admin:123456@192.168.10.129/cam/realmonitor?channel=1&subtype=0" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 "D:/hls/test.m3u8"

缺点是直播流延时很大，对实时要求比较高的不满足要求。

案例：基于EasyDarwin拾建转码服务器。参考地址:https://blog.csdn.net/jyt0551/article/details/84189498

通过存储的m3u8去读取。

e.websocket代理推送，FFMPEG转码

此方法与a，b类似。但更实用。

以下提供两种方案：

（1）Gin+WebSocket+FFMPEG实现rtsp转码,参考：https://juejin.cn/post/6844904024072798216

通过FFMPEG把rstp转成http，ginrtsp作为转发服务器，但需要自己写相应接口，需要了解go语言。

（2）node + ffmpeg + websocket + flv.js，参考：https://juejin.cn/post/6908641550046068744

步骤：在node服务中建立websocket；通过fluent-ffmpeg转码，将RTSP 流转为flv格式；通过flv.js连接websocket，并对获取的flv格式视频数据进行渲染播放。

import WebSocket from 'ws'import webSocketStream from 'websocket-stream/stream'import ffmpeg from 'fluent-ffmpeg'// 建立WebSocket服务const wss = new WebSocket.Server({ port: 8888, perMessageDeflate: false })// 监听连接wss.on('connection', handleConnection)// 连接时触发事件function handleConnection (ws, req) {  // 获取前端请求的流地址（前端websocket连接时后面带上流地址）  const url = req.url.slice(1)  // 传入连接的ws客户端 实例化一个流  const stream = webSocketStream(ws, { binary: true })  // 通过ffmpeg命令 对实时流进行格式转换 输出flv格式  const ffmpegCommand = ffmpeg(url)    .addInputOption('-analyzeduration', '100000', '-max_delay', '1000000')    .on('start', function () { console.log('Stream started.') })    .on('codecData', function () { console.log('Stream codecData.') })    .on('error', function (err) {      console.log('An error occured: ', err.message)      stream.end()    })    .on('end', function () {      console.log('Stream end!')      stream.end()    })    .outputFormat('flv').videoCodec('copy').noAudio()  stream.on('close', function () {    ffmpegCommand.kill('SIGKILL')  })  try {    // 执行命令 传输到实例流中返回给客户端    ffmpegCommand.pipe(stream)  } catch (error) {    console.log(error)  }}

优点全部基于js。前端即可搞定。

参考:https://www.zhihu.com/question/29973696

如果是udp的话 发送方丢包可能性不大，可能是路由设备或者客户端接收逻辑垃圾 导致客户端丢码。但是rtp提供了tcp方式传输，如果你tcp方式发现也丢得话，那估计就是发送逻辑的问题。一般都是send的时候返回错误而没有判断造成的。建议使用多线程发送，棚扮将网络和其他逻辑分开，网络部分最好使用异步。我做过rtsp服务器，主要就是io线程不能干其他的，这样就能确保数据即时发送出去。当然如果tcp的话带宽限制你发送前和塌不了那么快可以适当的从数据源这里就丢一些非关键帧b或者p。这样就能有稍微好点的实时性。

最后一句话，开发rtsp之前要计算好带宽，连接数，码流大小慧圆这些数据。

ijkplayer是Bilibili基于ffmpeg开发并开源的轻量级视频播放器，支持播放本地网络视频，也支持流媒体播放。支持Android&iOS。

ijkplayer的编译这里不多阐述，我也是直接获取别人编译完成的so库文物腔件，直接使用的。如果你对ijkplayer的编译感兴趣，可以百度一下，有很多文章。

使用ijkplayer

导包

ijkplayer源码官方下载地址：https://github.com/Bilibili/ijkplayer

上面是官方提供的ijkplayer的源码地址，但是它是谨罩没有编译过的。下面我给大家分享一份编译好的ijkplayer源码，由于比较大，分了三个包才上传完成，需要三个包都下载后才能一起解压：

编译好的ijkplayer.part1

编译好的ijkplayer.part2

编译好的ijkplayer.part3

我们下载完成，进入android/ijkplayer目录：

ijkplayer-java：ijkplayer的一些 *** 作封装及定义。这里面是通用的API接口，里面最主要的是IMediaPlayer，它是用来渲染显示多媒体的。

ijkplayer-exo：google开源的一个新的播放器ExoPlayer，在Demo中和ijkplayer对比用的。通过安装ijkplayer可以发现setting里面可以选择不同player来渲染多媒体显示，该模块下面就祥蚂闹是一个MediaPlayer。

ijkplayer-example：测试程序

ijkplayer-{arch}：编译出来的各个版本的.so文件。

官方提供的Demo的代码还是挺多的，甚至还用了otto,需要对官方的demo进行精简，去除一些用不到的代码。

首先需要的是ijkplayer-{arch}、ijkplayer-Java两个库。exo是Google提供的新的播放器，这里不需要，直接砍掉。其次是ijkplayer-example里的，我们需要的只有tv.danmaku.ijk.media.example.widget.media包下的部分类。

注：

链接库ijkplayer-arm64，ijkplayer-armv5，ijkplayer-armv7a，ijkplayer-x86，ijkplayer-x86_64是不同体系架构的动态链接库，在当前工程结构里面作为一个模块，如果不想做兼容多平台问题，可以删除其他目录结构，单独保留自己需要的平台目录。

新建一个工程：

（1）把ijkplayer-armv7a/src/main/libs下的文件拷贝到新工程app目录的libs下。

（2）把ijkplayer-java/build/outputs/aar/ijkplayer-java-release.aar复制到新工程app目录的libs下。

（3）修改APP下的build.gradle, 主要设置.so及.aar的位置:

apply plugin: 'com.android.application'

android {

compileSdkVersion 24

buildToolsVersion "25.0.0"

defaultConfig {

applicationId "com.hx.ijkplayer_demo"

minSdkVersion 14

targetSdkVersion 24

versionCode 1

versionName "1.0"

testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

}

buildTypes {

release {

minifyEnabled false

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

}

}

sourceSets {

main {

jniLibs.srcDirs = ['libs'] /**在libs文件夹下找so文件*/

}

}

}

repositories {

mavenCentral()

flatDir {

dirs 'libs' /**在libs文件夹下找aar文件*/

}

}

dependencies {

compile fileTree(dir: 'libs', include: ['*.jar'])

androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {

exclude group: 'com.android.support', module: 'support-annotations'

})

compile 'com.android.support:appcompat-v7:24.2.1'

testCompile 'junit:junit:4.12'

compile(name: 'ijkplayer-java-release', ext: 'aar') /**编译ijkplayer-java-release.aar文件*/

}

（4）复制ijkplayer-example下面的tv.danmaku.ijk.media.example.widget.media到新的工程，删掉一些不需要类。

（5）IjkVideoView里面还是有很多如exo等没用的东西，删！具体可以参见我后面的Demo。

（6）Manifest

...

<activity android:name=".MainActivity"

android:screenOrientation="sensorLandscape"

android:configChanges="orientation|keyboardHidden">

...

</activity>

...

<uses-permission android:name="android.permission.INTERNET"/>

---