简单几步打造网络视频直播平台
分类：学以致用
2013-02-04 13:20 阅读(1132)评论(0)
不管是个人玩还是企业用，直播电台总是显得比较高端和神秘，今天我们来看看怎么用简单几步实现基于Flash流媒体服务器的网络视频直接直播平台。
1、服务端准备
常见的免费Flash流媒体服务器有国产的UMS和国际开源的Red5，UMS只有windows平台安装包，而用java开发的Red5更秉承了开源软件一贯兼容特色，可以多平台运行。
UMS相对简单，全经典windows程序安装步骤，安装过程中无需配置，安装后自动注册为系统服务，基础应用无需配置，高级设置是中文GUI界面，适合新手使用。
Red5为windows系统提供绿色版和安装版两种，由于其使用java开发，都必须安装java运行环境包（JRE）。需要注意的是，目前最新1.01版red5默认使用java7编译，需要安装JRE7；若下载的是setup-Red5-1.0.1-java6.exe类似版本，则需要安装JRE6。自0.9.1起安装版会注册系统服务，其基础应用也无需配置，但高级应用需修改配置文档，对使用者要求相对较高。Red5安装过程中会提示让输入绑定的IP和提供HTTP服务的端口号，若保持默认直接回车即可，并非必须输入。经测试，在相同终端采样设置情况下，Red5画面比UMS更流畅清晰，推荐使用。
Red5或UMS安装并运行后，系统默认开启用RTMP协议使用1935端口传递视频流，并默认都提供live服务点，其访问地址为rtmp://<你的服务器IP>/live。
2、发布端准备
发布端即是我们发布现场视频、音频的平台，它不需要在服务器上运行，只要可以连接到服务器即可。常见的发布端有两种：Red5默认安装所提供的运行于web的使用Flash的publisher，其默认访问地址为http://<你的服务器IP>:5080/demos/publisher.html；另外是以传统软件形式运行的Adobe Flash Media Live Encoder，需要下载安装。相对来说，前者基于web运行较为方便，为后者则稳定性较好。
前者配置主要步骤：（1）修改左下方Server选项卡中Location为服务端访问地址，如上文所述的rtmp://<你的服务器IP>/live，并根据需要设置编码、缓冲等，而后点击Connect，若右下角出现Connected to server表示连接服务端成功；（2）分别切换到Video、Audio设置视频、音频输入设备等参数，并分别点击选项卡界面中的Start按钮，Start按钮文字会变为Apply，意思是可继续更改参数并点击此按钮以使新设置起效，设置成功后左上方Publish选项卡界面中会出现摄像头所拍摄的画面；（3）修改Publish选项卡下方的Name为该视频流的名称，如mylivechat，选择其Type下拉框为live，那么该视频流的访问地址就是rtmp://<你的服务器IP>/live/mylivechat，最后点击Publish按钮，视频直播发布成功。
Adobe Flash Media Live Encoder的设置与Red5的publisher大同小异，只是名称有所变化，不再赘述。
这两个发布端分别还提供了其它一些实用功能，如在线录制、视频调整、音量控制等，有兴趣不妨自行琢磨琢磨。
3、观看直播准备
不论基于web还是通常形态的软件，凡是支持RTMP协议的播放器都可连接到前文所述已成功发布的视频流上观看直播。基于web播放的Flash播放器主要有JW Player、CMP4、CKPlayer、FlowPlayer、UMS自带的live.swf等，其中延迟最小的是Html5版本的FlowPlayer，可惜IE6/7不支持HTML5；CMP4兼容性较好，支持中文路径。若视频服务器地址为26.137.32.254、访问点为live、视频流为livestream‘，则下面给出几个常用web播放器的调用代码，以供参考。
CKPlayer的播放代码：
<div id="player"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
var flashvars={
f:‘rtmp://26.137.32.254/live/livestream‘,//视频地址
i:‘http://26.137.32.254/v4/statics/images/fantan_bg.jpg‘,//初始图片地址
d:‘http://26.137.32.254/v4/statics/images/fantan_bg.jpg‘,//暂停时播放的广告，swf/图片
v:‘80‘,//默认音量，0-100之间
p:‘0‘,//视频默认0是暂停，1是播放
b:‘0x000‘,//播放器的背景色，如果不设置的话将默认透明
};
var params={bgcolor:‘#000000‘,allowFullScreen:true,allowScriptAccess:‘always‘,wmode:‘opaque‘};
var attributes={id:‘ckplayer_player‘,name:‘ckplayer_player‘};
swfobject.embedSWF(‘ckplayer/ckplayer.swf‘, ‘player‘, ‘296‘, ‘250‘, ‘10.0.0‘,‘ckplayer/expressInstall.swf‘, flashvars, params, attributes);
</script>
CMP4的播放代码：
<div id="player" style="width:300px;height:225px;"></div>
<script type="text/javascript" src="cmp/cmp.js"></script>
<script type="text/javascript">
var flashvars = {
name : "CMP4",
bg_video : "images/fantan_bg.jpg",
video_image : "images/fantan_bg.jpg",
//src : "ftp://26.137.32.253/web/movie/1电影/一九四二.flv", //播放普通视频
rtmp : "rtmp://26.137.32.254/live",
src : "livestream",
buffer_time : "0.1",
skin : "tvlive.zip"
};
var htm = CMP.create("cmp", "100%", "100%", "cmp/cmp.swf", flashvars);
document.getElementById("player").innerHTML = htm;
</script>
UMS自带播放器的播放代码：
<script type="text/javascript" src="player.js"></script>
<script type="text/javascript">
var so = new SWFObject(‘live.swf‘,‘ply‘,‘400‘,‘350‘,‘9‘,‘#000000‘);
so.addParam(‘allowfullscreen‘,‘true‘);
so.addParam(‘allowscriptaccess‘,‘always‘);
so.addParam(‘wmode‘,‘opaque‘);
so.addVariable(‘file‘,‘livestream‘);
so.addVariable(‘streamer‘,‘rtmp://26.137.32.254:1935/live‘);
so.write(‘mediaspace‘);
</script>