资料记录：flex+red5+blazeds实现视频通话demo

刚实习几个月，最近要做一个视频聊天的功能，组长让我用flex做。虽然是很老的技术，资料也少，但还是努力去做了。真正做了以后发现反而没有想象中的难，主要就baidu、整理、分析、实验。

demo环境：flex4.6 64位，tomcat6，myeclipse 10 64位,chrome。

以下是参考资料部分：

http://jingyan.baidu.com/article/495ba841f56c2738b30ede9f.html flex插件安装

http://wenku.baidu.com/view/46367d126c175f0e7cd137ba.html flex整合myeclipse

http://blog.csdn.net/dianfusoft/article/details/8062930 flex嵌入jsp

注意部分：

1：flex安装版本与myeclipse对齐，32位对32位，64位对64位，否则重装myeclipse（作死实验了好几遍）。

2：需要将red5和blazeds的三个war包拷贝到tomcat服务器webapp下。

3：三个链接里的东西整合后配置文件可能重名，如web.xml，需挑出各自的部分组合起来。

4：flex取值可以从后台用远程对象+事件监听取，也可以用import导入ExternalInterface后用ExternalInterface.call("test")直接调外部的js方法。

5：flex嵌入jsp只能用flex3，所以语法必须用flex3的语法，即mx标签，嵌入无需安装flex（不过编写的时候没有语法提示）。

连接red5地址自主修改，rtmp://10.250.196.113/oflaDemo

初始化时调用initValue，根据远程对象从后台取值（因为是demo所以写死了），remoting-config.xml中配置

取到值一个作为本地流名字，一个作为远程流名字，另一端就是反一下，其余的一样

上传下载流是根据流的名字的，red5的流保存在stream文件夹里

因为执行快慢的关系，我把初始化连接放在了myFlex_resultHandler(event)里，保证取到值后再初始化

连接初始化initConnection里添加监听，监听到连接成功后执行后续代码

后续代码主要看注释吧，毕竟还算详细

最重要的点是如果想关闭摄像头、麦克风的话必须把所有attach置为空

如attachCamera(null)，camera = null之类，关不掉说明有遗漏

我这里因为是嵌入到jsp（jsp页面功能只有播放），直接关闭页面就可以了

 

csdn上传文件限制60m，而且一直提示资源名字不对，需要的资源自己搜一下

以下是代码：

