Flex the world » FMS http://www.flextheworld.com Flex, AIR, FMS, P2P and Things...... Fri, 10 Sep 2010 08:08:54 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Flex 迷你教程 — 基于Stratus的P2P网络电话 (3) http://www.flextheworld.com/2009/01/flex-stratus-phone-3.html http://www.flextheworld.com/2009/01/flex-stratus-phone-3.html#comments Sat, 17 Jan 2009 14:40:07 +0000 Kevin Luo http://www.flextheworld.com/?p=276 在Flex 迷你教程 — 基于Stratus的P2P网络电话 (2)中我们已经知道如何链接一个客户端并且互相发送短信，今天来扩展下面的这些内容

  1. 呼叫时在被呼叫端显示 “接受”，点击接受后双方建立链接。
  2. 呼叫试或者接通后可以挂机。
  3. 添加视频与音频通信。

首先来看看Demo:

Demo 操作:

1. 输入任意名称，点击链接 （两台机器或者两个浏览器）
2. 输入对方的peerId，点击呼叫
3. 被呼叫方点击 “接受” 建立链接。
4. 开始语音，视频，文字通讯.
5. 挂机

Demo地址:

http://flextheworld.com/flash/p2p/P2pPhoneDemo.html

Demo截图:

e59bbee78987-1

新添加的代码

首先是修改call() function, 根据不同的label执行不同的事件，如果callYou.label是 “接受”，执行accpetHandle()与呼叫者建立链接，如果是”挂断”，那么执行hangup()挂断双方的通讯，如果是其他(也就是”呼叫”)，则执行后面的内容。

呼叫时调用publishVide和publishAudio将视频与音频附加到outgoingStream发送。在onConnectSuccesss事件中播放被呼叫者返回的视频和音频。监听onHangup事件来控制挂断。呼叫时将“呼叫”改为“挂断”。

