red5+obs+videojs快速搭建開發直播平臺
這幾天博主因為課程設計原因準備做一個直播平臺。
在看了很多資料之後，找到了三個框架用於開發整個直播平臺，其中包括用主播使用推送直播視訊流的obs（Open Broadcaster Software）軟體，作為伺服器的red5框架，以及在使用者使用用於接收rtmp格式資料流的videojs框架。
因為是快速搭建，整套系統下來程式碼量極少，而且能快速全平臺使用讓大家快速感受下直播平臺搭建的快感，也順便跟大家分享下一些這幾天遇到的坑！
前言
首先跟大家要說明的是，需要避免的第一個大坑：就是如果要實現跟博主相同的demo，博主下面提到的所有軟體以及框架的版本號都要一致！千萬千萬注意。版本不同執行方法完全不一樣！
執行平臺：windows
jdk：1.8
red5版本：1.0.6-server
obs（Open Broadcaster Software）：無所謂
videojs ：v5的就ok
然後建議大家測試的時候一定要用360瀏覽器，就是最普通的那個，不要極速版，因為涉及到使用類谷歌瀏覽器都會預設禁用flash，會出現各種錯誤，但是後期博主會給出解決方案
使用的軟體
- red5 流媒體伺服器
- obs（Open Broadcaster Software） 推流
- viodejs 前端js外掛用於編寫html頁面進行接收直播資料
- vcam 虛擬攝像頭
- vlc：可以直接使用的軟體，用於接收直播資料
第一步 搭建red5伺服器
Red5流伺服器搭建
所謂流媒體技術，是指將連續的影像和聲音資訊經過壓縮處理後放在網站伺服器上，讓使用者能夠一邊下載一邊觀看、收聽（即所謂的“線上欣賞”），而不需要等整個壓縮檔案下載到自己的機器上才可以欣賞的網路傳輸技術。
直接下載的red5伺服器就相當於一個tomcat專案，它自行執行，包含了推流，伺服器，以及接收流視訊的功能，如下：
1.1 下載地址：
git下載地址：https://github.com/Red5/red5-server/releases
csdn下載地址：https://download.csdn.net/my/uploads
博主使用的版本為1.0.6，目前網上大多數教程的做法都是隻適用於1.0.6的，如果大家使用高版本而按照低版本的配置方法，可能會出現obs推送串流連線不上伺服器的情況，所以red5的版本必須很注意！
1.2 配置環境變數
把下載的red5安裝包解壓（本指南下載的是Zip安裝包），複製到要安裝的目錄，如F:\red5\red5-server-1.0.6
根據設定Java環境變數的方法，新增red5_home和ClassPath
變數名：red5_home
變數值：F:\red5\red5-server-1.0.6 （此處要根據你的安裝目錄調整）
變數名：ClassPath
變數值：. （不配置此變數，或者此變更的值不是“.”，red5啟動的過程會拋異常）
1.3 修改red5的ip地址
red5的解壓目錄：
conf資料夾下
red5.properties檔案
只需要修改rtmp以及http的IP地址為本地ip地址即可！
1.4啟動red.bat軟體
輸入地址 ip地址:5080/
看見red5首頁即成功
1.5 進入直播介面
瀏覽器輸入地址：ip地址:5080//demos/publisher.html
即可進入播放介面
操作：
- 安裝vcam之後，然後在pushlish介面，選擇攝像頭，點選start，點選pushlisher，即可推送串流
- 然後點選view，在location輸入：rtmp://ip地址/live
這裡需要注意的是必須要保證兩邊的name一致！
由上不難得知使用red5伺服器之後，可以直接完成推流，儲存流資料，以及接收流視訊的操作。
但是這樣接收流視訊是無法在我們自己的web網頁上面播放的，因此我們需要使用obs以及videojs來取代推流以及接收流視訊的這兩個操作。
話不多說，繼續往下搞！
第二步 使用OBS （Open Broadcaster Software）推流
Open Broadcaster Software是一個免費的開源的視訊錄製和視訊實時流軟體。其有多種功能並廣泛使用在視訊採集，直播等領域。
obs直接下載任意版本的即可！
由圖對比不難發現，我們現在要做的就是用obs取代red5的publish介面，然後大家可以嘗試
推流部分已經完成，如果大家想測試是否接受成功，可以使用vlc接受串流視訊或者使用red5的那個view介面接受obs推過來的視訊流，如下
注意流名稱和地址要正確
第三步 使用videojs構建web頁面
直接建立web專案
編寫html頁面
<!DOCTYPE HTML>
<html>
<head>
<title>視訊直播</title>
<meta charset="utf-8"></meta>
<link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>
<script src="http://vjs.zencdn.net/5.5.3/video.js"></script>
<!-- <script type="text/javascript" th:inline="javascript">
videojs.options.flash.swf = [[@{/}]] + 'static/videojs5.18.4/video-js.swf';
</script>
-->
</head>
<body>
<h1>直播測試</h1>
<p id="enableFlash">
<embed src='dgPortal.swf' width='640px' height='439px'></embed>
</p >
<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
var flag = false;
// 判斷客戶端是否啟動flash，是則新增視訊模組，否則新增啟動flash模組
if(window.ActiveXObject){
try{
var swf = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
if(swf){
flag = true;
}
}catch(e){
}
}else{
try{
var swf = navigator.plugins['Shockwave Flash'];
if(swf){
flag = true;
}
}catch(e){
}
}
if(flag){
console.log("running ok");
$("#enableFlash").html("<video id='my-video' class='video-js'></video>");
var str = "cat";
var player = videojs('my-video',{
width: '640px',
height: '439px',
controls: true,
'autoplay': true,
sources: [{
src: 'rtmp://192.168.65.1/live/' + str,
type: 'rtmp/flv'
}]
},function(){
console.log(this);
});
}else{
console.log("running error");
}
});
</script>
</body>
</html>
html程式碼解析
obs推流設定：
- 點選開始推流
- 執行web專案，在網頁開啟即可簡單實現直播平臺！