开发一个类YY的视频网站,我们首先需要下载以下这些软件:
一、你的电脑必须安装了flash且版本要高于10;
二、下载一个FlexBuilder3.0以上的as开发的IDE;
三、下载一个FlashMediaDevServer_4_5_all就是FMS的服务器到本机上去;
以上是我们开发视频网站as客户端的先决条件。
当我们下载并安装好了以上软件以后,首先新建一个flex工程,我们在xxx.mxml文件里面设计我们的视频页面
<mx:VideoDisplay x="307.5" y="0" width="511" height="301" id="videoTemp" autoPlay="true"/>
<mx:TextInput x="307.5" y="545" width="456.5" id="hostMess" enterFrame="initWindow()"/>
<mx:Button x="762" y="546" label="发送" width="56.5" id="hostBtn"/>
<mx:TextArea x="819" y="-5" width="539" height="517" editable="false" id="audienceShowMess"/>
<mx:TextArea x="307.5" y="301" width="511" height="245" editable="false" id="hostShowMess"/>
<mx:TextArea x="819" y="512" width="488" height="56" id="audienceMess"/>
<mx:Button x="1306" y="511" label="发送" width="53" height="57" id="audienceBtn"/>
<mx:List x="0" y="199" width="307.5" height="368" id="audienceList"></mx:List>
<mx:List x="0" y="0" width="307.5" height="198" id="hostList"></mx:List>
上面的代码就是我们设计好的一个视频界面,这样我们直接在我们的IDE上面运行,就可以看到我们设计好的页面了,暂时我们还看不到任何的运行效果,只能看到一个简单的页面,那么接下来我们就要编写我们的as3代码来实现视频的功能。
首先我们新建一个xxx.as文件,在这个文件里面我们初始化该xxx.as的构造函数,该构造函数初始化的是我们在mxml页面设计的这些元素构造到我们的这个as的类里面来。
// 定义普通听众的列表对象
private var audienceList:List;
// 定义普通用户的列表集合
private var hostList:List;
// 定义显示普通用户公屏的文字的文本框对象
private var audienceShowMess:TextArea;
// 定义显示普通用户发送消息的文本框对象
private var audienceMess:TextArea;
// 定义普通用户发送消息的按钮对象
private var audienceBtn:Button;
// 定义权限用户公屏的文字的文本框对象
private var hostShowMess:TextArea;
// 定义权限用户发送消息的文本框对象
private var hostMess:TextInput;
// 定义权限用户发送消息按钮的对象
private var hostBtn:Button;
// 定义视频对象
public var videoTemp:VideoDisplay;
// 定义IP地址对象
private var IP:String;
// 定义完整的fms工程地址
private var fmsPath:String;
// 当前登录的用户名
private var userLoginName:String;
// 房间所有者用户名
private var roomOwner:String;
// 定义连接远程FMS服务器对象
private var myNC:NetConnection;
// 定义一个远程共享对象
private var mySO:SharedObject;
// 定义流对象
private var myNS:NetStream;
// 定义摄像头对象
private var myCam:Camera;
// 定义话筒对象
private var myMir:Microphone;
// 定义video视频对象
private var videoNet:Video;
// 定义连接远程服务器的对象
private var mySubNS:NetStream;
// 定义无权限用户的数组
private var audienceListArray:Array;
// 定义有权限用户的数组
private var hostListArray:Array;
// 获取远程web端具有该房间权限的用户的集合
private var jsonDataArray:Array;
/**
* 功能描述:初始化构造函数
**/
public function VideoMain(audienceList:List,hostList:List,audienceShowMess:TextArea,audienceMess:TextArea,audienceBtn:Button,hostShowMess:TextArea,hostMess:TextInput,hostBtn:Button,videoTemp:VideoDisplay)
{
this.audienceBtn = audienceBtn;
this.audienceList = audienceList;
this.audienceMess = audienceMess;
this.audienceShowMess = audienceShowMess;
this.hostBtn = hostBtn;
this.hostList = hostList;
this.hostMess = hostMess;
this.hostShowMess = hostShowMess;
this.videoTemp = videoTemp;
// 初始化参数
this.init();
// 连接远程FMS服务器
this.startConnection();
}
接着我们编写init方法。
/**
* 初始化参数
**/
public function init():void{
IP = "127.0.0.1";
fmsPath = "rtmp://"+IP+"/VideoPerfo";
userLoginName = ExternalInterface.call("getUserLoginName")
//userLoginName = "user"+int(Math.random()*10+1)+"_1";
// 设置的测试数据,房间所有者的帐号为user1房间编号为1
// roomOwner = "user1_1";
roomOwner = ExternalInterface.call("getRoomOwner");
trace(userLoginName+"<==+++==>"+roomOwner);
if(userLoginName==null){
userLoginName = "user"+int(Math.random()*10+1)+"_1";
}
if(roomOwner==null){
roomOwner = "user1_1";
}
trace(userLoginName+"<====>"+roomOwner);
}
上面的注释部分是为了获取我们js端传送过来的参数,现在我们只是在as端演示,因此我们只需要设置一个随机数来实现我们的功能就可以了,初始化好我们的参数以后,我们接着编写我们的startConnection方法。
/*
* 功能描述:连接FMS远程服务器
*/
public function startConnection():void{
myNC = new NetConnection();
// 指定AMF的版本
myNC.objectEncoding = ObjectEncoding.AMF0;
myNC.client = this;
// 分配连接FMS的监听事件
myNC.addEventListener(NetStatusEvent.NET_STATUS,netStatus);
myNC.addEventListener(AsyncErrorEvent.ASYNC_ERROR,asyncError);
myNC.addEventListener(SecurityErrorEvent.SECURITY_ERROR,securityError);
// 用该用户名和房间号连接远程的FMS服务器
myNC.connect(fmsPath,userLoginName);
}
通过上面的代码我们能清楚的知道每一行代码的意义,而这三个监听事件才是最主要的第一个监听事件是判断我们连接远程的FMS服务器是否成功,第二个监听连接FMS远程服务器解析异常监听事件,第三个监听则是连接FMS远程服务器安全性错误时触发的事件,其他两个监听事件根据实际的需要进行扩展,接下来的重点是连接远程FMS服务器这个监听事件。
/*
* 功能描述:连接FMS远程服务器监听事件
*/
public function netStatus(event:NetStatusEvent):void{
switch(event.info.code){
case "NetConnection.Connect.Success" :
trace("连接成功!");
setMySO();
hostBtn.addEventListener(MouseEvent.MOUSE_DOWN,sendMsgByMouse);
hostMess.addEventListener(KeyboardEvent.KEY_DOWN,sendMsgByKey);
audienceBtn.addEventListener(MouseEvent.MOUSE_DOWN,sendAudienceMsgByMouse);
publicMyVideo();
break;
case "NetConnection.Connect.Failed" :
trace("连接失败!");
break;
case "NetConnection.Connect.Rejected":
trace("拒绝失败!");
break;
}
}
连接FMS服务器成功以后创建一个远程共享对象
/*
* 功能描述:连接FMS服务器成功以后创建一个远程共享对象
*/
public function setMySO():void{
mySO = SharedObject.getRemote("mySO",myNC.uri,false);
mySO.addEventListener(SyncEvent.SYNC,mySoSync);
mySO.connect(myNC);
}
然后再将按钮和文本框的监听事件都添加进来,最后再发布视频,或者接受视频
/*
* 功能描述:连接FMS服务器成功以后发布自己的视频到服务器上
*/
private function publicMyVideo():void{
if(userLoginName==roomOwner){
trace("房间管理员进入房间!");
myCam = Camera.getCamera();
myMir = Microphone.getMicrophone();
videoNet = new Video();
videoNet.height = videoTemp.height;
videoNet.width = videoTemp.width;
videoNet.attachCamera(myCam);
videoTemp.addChild(videoNet);
myNS= new NetStream(myNC);
myNS.client = this;
// 将声音和图像上传到FMS服务器
myNS.attachCamera(myCam);
myNS.attachAudio(myMir);
myNS.publish(userLoginName,"live");
}else{
trace("非房间管理员进入房间!");
mySubNS= new NetStream(myNC);
mySubNS.client = this;
videoNet = new Video();
videoNet.height = videoTemp.height;
videoNet.width = videoTemp.width;
videoNet.attachNetStream(mySubNS);
videoTemp.addChild(videoNet);
mySubNS.play(roomOwner);
}
}
mySoSync该方法是在监听有新的用户登录的时候,那么客户端该方法就会被响应,那么我们就可以获取到新登录的用户,
/*
* 功能描述:监听远程共享对象
*/
private function mySoSync(e:SyncEvent):void{
hostListArray = new Array();
audienceListArray = new Array();
for(var loginUser:Object in mySO.data){
hostListArray.push(loginUser);
audienceListArray.push(loginUser);
}
// 将具有权限的用户的数组赋给audienceList集合
audienceList.dataProvider = audienceListArray;
// 将不具有权限的用户的数组赋给hostList集合
hostList.dataProvider = hostListArray;
}
到此那么我们就完成了一个最简单的远程视频网站的工作了,可是在这里我们还没和我们的web远程服务器相结合,接下来我会介绍如何与远程web服务器结合,来实现我们完整的功能。
在上面的例子中在敲好代码以后一定要记得把包导入到工程中去,否则整个工程是运行不起来的。
还需要注意的是,如果需要用到debug模式的话,那必须得去下载一个flash-debug的flash版本,直接去flash官网那里可以下载,只有下载了这个版本的flash以后我们才可以运行我们的debug模式。