doctor.mxml

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:fx="http://ns.adobe.com/mxml/2006"
                layout="absolute"
                backgroundColor="white"
                initialize="initValue();">    
    <mx:RemoteObject id="myFlex" destination="mytest">
        <mx:method name="getMa" result="myFlex_resultHandler(event)"/>
    </mx:RemoteObject>
    <mx:Script>
        <![CDATA[    
            import mx.controls.Alert;
            import mx.rpc.events.ResultEvent;
            import flash.external.ExternalInterface;
            //定义一个连接
            public var netConnection:NetConnection; 
            //定义远程视频
            public var remoteVideo:Video;        
            //定义本地视频流  
            public var outStream:NetStream = null;
            public var netStreamName:String;
            //定义远程视频流
            public var remoteStream:NetStream = null;
            public var remoteStreamName:String;
            //定义一个摄像头  
            public var camera:Camera;  
            //定义一个麦克风  
            public var microphone:Microphone;      
            
            //rtmp服务器url
            private var rtmpUrl:String = "rtmp://10.250.196.113/oflaDemo";
            //定义帧数
            public var keyFrameInterval:int = 48;
            //播放速率
            public var keyFps:int = 8;
            public var keyRate:int = 10;
            public var keyQuality:int = 85;
            public var bufferTime:int = 500;
            public var encodeType:int = 2;
            public var gain:int = 60;    
            
            protected function myFlex_resultHandler(event:ResultEvent):void{
                var ma:Object = event.result as Object;
                netStreamName = ma.doctor as String;
                remoteStreamName = ma.patient as String;            
                initConnection();
            }        
            
            public function initValue():void{ 
                //调用外部js方法
                //Alert.show(ExternalInterface.call("test").b as String);
                myFlex.getMa();
            }     
            
            public function initConnection():void{  
                //初始化连接  
                netConnection = new NetConnection();             
                //为连接添加状态监听器  
                netConnection.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandler);
                //为连接添加安全错误监听器  
                netConnection.addEventListener(SecurityErrorEvent.SECURITY_ERROR,securityErrorHandler); 
                //连接到服务器  
                netConnection.connect(rtmpUrl);
            } 
            
            private function netStatusHandler(event:NetStatusEvent):void{
                if (event.info.code == "NetConnection.Connect.Success"){
                    //本地输出流
                    outStream = new NetStream(netConnection);  
                    remoteStream = new NetStream(netConnection);
                    //得到当前摄像头
                    camera = Camera.getCamera();
                    //当前摄像头可用
                    if(camera){        
                        //设置摄像头参数
                        camera.setMode(480,360,(Number(keyFps)));
                        camera.setQuality(480*360*keyFps/8,keyQuality);
                        camera.setKeyFrameInterval(keyFrameInterval);    
                        //得到当前麦克风
                        microphone = Microphone.getMicrophone();
                        //设置麦克风
                        //microphone.rate = keyRate;
                        //microphone.setUseEchoSuppression(true);
                        doIt();
                    }else{
                        Alert.show("没有找到摄像头");
                        return;
                    }
                }else{
                    Alert.show("连接服务器失败!");
                }    
            }  
            
            private function securityErrorHandler(event:SecurityErrorEvent):void{   
                Alert.show("securityErrorHandler: " + event);  
            }             
            
            public function doIt():void{    
                //本地视频流获取摄像头和麦克风
                outStream.attachCamera(camera);  
                outStream.attachAudio(microphone);                        
                //本地视频流上传
                outStream.publish(netStreamName,"record");
                
                //得到远程流
                remoteStream.play(remoteStreamName);
                //根据远程流获取视频
                remoteVideo = new Video();
                remoteVideo.attachNetStream(remoteStream);
                remoteVideo.width = 480;
                remoteVideo.height = 360;
                
                //将视频放到控件上
                itsVideo.addChild(remoteVideo);
                //本地视频播放
                myVideo.attachCamera(camera);                        
            }    
                
        ]]>
    </mx:Script>
    <mx:TitleWindow id="p" headerHeight="8" x="0" y="0" width="500" height="380" layout="absolute">
        <mx:VideoDisplay id="itsVideo" width="480" height="360"/>
        <mx:VideoDisplay x="360" y="270" id="myVideo" width="120" height="90"/>
    </mx:TitleWindow>
</mx:Application>
patient.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:fx="http://ns.adobe.com/mxml/2006"
                layout="absolute"
                backgroundColor="white"
                initialize="initValue();">    
    <mx:RemoteObject id="myFlex" destination="mytest">
        <mx:method name="getMa" result="myFlex_resultHandler(event)"/>
    </mx:RemoteObject>
    <mx:Script>
        <![CDATA[    
            import mx.controls.Alert;
            import mx.rpc.events.ResultEvent;
            //定义一个连接
            public var netConnection:NetConnection; 
            //定义远程视频
            public var remoteVideo:Video;        
            //定义本地视频流  
            public var outStream:NetStream = null;
            public var netStreamName:String;
            //定义远程视频流
            public var remoteStream:NetStream = null;
            public var remoteStreamName:String;
            //定义一个摄像头  
            public var camera:Camera;  
            //定义一个麦克风  
            public var microphone:Microphone;      
            
            //rtmp服务器url
            private var rtmpUrl:String = "rtmp://10.250.196.113/oflaDemo";
            //定义帧数
            public var keyFrameInterval:int = 48;
            //播放速率
            public var keyFps:int = 8;
            public var keyRate:int = 10;
            public var keyQuality:int = 85;
            public var bufferTime:int = 500;
            public var encodeType:int = 2;
            public var gain:int = 60;    
            
            protected function myFlex_resultHandler(event:ResultEvent):void{
                var ma:Object = event.result as Object;
                netStreamName = ma.patient as String;
                remoteStreamName = ma.doctor as String;            
                initConnection();
            }    
            
            public function initValue():void{  
                myFlex.getMa();
            }                 
            
            public function initConnection():void{  
                //初始化连接  
                netConnection = new NetConnection();             
                //为连接添加状态监听器  
                netConnection.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandler);
                //为连接添加安全错误监听器  
                netConnection.addEventListener(SecurityErrorEvent.SECURITY_ERROR,securityErrorHandler); 
                //连接到服务器  
                netConnection.connect(rtmpUrl);
            } 
            
            private function netStatusHandler(event:NetStatusEvent):void{
                if (event.info.code == "NetConnection.Connect.Success"){
                    //本地输出流
                    outStream = new NetStream(netConnection);  
                    remoteStream = new NetStream(netConnection);                    
                    //得到当前摄像头
                    camera = Camera.getCamera();
                    //当前摄像头可用
                    if(camera){        
                        //设置摄像头参数
                        camera.setMode(480,360,(Number(keyFps)));
                        camera.setQuality(480*360*keyFps/8,keyQuality);
                        camera.setKeyFrameInterval(keyFrameInterval);    
                        //得到当前麦克风
                        microphone = Microphone.getMicrophone();
                        //设置麦克风
                        //microphone.rate = keyRate;
                        //microphone.setUseEchoSuppression(true);    
                        doIt();
                    }else{
                        Alert.show("没有找到摄像头");
                        return;
                    }
                }else{
                    Alert.show("连接服务器失败!");
                }    
            }  
            
            private function securityErrorHandler(event:SecurityErrorEvent):void{   
                Alert.show("securityErrorHandler: " + event);  
            }             
            
            public function doIt():void{            
                //本地视频流获取摄像头和麦克风
                outStream.attachCamera(camera);  
                outStream.attachAudio(microphone);                        
                //本地视频流上传
                outStream.publish(netStreamName,"record");
                
                //得到远程流
                remoteStream.play(remoteStreamName);
                //根据远程流获取视频
                remoteVideo = new Video();
                remoteVideo.attachNetStream(remoteStream);
                remoteVideo.width = 480;
                remoteVideo.height = 360;

                //将视频放到控件上
                itsVideo.addChild(remoteVideo);
                //本地视频播放
                myVideo.attachCamera(camera);                            
            }    
                
        ]]>
    </mx:Script>
    <mx:TitleWindow id="p" headerHeight="8" x="0" y="0" width="500" height="380" layout="absolute">
        <mx:VideoDisplay id="itsVideo" width="480" height="360"/>
        <mx:VideoDisplay x="360" y="270" id="myVideo" width="120" height="90"/>
    </mx:TitleWindow>
