码迷,mamicode.com
首页 > 其他好文 > 详细

简单几步打造网络视频直播平台(转)

时间:2015-10-12 10:24:59      阅读:551      评论:0      收藏:0      [点我收藏+]

标签:

简单几步打造网络视频直播平台

分类:学以致用
2013-02-04 13:20 阅读(1132)评论(0)

不管是个人玩还是企业用,直播电台总是显得比较高端和神秘,今天我们来看看怎么用简单几步实现基于Flash流媒体服务器的网络视频直接直播平台。

1、服务端准备

常见的免费Flash流媒体服务器有国产的UMS和国际开源的Red5UMS只有windows平台安装包,而用java开发的Red5更秉承了开源软件一贯兼容特色,可以多平台运行。

UMS相对简单,全经典windows程序安装步骤,安装过程中无需配置,安装后自动注册为系统服务,基础应用无需配置,高级设置是中文GUI界面,适合新手使用。

Red5windows系统提供绿色版和安装版两种,由于其使用java开发,都必须安装java运行环境包(JRE)。需要注意的是,目前最新1.01red5默认使用java7编译,需要安装JRE7;若下载的是setup-Red5-1.0.1-java6.exe类似版本,则需要安装JRE6。自0.9.1起安装版会注册系统服务,其基础应用也无需配置,但高级应用需修改配置文档,对使用者要求相对较高。Red5安装过程中会提示让输入绑定的IP和提供HTTP服务的端口号,若保持默认直接回车即可,并非必须输入。经测试,在相同终端采样设置情况下,Red5画面比UMS更流畅清晰,推荐使用。

Red5UMS安装并运行后,系统默认开启用RTMP协议使用1935端口传递视频流,并默认都提供live服务点,其访问地址为rtmp://<你的服务器IP>/live

2、发布端准备

发布端即是我们发布现场视频、音频的平台,它不需要在服务器上运行,只要可以连接到服务器即可。常见的发布端有两种:Red5默认安装所提供的运行于web的使用Flashpublisher,其默认访问地址为http://<你的服务器IP>:5080/demos/publisher.html;另外是以传统软件形式运行的Adobe Flash Media Live Encoder,需要下载安装。相对来说,前者基于web运行较为方便,为后者则稳定性较好。

前者配置主要步骤:(1)修改左下方Server选项卡中Location为服务端访问地址,如上文所述的rtmp://<你的服务器IP>/live,并根据需要设置编码、缓冲等,而后点击Connect,若右下角出现Connected to server表示连接服务端成功;(2)分别切换到VideoAudio设置视频、音频输入设备等参数,并分别点击选项卡界面中的Start按钮,Start按钮文字会变为Apply,意思是可继续更改参数并点击此按钮以使新设置起效,设置成功后左上方Publish选项卡界面中会出现摄像头所拍摄的画面;(3)修改Publish选项卡下方的Name为该视频流的名称,如mylivechat,选择其Type下拉框为live,那么该视频流的访问地址就是rtmp://<你的服务器IP>/live/mylivechat,最后点击Publish按钮,视频直播发布成功。

Adobe Flash Media Live Encoder的设置与Red5publisher大同小异,只是名称有所变化,不再赘述。

这两个发布端分别还提供了其它一些实用功能,如在线录制、视频调整、音量控制等,有兴趣不妨自行琢磨琢磨。

3、观看直播准备

不论基于web还是通常形态的软件,凡是支持RTMP协议的播放器都可连接到前文所述已成功发布的视频流上观看直播。基于web播放的Flash播放器主要有JW PlayerCMP4CKPlayerFlowPlayerUMS自带的live.swf等,其中延迟最小的是Html5版本的FlowPlayer,可惜IE6/7不支持HTML5CMP4兼容性较好,支持中文路径。若视频服务器地址为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>

简单几步打造网络视频直播平台(转)

标签:

原文地址:http://www.cnblogs.com/yasepix/p/4870680.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!