这几天博主因为课程设计原因准备做一个直播平台。
在看了很多资料之后，找到了三个框架用于开发整个直播平台，其中包括用主播使用推送直播视频流的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项目，在网页打开即可简单实现直播平台！