不管是个人玩还是企业用,直播电台总是显得比较高端和神秘,今天我们来看看怎么用简单几步实现基于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="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>