首发于码农的码
用FLASH实现WEB在线视频聊天

用FLASH实现WEB在线视频聊天

最近因为项目需要,要求实现像QQ一样的在线视频聊天功能。刚开始我以为这个东西一般都是在用户浏览器端安装第三方插件实现的,后来经过一翻搜索才知道用FLASH就可以解决这个问题。

实现原理

实现思路:
假设A想跟B视频聊天,A在打开浏览器页面的时候,会加载一个FLASH,而这个FLASH可以获取A机器上的摄像头,将A的摄像头镜像显示在FLASH上,这样A就看到了自己,这个时候A要用2,3秒的时间将自己的视频录像同步上传到FMS服务器中。

B收到A的请求,B在浏览器端也加载了一个FLASH,看到了自己的同时也看到了从FMS服务器传来的A的视频录像,所以B看到A的录像总比正常的视频慢那么一点。

下面说一下搭建FMS服务器容易遇到的一些问题

实现流程

第一,安装FMS到一半的时候,安装程序会安装一些Microsoft Framework和C++ Redistributable库文件,如果你之前安装了这些库(比如Visual C++开发环境或者游戏),有可能会导致安装中断,如果忽略仍可继续安装,安装完成后,服务器没有任何异样,但在FLASH连接服务器的时候,无法使用rtmp协议,导致无法使用服务器上的资源,这时候你可能要忍痛割爱了,删掉相关软件了,甚至还要重装系统。

第二、如果在安装过程中没有遇到安装中断,基本上就是安装成功了。XP下输入http://localhost直接进入FMS服务欢迎页面,如果你能看到里面的视频,说明安装就真的没问题了。但在WIN7下面,需要手动启动FMSHttp服务,具体操作如下:
在“开始”菜单的搜索框中输入“服务”,在弹出的对话框中启用FMSHttp服务。

服务启动后,这时候输入http://localhost就会出现正常页面了。

第三、服务安装完成了,这个时候要在服务器的安装目录下,找到applications文件夹,创建一个项目目录,比如chat,然后把applications下的live或者vod文件夹下的除readme文件以外的文件都拷到新建的chat文件夹中。这个时候就可以连接FMS服务器了。
打开FLASH CS6,新建一个action script 3.0文件,打开动作面版,输入以下代码:

client_nc = new NetConnection();
client_nc.onStatus = function(info) {
// 利用trace功能将server返回的信息可视化
trace(“Level: “+info.level+newline+”Code: “+info.code);
};
client_nc.connect(“rtmp://localhost/chat”);
在输出面板中如果显示 NetConnection.Connect.Success,则说明服务器连接成功


4.连上服务器了,接着就可以发布视频了,在操作发布视频的时候,我遇到了一个超级难题,服务器说我没有权限,在网上找了一些资料,说是修改main.far文件中application.xml中的配置,NND,那main.far文件说什么都打不开,谁见过这个类型的鸟文件啊,网上说用winrar可以打开,我整了半天也没整出来,后来突然灵感一动,将main.far文件用winrar压缩后,再在winrar中双击打开,这样就可以看到里面的三个文件,将其解压出来,这样就可以修改里面的配置了。可是修改了配置以后,怎么变成far文件啊,我想都没想就直接在winrar中将main.rar改成了main.far没想到再发布的时候,竟然成功了。

发布视频代码如下:

    this.cam = Camera.get();//获取摄像头对象
mybox.attachVideo(this.cam);//元件绑定摄像头
out_ns = new NetStream(client_nc);//创建输出流
out_ns.attachVideo(this.cam);//将摄像头绑定到输出流上。
function sendFlv() {
out_ns.publish(“mycam_01”, “record”);//将视频流命名为mycam_01,发布到服务器上。
}
setInterval(sendFlv,2000);//每格2000这毫秒发布一次。


5、接收视频
接收视频就更简单啦,代码如下:

var playFileName = "mycam_02";
      //创建新的NetStream流对象,将会用来播放留言信息
      in_ns = new NetStream(client_nc);
     //通过NetStream.play方法播放server上的flv文件
     in_ns.play(playFileName);

到目前为止,整个视频聊天的效果就出来了

发布于 2018-11-28

文章被以下专栏收录