最近幫著老師做項目的時候碰到一個難題，將?？禂z像頭的影像實時傳輸?shù)角岸隧撁孢M行展示。Google查了兩天，終于有些眉目，記錄一下經(jīng)驗。
大致需要經(jīng)過以下幾個步驟：
獲取?？禂z像頭的視頻流（基于RTSP協(xié)議的視頻流）
流媒體服務器搭建
前端頁面選用合適的播放器進行播放
下面詳細說明一下每個步驟
不僅僅是?？禂z像頭，市面上大多數(shù)攝像頭的視頻流都是基于RTSP協(xié)議的，查閱了一下資料了解到?？档腞TSP流格式：
rtsp://<賬號>:<密碼>@<IP>:554/<編碼>/<通道>/main/av_stream例如 rtsp://admin:12345@192.0.0.64:554/h264/ch1/main/av_stream 說一下 '/h264/ch1/main/av_stream’ 這部分， 其中“h264”代表獲取h264格式編碼的流，我們實驗室用的攝像頭支持兩種格式的編碼，h264和h265，可以在終端進行設置，雖然h265編碼比較好，但是后邊幾個步驟用到的技術對這個格式的支持很不友好，因此在這里建議使用h264的編碼。后邊的“ch1/main/av_stream”表示一些主碼流、子碼流、通道一類的信息，一般情況下按照這個格式填寫就行。
拿到最終的URL后，最好測試一下是否是正確的，這里推薦用最新版的VLC做測試，VLC是一個非常強大的播放器，幾乎支持所有格式的視頻播放。
首先是rtsp轉碼
瀏覽器直接展示RTSP流稍微有點困難，但是也并不是沒有辦法，VLC Plugin 貌似可以做到，但是新版本的瀏覽器都不再支持這個插件了，所以只能將RTSP進行一個轉碼。
一開始計劃了兩種方案，一個是轉成m3u8格式（基于HLS協(xié)議），另一個是采用FLV格式（基于RTMP協(xié)議），因為前者的延時比較大，所以最后采用了后者（從效果來看，RTMP協(xié)議的延時幾乎察覺不出來）。
這兩種轉碼的方式差不多，都是用ffmpeg進行轉碼+推流，指令如下：ffmpeg -i "rtsp://admin:wls771102@192.168.14.175:554/h265/ch1/main/av_stream" -f flv -r 25 -s 640x360 -an rtmp://localhost:1935/live/room
這個指令中有兩個URL，一個是RTSP視頻流的地址，另外一個是接收RTMP流的流媒體服務器地址。流媒體服務器需要另外搭建，我這里選擇的是整合了RTMP模塊的Nginx。Linux版本的安裝隨便一百度就有，但是Windows版本就稍微復雜點，我這有一個整合好了的可以直接用的，需要的可以自取。
鏈接: https://pan.baidu.com/s/19cqUxAdZPEA1WlwSMKMkSg 密碼: r3sr
RTMP默認端口號1935，開啟Nginx后可以直接用ffmpeg直接推過去，rtmp://localhost:1935/live/room的路徑部分是可以隨意更換的。注意要先開Nginx然后再推流，下邊是在windows下的效果圖
支持RTMP播放的播放器找了好久，最后選擇了videojs。 這里還有一些坑。首先是播放器頁面如果不丟到服務器環(huán)境下可能出現(xiàn)無法播放的情況。還有就是，因為播放器是基于flash的，需要瀏覽器開啟flash支持，但是一般情況下如果需要flash，瀏覽器都會彈窗詢問，但是不曉得為啥這個播放器不會彈窗，所以需要手動啟動瀏覽器的flash支持。chrome的話是點擊url欄左邊的感嘆號進行設置，其他瀏覽器不太清楚。 另外，這個設置不是全局設置，也就是說如果項目站點移植之后，需要重新設置一下。
頁面代碼如下：'
<!DOCTYPE html><html lang="en"><head> <title>Video.js | HTML5 Video Player</title> <link href="http://vjs.zencdn.net/5.20.1/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/5.20.1/videojs-ie8.min.js"></script></head><body width="640px" height="360px"> <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640px" height="360px" data-setup="{}"> <source src="rtmp:/localhost:80/live/opencv" type="rtmp/flv"> <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> </video> <script src="http://vjs.zencdn.net/5.20.1/video.js"></script></body></html>前端播放部分，除了使用videoJS， 還可以使用百度的 cyberplayer,是在videoJS的基礎上開發(fā)的，針對直播做了很多優(yōu)化，使用方便而且文檔也比較全， 強烈安利！
注意：本教程僅適用h264編碼的流，有些受硬盤錄像機管理的攝像頭，即便是填寫了/h264這個參數(shù)（rtsp://admin:12345@192.0.0.64:554/h264/ch1/main/av_stream ），但是返回的仍然是h265格式的流，這個需要在硬盤錄像機里修改。直接訪問攝像頭后臺修改的話，過幾分鐘會被重置。如果按照教程配置到最后出現(xiàn)VLC可以播放但是web無法播放的情況，很有可能就是這個問題。
查看攝像頭編碼的方法：
直接在硬盤錄像機里查看
VLC里邊查看： 首先在VLC里拉流->tools->Codec選項卡->查看Codec參數(shù)