</mx:Application>

remoting-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<service id="remoting-service" 
    class="flex.messaging.services.RemotingService">

    <adapters>
        <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>
    </adapters>

    <default-channels>
        <channel ref="my-amf"/>
    </default-channels>
    
    <destination id="mytest">
        <properties>
            <source>test.Accptech</source>
        </properties>
    </destination>

</service>

doctor.jsp

<%@ page language="java"contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<%@taglib uri="FlexTagLib"prefix="mm"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">  
<title>心理咨询</title>  
<style type="text/css">  
</style>  
<script type="text/javascript">
    function test(){
        return {a:'yes',b:'no'};
    }
</script>
</head>  
<body>  
<div id="chatPanel">
    <mm:mxml source="../mxml/doctor.mxml" width="500" height="380">  
    </mm:mxml>
</div>
</body>  
</html> 

patient.jsp

<%@ page language="java"contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<%@taglib uri="FlexTagLib"prefix="mm"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">  
<title>心理咨询</title>  
<style type="text/css">  
</style>  
<script type="text/javascript">

</script>
</head>  
<body>  
<div id="chatPanel">
    <mm:mxml source="../mxml/patient.mxml" width="500" height="380">  
    </mm:mxml>
</div>
</body>  
</html> 

test.jsp

<%@ page language="java"contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">  
<title>测试</title>  
<style type="text/css">  
</style>  
<script type="text/javascript">
function bo(){
    window.open('doctor.jsp','心理咨询','width=530,height=435,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');
}
function po(){
    window.open('patient.jsp','心理咨询','width=530,height=435,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');
}
</script>
</head>  
<body>  
<div style="width:600px;height:500px">
    <input type="button" value="视频聊天-医生" onclick="bo()"/>
    <input type="button" value="视频聊天-病人" onclick="po()"/>
</div>
</body>  
</html> 

 

代码部分就到此为止，测试步骤：

打开两个http://localhost:8088/flexweb/jsp/test.jsp，一个作为医生端，一个作为病人端，注意端口

偷懒只写了一个jsp，里面有两个按钮

一个页面点左按钮，另一个页面点右按钮，再允许使用摄像头就可以了

因为流名称写死了每次用需要将red5里stream文件夹下流文件清空

谷歌浏览器样子还不错，ie有点丑

现在是两端都是自己