公司需要在網(wǎng)頁端顯示rtsp視頻數(shù)據(jù)，而網(wǎng)頁端的vlc插件支持不算好等等原因，打算自己用php后臺寫一個服務(wù)器，將rtsp數(shù)據(jù)流轉(zhuǎn)成rtmp后再在pc端顯示。
因為之前從來沒有接觸過rtsp，也完全不知道ffmpeg是個什么東西，所以，在搭建服務(wù)器的過程中踩了很多的坑。
現(xiàn)在將這些坑記錄下來，因為后續(xù)往測試和正式服務(wù)器上面部署的時候還有再次操作，免得之后忘記了。
廢話不多說了，直接開始。
一、安裝ffmpeg
因為我是在我本地開發(fā)的，我本地是window環(huán)境
ffmpeg下載鏈接：https://ffmpeg.zeranoe.com/builds/win64/static/
點進去之后，選擇了latest最新的版本。
下載到本地之后解壓縮，將解壓縮后的文件夾放在自己心儀的位置。
然后
點到bin目錄下，將此目錄添加的path的環(huán)境變量里面。
之后點開cmd
輸入ffmpeg
顯示成這樣就表示ffmpeg安裝成功了。
就這樣，ffmpeg先告一段落，接著搭建nginx服務(wù)器。
在這里的時候，我遇到了一個問題，我本地搭建的服務(wù)器是用的xampp這樣的集成，已經(jīng)是開了apache了。如果再安裝一個nginx那勢必會與我的apache沖突。雖然可以重新配置，但是想想還要重新搭一套nginx的服務(wù)器也挺煩的。
于是我想到，我們公司的測試環(huán)境剛好就是用nginx搭的么，我把這個轉(zhuǎn)換rtsp的服務(wù)搭到測試環(huán)境上不就好了么?
說干就干，我ssh上了公司的測試服務(wù)器，然后按照網(wǎng)上的教程就開始配置nginx的config文件了，然后，重啟nginx就報錯了。
搜了百度后，才發(fā)現(xiàn)，我的nginx沒有裝nginx-rtmp-module 這個模塊。
apt-get update
apt-get install libnginx-mod-rtmp
這兩個命令就安裝好了，重啟nginx。
另外nginx.conf里面關(guān)于rtmp的配置是這樣的
rtmp{
???? server{
???? ? ?? listen 1935;
??? ? ?? chunk_size 4096;?
???? ? ?? application live{
??? ? ? ? ?? live on;
???? ? ? ? ?? record off;
??? ? ?? ? ?? max_connections 1024;
???? ? ?? }
???? }
}
開始的時候我將這個配到了conf.d里面去了，然后一直報錯。放到nginx.conf里面就好了，時間緊迫，我也沒有去研究為什么。
一直到這里，轉(zhuǎn)流服務(wù)器好像就搭好了，于是，我開始興沖沖地嘗試。
回到本地，打開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 這個是自己搭建的轉(zhuǎn)流服務(wù)器鏈接。(將ip替換成自己的即可)。
結(jié)果，命令行執(zhí)行了這個命令后，并沒有成功，眼瞅著快要成功了，卻給我報了一個
method SETUP failed: 454 Session Not Found 這個樣子的錯位。
簡直要愁白頭了，又開始海量百度，但是，網(wǎng)上這樣的問題，真的不多啊，好多我還看不懂，這可怎么是好啊。
這時候，有個做過手機端rtsp轉(zhuǎn)流的同事跟我說，是不是我用的rtsp流有問題。讓我換一個rtsp鏈接試試。
于是，沒有頭緒的我，乖乖地換了一個鏈接。
結(jié)果，真的成功了。
但是，為什么剛剛那個鏈接不行呢？同事說，那個rtsp的編碼有問題。
于是，我利用vlc看了一下那個rtsp的編碼，發(fā)現(xiàn)是h265的，網(wǎng)上一搜，果然，nginx一般而言不支持。
因為時間問題，我沒有去解決這個問題，不過網(wǎng)上有類似的教程，先貼上鏈接，等我下次再弄。
https://blog.csdn.net/ybn187/article/details/88351874
https://zhuanlan.zhihu.com/p/94440269。
到這里，后端做的事情基本上就完成了，可是，我還需要將這個視頻放到pc端啊。
于是，我又跑去弄前端了。
公司前端用的是vue，根據(jù)網(wǎng)上的推薦，我打算用video.js來實現(xiàn)rtmp視頻流的播放。
首先
npm install video.js
npm install videojs-flash (ps：這個千萬不要忘記了，否則rtmp展示前端會有問題。)
別的不說了，直接貼代碼，當然也是根據(jù)網(wǎng)上的參考來的。
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",
? ? ? ? ? ? ? ? //建議瀏覽器是否應(yīng)在<video>加載元素后立即開始下載視頻數(shù)據(jù)。
? ? ? ? ? ? ? ? preload: "auto",
? ? ? ? ? ? ? ? //設(shè)置視頻播放器的顯示寬度（以像素為單位）
? ? ? ? ? ? ? ? width: "800px",
? ? ? ? ? ? ? ? //設(shè)置視頻播放器的顯示高度（以像素為單位）
? ? ? ? ? ? ? ? height: "400px"
? ? ? ? ? ? });
? ? ? ? ? ? }
? }
之后允許chrome使用flash插件即可。