?View Code ACTIONSCRIPT3
//呼叫对方的方法，现在是呼叫者角色
private function call():void{
 
if(callYou.label == "接受"){
accpetHandle();
callYou.label = "挂断"
return;
}else if(callYou.label == "挂断"){
outgoingStream.send("onHangup")
this.hangup()
 
return;
}
 
...............
 
//发送视频
publishVideo();
//发送音频
publishAudio()
 
..........
 
//监听onConnectSuccess事件，确定链接成功
i.onConnectSuccess = function(name:String):void
{
info.text += "与"+name + "链接成功n";
sendMessageBtn.enabled = true;
incomingStream.receiveAudio(true)
incomingStream.receiveAudio(true)
remoteVideo = new Video();
remoteVideo.width = 160;
remoteVideo.height = 120;
remoteVideo.attachNetStream(incomingStream);
remoteVideoDisplay.addChild(remoteVideo);
sendMessageBtn.enabled = true;
}
 
i.onHangup = function():void{
hangup()
}
 
incomingStream.client = i
 
callYou.label = "挂断"

被呼叫者在监听到呼叫者的呼叫时不马上回应，只是提示被呼叫者 “正在被链接”，同时将“呼叫”改为“接受”, 监听onHangup事件

?View Code ACTIONSCRIPT3
private function initSendStream():void{
 
..........
 
//监听onPeerConnect事件
var o:Object = new Object();
o.onPeerConnect = function(subscriberStream:NetStream):Boolean
{
..........
 
incomingStream.receiveAudio(false)
incomingStream.receiveAudio(false)
..........
 
//监听onIncomingCall事件，用于确定链接成功
i.onIncomingCall = function(name:String):void
{
//显示链接成功后，对呼叫者发布我的信息流，名称为callee
info.text += name + " 正在呼叫你n";
callYou.label = "接受"
}
 
i.onHangup = function():void{
hangup()
}
incomingStream.client = i;
 
return true;
}
 
myStream.client = o;
}

点击“接受”后，开始向呼叫者发送信息流，包括视频与音频。同时播放呼叫者发送的视频与音频，最后发出onConnectSuccess事件

?View Code ACTIONSCRIPT3
//同意链接后，发送stream到呼叫端，包括音频，视频的发送。 同时播放呼叫端发出的视频，音频
private function accpetHandle():void{
//向呼叫端发送信息流
outgoingStream = new NetStream(netConnection, NetStream.DIRECT_CONNECTIONS);
outgoingStream.addEventListener(NetStatusEvent.NET_STATUS, outgoingStreamHandler);
outgoingStream.publish("callee");
//将视频，音频附加到outgoingStream
publishAudio();
publishVideo()
 
//播放接受到的视频，音频
incomingStream.receiveAudio(true)
incomingStream.receiveAudio(true)
remoteVideo = new Video();
remoteVideo.width = 160;
remoteVideo.height = 120;
remoteVideo.attachNetStream(incomingStream);
remoteVideoDisplay.addChild(remoteVideo);
//链接成功事件，呼叫端响应
outgoingStream.send("onConnectSuccess",userName.text);
sendMessageBtn.enabled = true;
}

点击挂机后在上面提到的call()中执行hangup(), 同时发送onHangup事件，这样另一方也能挂断电话。挂机后将”挂机”再改为”呼叫”，允许下一次的呼叫和链接

?View Code ACTIONSCRIPT3
//挂断电话，清空所有stream，只保持于stratus的链接
public function hangup():void{
if (incomingStream){
incomingStream.close();
incomingStream.removeEventListener(NetStatusEvent.NET_STATUS, incomingStreamHandler);
}
 
if (outgoingStream){
outgoingStream.close();
outgoingStream.removeEventListener(NetStatusEvent.NET_STATUS, outgoingStreamHandler);
}
 
if (controlStream){
controlStream.close();
controlStream.removeEventListener(NetStatusEvent.NET_STATUS, netStreamHandler);
}
 
incomingStream = null;
outgoingStream = null;
controlStream = null;
if(localVideo != null){
localVideo.attachCamera(null)
}
 
if(remoteVideo != null){
remoteVideo.attachCamera(null)
}
 
info.text += "挂机！"
callYou.label = "呼叫"
sendMessageBtn.enabled = false;
}

publishVideo和publishAudio function

?View Code ACTIONSCRIPT3
//发送视频
private function publishVideo():void{
var cameras:Array = Camera.names;
var camera:Camera;
var findDefaultCamera:Boolean = false
if (cameras && cameras.length >0){
for(var j:int=0; j<cameras.length; j++){
if(cameras[j].toString() == "USB Video Class Video"){
camera = Camera.getCamera(j.toString())
outgoingStream.attachCamera(camera);
findDefaultCamera = true
}
}
if(!findDefaultCamera){
camera = Camera.getCamera()
outgoingStream.attachCamera(camera)
}
camera.setQuality(0,90)
 
localVideo = new Video();
localVideo.width = 160;
localVideo.height = 120;
localVideo.attachCamera(camera)
localVideoDisplay.addChild(localVideo);
}
}
//发送音频
private function publishAudio():void{
var mics:Array = Microphone.names;
if (mics && mics.length >0){
outgoingStream.attachAudio(Microphone.getMicrophone(0))
}
}

源文件下载 (装了一个类似论坛的回复才能下载的插件，试试)


P2pPhoneDemo3 (871)

]]> http://www.flextheworld.com/2009/01/flex-stratus-phone-3.html/feed 347 Flex 迷你教程 — 基于Stratus的P2P网络电话 (2) http://www.flextheworld.com/2009/01/flex-stratus-phone-2.html http://www.flextheworld.com/2009/01/flex-stratus-phone-2.html#comments Sat, 10 Jan 2009 08:53:39 +0000 Kevin Luo http://www.flextheworld.com/?p=248 接上篇，这一讲里我告诉大家如何链接另一个flash客户端，并且发送文字信息，在下一讲中会引入更多的内容，比如，“是否接收对方呼叫”，“语音和视频的发送” 等等。

看这篇教程时一定要把自己分成“呼叫者”和“被呼叫者”两个身份来看，否者有可能会看得头晕，呵呵。现在我们开始。

1. 首先了解一下我们会用到的变量, 这里要最主要的四个NetStream，他们的作用请看注释。

?View Code ACTIONSCRIPT3
//链接Adobe stratus 服务器
private const StratusAddress:String = "rtmfp://stratus.adobe.com";
 
//Developer Key,如果没有请根据Flex 迷你教程 -- 基于Stratus的P2P网络电话 (1)中的提示申请
private const DeveloperKey:String = "xxxxxx";
 
//我们需要一个nectConnetion与stratus 服务器链接
private var netConnection:NetConnection;
 
//用于对外发布自己的身份信息流
private var myStream:NetStream;
 
//用于链接后对外发布自己的信息流，比如音频，视频，文字
private var outgoingStream:NetStream;
 
//进入的信息流，这个流对应呼叫者的outgoingStream，用这个流尝试播放发布者发布的信息，比如音频，视频，文字
private var incomingStream:NetStream;
 
//用于尝试播放被呼叫者的身份信息流myStream发送的信息，被呼叫者在发送自己的身份信息流时会监听呼叫者对myStream的播放请求
private var controlStream:NetStream;

2. 下面是主要用到的方法。

呼叫者的主要方法/事件触发顺序，

