公司需要在网页端显示rtsp视频数据，而网页端的vlc插件支持不算好等等原因，打算自己用php后台写一个服务器，将rtsp数据流转成rtmp后再在pc端显示。
因为之前从来没有接触过rtsp，也完全不知道ffmpeg是个什么东西，所以，在搭建服务器的过程中踩了很多的坑。
现在将这些坑记录下来，因为后续往测试和正式服务器上面部署的时候还有再次操作，免得之后忘记了。
废话不多说了，直接开始。
一、安装ffmpeg
因为我是在我本地开发的，我本地是window环境
ffmpeg下载链接：https://ffmpeg.zeranoe.com/builds/win64/static/
点进去之后，选择了latest最新的版本。
下载到本地之后解压缩，将解压缩后的文件夹放在自己心仪的位置。
然后
点到bin目录下，将此目录添加的path的环境变量里面。
之后点开cmd
输入ffmpeg
显示成这样就表示ffmpeg安装成功了。
就这样，ffmpeg先告一段落，接着搭建nginx服务器。
在这里的时候，我遇到了一个问题，我本地搭建的服务器是用的xampp这样的集成，已经是开了apache了。如果再安装一个nginx那势必会与我的apache冲突。虽然可以重新配置，但是想想还要重新搭一套nginx的服务器也挺烦的。
于是我想到，我们公司的测试环境刚好就是用nginx搭的么，我把这个转换rtsp的服务搭到测试环境上不就好了么?
说干就干，我ssh上了公司的测试服务器，然后按照网上的教程就开始配置nginx的config文件了，然后，重启nginx就报错了。
搜了百度后，才发现，我的nginx没有装nginx-rtmp-module 这个模块。
apt-get update
apt-get install libnginx-mod-rtmp
这两个命令就安装好了，重启nginx。
另外nginx.conf里面关于rtmp的配置是这样的
rtmp{
server{
listen 1935;
chunk_size 4096;
application live{
live on;
record off;
max_connections 1024;
}
}
}
开始的时候我将这个配到了conf.d里面去了，然后一直报错。放到nginx.conf里面就好了，时间紧迫，我也没有去研究为什么。
一直到这里，转流服务器好像就搭好了，于是，我开始兴冲冲地尝试。
回到本地，打开cmd
在里面输入
ffmpeg -i rtsp://onvif:Admin-12345@10.200.200.240:554/Streaming/channels/7601 -c:a copy -c:v libx264 -f flv rtmp://ip:1935/live
这样的一个命令。
rtsp://onvif:Admin-12345@10.200.200.240:554/Streaming/channels/7601 这个是rtsp链接。
rtmp://ip:1935/live 这个是自己搭建的转流服务器链接。(将ip替换成自己的即可)。
结果，命令行执行了这个命令后，并没有成功，眼瞅着快要成功了，却给我报了一个
method SETUP failed: 454 Session Not Found 这个样子的错位。
简直要愁白头了，又开始海量百度，但是，网上这样的问题，真的不多啊，好多我还看不懂，这可怎么是好啊。
这时候，有个做过手机端rtsp转流的同事跟我说，是不是我用的rtsp流有问题。让我换一个rtsp链接试试。
于是，没有头绪的我，乖乖地换了一个链接。
结果，真的成功了。
但是，为什么刚刚那个链接不行呢？同事说，那个rtsp的编码有问题。
于是，我利用vlc看了一下那个rtsp的编码，发现是h265的，网上一搜，果然，nginx一般而言不支持。
因为时间问题，我没有去解决这个问题，不过网上有类似的教程，先贴上链接，等我下次再弄。
https://blog.csdn.net/ybn187/article/details/88351874
https://zhuanlan.zhihu.com/p/94440269。
到这里，后端做的事情基本上就完成了，可是，我还需要将这个视频放到pc端啊。
于是，我又跑去弄前端了。
公司前端用的是vue，根据网上的推荐，我打算用video.js来实现rtmp视频流的播放。
首先
npm install video.js
npm install videojs-flash (ps：这个千万不要忘记了，否则rtmp展示前端会有问题。)
别的不说了，直接贴代码，当然也是根据网上的参考来的。
main.js里面注册
import Video from 'video.js'//浏览器视频插件
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video
接着到展示页面：
这个千万不要忘记引用
斜杠一定要加上
<video id="myVideo" class="video-js">
<!-- <source src="../../../static/7efaf904a76f6050251da6d38980600c.mp4" type="video/mp4" > -->
<source src="rtmp://ip:1935/live/" type="rtmp/flv" >
</video>
mounted() {
this.initVideo();
},
methods:{
initVideo() {
//初始化视频方法
let myPlayer = this.$video(myVideo, {
//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
controls: true,
//自动播放属性,muted:静音播放
autoplay: "muted",
//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
preload: "auto",
//设置视频播放器的显示宽度（以像素为单位）
width: "800px",
//设置视频播放器的显示高度（以像素为单位）
height: "400px"
});
}
}
之后允许chrome使用flash插件即可。
网友评论