init()
netConnectionHandler() — case “NetConnection.Connect.Success”:
initSendStream();
call();
onConnectSuccess()
onIm()

被呼叫者主要方法／事件的调用触发顺序

init()
netConnectionHandler() — case “NetConnection.Connect.Success”:
initSendStream();
onPeerConnect();
onIncomingCall();
onIm();

3. Demo (请打开两个浏览器进行Demo) :

操作方法:

  1. 任意填写用户名，点击链接。
  2. 在另一个浏览器同样登陆。
  3. 用其中一个的peerid作为链接ID呼叫对方。
  4. 链接成功后可以信息聊天。

4. 源代码下载与主要方法代码，学习请看注释，写的很清楚

输入用户名，点击 “链接”时触发下面的代码

?View Code ACTIONSCRIPT3
//链接 adobe stratus 服务器
private function init():void{
 
	if(userName.text == "")
	{
		Alert.show("请输入任意用户名","错误")
		return
	}
	netConnection = new NetConnection();
	netConnection.addEventListener(NetStatusEvent.NET_STATUS, netConnectionHandler);
	netConnection.connect(StratusAddress + "/" + DeveloperKey); //服务器地址里需要开发者Key
}

与stratus链接成功后在case “NetConnection.Connect.Success”里调用下面的方法

?View Code ACTIONSCRIPT3
private function initSendStream():void{
 
	//这三行表示我对外发布一个名称为netConnection.nearID的流，呼叫者通过我的nearID与我链接后，如果播放
	//这个名称为netConnection.nearID的流，会出发onPeerConnect事件，这样我就知道有人链接我
	myStream = new NetStream(netConnection, NetStream.DIRECT_CONNECTIONS);
	myStream.addEventListener(NetStatusEvent.NET_STATUS, netStreamHandler);
	myStream.publish(netConnection.nearID);
 
	//监听onPeerConnect事件
	var o:Object = new Object();
	o.onPeerConnect = function(subscriberStream:NetStream):Boolean
	{
		//当我收到呼叫者的链接请求后，尝试播放呼叫者的流名为"caller"的流，farID代表呼叫者的唯一ID，也就是前面提到的nearID
		//我通过farID找到呼叫者
	    incomingStream = new NetStream(netConnection,subscriberStream.farID);
        incomingStream.addEventListener(NetStatusEvent.NET_STATUS, incomingStreamHandler);
        incomingStream.play("caller");
 
        //监听onIm事件，用于收取文字信息
        var i:Object = new Object;
        i.onIm = function(name:String, value:String):void
        {
            info.text += name + ": " + value + "\n";
        }
        //监听onIncomingCall事件，用于确定链接成功
        i.onIncomingCall = function(name:String):void
        {
        	//显示链接成功后，对呼叫者发布我的信息流，名称为callee
            info.text += name + " 已经与你链接\n";
            outgoingStream = new NetStream(netConnection, NetStream.DIRECT_CONNECTIONS);
	        outgoingStream.addEventListener(NetStatusEvent.NET_STATUS, outgoingStreamHandler);
	        outgoingStream.publish("callee");
	        outgoingStream.send("onConnectSuccess",userName.text);
 
        }
        incomingStream.client = i;
 
        return true;
	}
 
	myStream.client = o;
}

呼叫者输入对方Peerid，点击呼叫后执行下面的代码

?View Code ACTIONSCRIPT3
private function call():void{
 
    //通过对方的peerId链接被呼叫者，播放对方的身份信息流
    controlStream = new NetStream(netConnection,peerId.text);
    controlStream.addEventListener(NetStatusEvent.NET_STATUS, netStreamHandler);
    controlStream.play(peerId.text);
 
    //同时对外发布呼叫者的信息流
    outgoingStream = new NetStream(netConnection, NetStream.DIRECT_CONNECTIONS);
    outgoingStream.addEventListener(NetStatusEvent.NET_STATUS, outgoingStreamHandler);
    outgoingStream.publish("caller");
 
    //尝试播放被呼叫者的信息流
    incomingStream = new NetStream(netConnection, peerId.text);
    incomingStream.addEventListener(NetStatusEvent.NET_STATUS, incomingStreamHandler);
    incomingStream.play("callee");
    info.text += "正在呼叫，请稍候...... \n\n"
 
    //监听信息发布事件
    var i:Object = new Object;
    i.onIm = function(name:String, value:String):void
    {
        info.text += name + ": " + value + "\n";
    }
    //监听onConnectSuccess事件，确定链接成功
     i.onConnectSuccess = function(name:String):void
    {
        info.text += "与"+name + "链接成功\n";
    } 
 
    incomingStream.client = i
 
}

被呼叫者在收到呼叫时执行

?View Code ACTIONSCRIPT3
o.onPeerConnect = function(subscriberStream:NetStream):Boolean
{
	//当我收到呼叫者的链接请求后，尝试播放呼叫者的流名为"caller"的流，farID代表呼叫者的唯一ID，也就是前面提到的nearID
	//我通过farID找到呼叫者
    incomingStream = new NetStream(netConnection,subscriberStream.farID);
    incomingStream.addEventListener(NetStatusEvent.NET_STATUS, incomingStreamHandler);
    incomingStream.play("caller");
 
    //监听onIm事件，用于收取文字信息
    var i:Object = new Object;
    i.onIm = function(name:String, value:String):void
    {
        info.text += name + ": " + value + "\n";
    }
    //监听onIncomingCall事件，用于确定链接成功
    i.onIncomingCall = function(name:String):void
    {
    	//显示链接成功后，对呼叫者发布我的信息流，名称为callee
        info.text += name + " 已经与你链接\n";
        outgoingStream = new NetStream(netConnection, NetStream.DIRECT_CONNECTIONS);
        outgoingStream.addEventListener(NetStatusEvent.NET_STATUS, outgoingStreamHandler);
        outgoingStream.publish("callee");
        outgoingStream.send("onConnectSuccess",userName.text);
 
    }
    incomingStream.client = i;
 
    return true;
}

呼叫者与被呼叫者链接成功后执行

?View Code ACTIONSCRIPT3
//监听onConnectSuccess事件，确定链接成功
i.onConnectSuccess = function(name:String):void
{
    info.text += "与"+name + "链接成功\n";
}

发送信息与接收信息代码

?View Code ACTIONSCRIPT3
//用outgoingStream对外发布信息流
private function send():void{
   info.text += userName.text + ": " + message.text + "\n";
    outgoingStream.send("onIm",userName.text,message.text);
}
 
//监听信息发布事件
var i:Object = new Object;
i.onIm = function(name:String, value:String):void
{
    info.text += name + ": " + value + "\n";
}

源代码

P2PhoneDemo1 (1387) ]]> http://www.flextheworld.com/2009/01/flex-stratus-phone-2.html/feed 108 FMS (Flash Media Server) 实例集 http://www.flextheworld.com/2009/01/flash-media-interactive-server-feature-explorer.html http://www.flextheworld.com/2009/01/flash-media-interactive-server-feature-explorer.html#comments Sat, 03 Jan 2009 09:03:47 +0000 Kevin Luo http://www.flextheworld.com/?p=169 原文标题：Using the Flash Media Interactive Server Feature Explorer

相信大家对Flex3 component explore以及Flex style explore已经不陌生了，他们对我们了解Flex控件以及如何设计样式有很大的帮助，现在(2008/7/21) Adobe又放出了 Flash Media Interactive Server Feature Explore，这使得我们学习Flex + FMS比原来又容易了太多, 还不知道FMS是干什么的？看看下面 :)

以下内容翻译自：http://www.adobe.com/devnet/flashmediaserver/articles/fmis_feature_explorer.html

FMIS server Feature Explorer 是用Adobe AIR开发的跨平台的桌面程序，它能帮助你探索 Flash以及AIR基于FMIS3的丰富且极具吸引力的应用。FMIS server Feature Explorer有超过30个的流媒体和多方式交流 (文字，视频交流)的例子。包括了基本的服务器链接实例，复杂的视频流，以及用户验证，你也可以从中学到如何开发视频信息以及网络电话。

安装好Feature Explorer的AIR端，下载服务器资源（下面的链接）并部属在免费的Flash Media Development Server上。每个例子都有源码 (MXML, as3.0, 以及服务器AS代码)


如何安装Flash Media Interactive Server Feature Explorer:
  1. 下载并安装Flash Media Development Server 3 或者 Flash Media Interactive Server 3. (不要装Flash Media Streaming Server 3)
  2. 下载并解压服务器端代码和视频文件（下面有下载）到你FMIS安装目录的/applications文件夹
  3. 安装 Flash Media Interactive Server Feature Explorer的AIR端。
  4. 启动 Flash Media Interactive Server Feature Explorer
  5. 点击顶部的Configure Services
  6. 输入FMIS地址，管理员信息。
  7. 测试多服务器的例子，输入第二台服务器的地址。

e59bbee78987-3

相关资源下载

Flash Media Interactive Server Feature Explorer

fms_explorer.air (550)

服务器端代码以及素材

fms_explorer_samples.zip (3226) (ZIP, 55MB)

]]> http://www.flextheworld.com/2009/01/flash-media-interactive-server-feature-explorer.html/feed 6