手把手教你做视频直播：音视频直播的实现

手把手教你做视频直播：音视频直播的实现

• 博客分类： 
• 水煮RIA

Flex 应用服务器 ActionScript 网络应用 互联网 

开发环境及工具准备：

Adobe Flex Builder 3

FlashMeidaServer 2 及以上（简称：FMS 本人有一个FMS2破解版，需要的话联系我）

 

技能准备：

ActionScript 3 （简称：AS）

 

本功能的实现方式基于FMS为主，ActionScript为辅，双方交互的原则，示意图如下：

 

描述：教师端采集本地摄像头视频及MIC音频通过AS发布到FMS，学生端通过AS连接FMS服务器或者教师传输的音视频数据进行播放。至此为止，即可实现教师的音视频数据共享（即直播效果）。

 

具体实现（教师端）：

STEP1:在Flex Application 的creationComplete事件调用init方法

Java代码  

1. private var conn:NetConnection = new NetConnection();//用来连接FMS  
2. private var stream:NetStream = null;//盛放音视频数据  
3. //FMS连接串（例如：rtmp://192.168.1.101/fmsapp）  
4. //其中需要在FMS_HOME/applications/新建一个fmsapp的文件夹  
5. private var fms:String = "";  
6.   
7. private function init():void {  
8. //轨道通信，必须要设置  
9. conn.objectEncoding = ObjectEncoding.AMF0 ;  
10. //共享对象轨道通信设置  
11. SharedObject.defaultObjectEncoding = ObjectEncoding.AMF0;   
12. //连接FMS服务器  
13. conn.connect(fms) ;  
14. //连接FMS结果事件处理器  
15. conn.addEventListener(NetStatusEvent.NET_STATUS,connectFMS) ;  
16. }  

 

 

STEP2:连接FMS成功后，发布音视频数据到FMS服务端

Java代码  

1. private function connectFMS(e:NetStatusEvent):void {  
2. var result:String = e.info.code ;//连接FMS的返回代码  
3.     switch(result) {  
4.           case "NetConnection.Connect.Success"://连接FMS成功  
5.        playStream();//开发传送音视频数据  
6.        break;  
7.           case "NetStream.Play.StreamNotFound":  
8.           Alert.show( "视频流没有找到");  
9.           break;  
10.          default :  
11.          Alert.show( "连接服务器失败,检查网络环境");  
12.           break ;  
13.         }  
14. }  
15. public var cam1:Camera = null;//摄像头对象  
16. private var mir:Microphone = null;//麦克对象  
17. private function playStream():void {  
18.     stream = new NetStream(conn);//创建于FMS连接相关的音视频数据流对象  
19.            cam1 = Camera.getCamera("0");//获得默认摄像头  
20.            cam1.setMode(320,240,15); //经试验：320*240效果较佳而占用网络流量较小 15为keyFrame  
21.                  cam1.setQuality(100 * 1000,90); //100*1000为上传带宽 90为图像质量  
22.             mir = Microphone.getMicrophone();//获得麦克对象  
23.             mir.setUseEchoSuppression(true);//抑制回声  
24.             stream.attachAudio(mir);//将音频加入到流中  
25.             stream.attachCamera(cam1);//将视频加入到流中  
26.             vd.attachCamera(cam1);//在Flex Application中放一个VideoDisplay对象，用来本地观看图像  
27.             stream.publish("conf","live");//将音视频数据发布到FMS服务器上，流名称为：conf 发布类型为：live（实时）  
28. }  

  

至此：教师已将音视频数据发布到FMS。

需要注意的点：摄像头对象的分辨率设置，这样会直接影响到图像的清晰度和传送数据量的大小。

接下来将由学生端对此数据进行读取

STEP1:如教师端STEP1进行相关设置

STEP2:成功连接FMS服务器后，进行音视频数据播放（学生端playStream方法的实现）

Java代码  

1. stream = new NetStream(conn);//学生端的流对象 conn为NetConnection对象  
2. //学生端的缓冲时间。此参数很重要，很多朋友反应：播放视频不流畅。  
3. //要明确一个观点：没有绝对的实时直播，所谓的直播其实就是在不断的播放缓冲区的数据  
4. stream.bufferTime = 15;   
5. //按照道理来说这里应该是检测缓冲区的代码  
6. //但本程序为展示直播的核心将此代码略掉，有兴趣的朋友可以问我  
7. v = new Video();   
8. v.attachNetStream(stream); //将音视频流附加到video对象中  
9. v.width = vd.width;  
10. v.height = vd.height;  
11. v.smoothing = true;  
12. vd.addChildAt(v,1);//VideoDisplay通过对Video的添加来播放音视频流  
13. stream.play("conf");//播放教师发布的conf流  

 

至此，学生将实现音视频流的播放。

需要注意的点：缓冲区的设置，实际应用中应根据实际客户带宽来设置缓冲区大小

 

大家最好找个局域网环境测试下，最好不要在本机测试，这会隐藏很多问题，有什么疑问大家尽管留言！

 

 

---------------------------------------------------------

比较有用的学习FMS的资料

 

基于FMS的远程互动教学系统设计与实现

http://www.docin.com/p-116813055.html

 

 

id="iframeu1405021_0" src="http://pos.baidu.com/hcim?rdid=1405021&dc=2&di=u1405021&dri=0&dis=0&dai=1&ps=2982x470&dcb=BAIDU_SSP_define&dtm=BAIDU_DUP_SETJSONADSLOT&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1467357899461&ti=%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E4%BD%A0%E5%81%9A%E8%A7%86%E9%A2%91%E7%9B%B4%E6%92%AD%EF%BC%9A%E9%9F%B3%E8%A7%86%E9%A2%91%E7%9B%B4%E6%92%AD%E7%9A%84%E5%AE%9E%E7%8E%B0%20-%20%E4%B8%9C%E7%9E%85%E8%A5%BF%E6%9C%9B%E5%B7%A6%E7%9E%A7%E5%8F%B3%E7%9C%8B%20-%20ITeye%E6%8A%80%E6%9C%AF%E7%BD%91%E7%AB%99&ari=1&dbv=2&drs=1&pcs=1423x775&pss=1423x3030&cfv=0&cpl=4&chi=2&cce=true&cec=UTF-8&tlm=1467357899&rw=775&ltu=http%3A%2F%2Fmhqawjh.iteye.com%2Fblog%2F726913&ltr=http%3A%2F%2Fmhqawjh.iteye.com%2Fblog%2F725047&ecd=1&psr=1440x900&par=1440x860&pis=-1x-1&ccd=24&cja=false&cmi=5&col=zh-CN&cdo=-1&tcn=1467357900&qn=9b09f78ad84588da&tt=1467357899424.263.1774.1778" width="468" height="60" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="border-width: 0px; border-style: initial; vertical-align: bottom; margin: 0px;">

分享到：   

FMS学习资料列表 |  手把手教你做视频直播：基于Flex+FMS+Java ...

• 2010-08-02 10:57
• 浏览 7499
• 评论(9)
• 分类:Web前端
• 相关推荐

参考知识库

软件测试知识库 61  关注 | 244  收录

C++知识库 522  关注 | 579  收录

C语言知识库 664  关注 | 1842  收录

React知识库 344  关注 | 282  收录

评论

9 楼  726681665 2014-12-28  

正需要

8 楼  zhangguofeng123 2011-11-07  

博主您好： 
    请教一个问题 
private function playStream():void {   
    stream = new NetStream(conn);//创建于FMS连接相关的音视频数据流对象   
    cam1 = Camera.getCamera("0");//获得默认摄像头   
    cam1.setMode(320,240,15); //经试验：320*240效果较佳而占用网络流量较小 15为keyFrame   
    cam1.setQuality(100 * 1000,90); //100*1000为上传带宽 90为图像质量   
    mir = Microphone.getMicrophone();//获得麦克对象   
    mir.setUseEchoSuppression(true);//抑制回声   
    stream.attachAudio(mir);//将音频加入到流中   
    stream.attachCamera(cam1);//将视频加入到流中   
    vd.attachCamera(cam1);//在Flex Application中放一个VideoDisplay对象，用来本地观看图像   
    stream.publish("conf","live");//将音视频数据发布到FMS服务器上，流名称为：conf 发布类型为：live（实时）   
}  
以上代码是您以摄像的方式将流发布到服务器上。如果我要发布一个现有的视频到服务器上，客户端以同步的方式看录像（有点类似于直播）。这边要怎么样操作呢。。？

7 楼  tqingguang6688 2011-10-29  

楼主你好，最近我在在研究rtmp这方面的，RTMP服务我已经自行实现，通过flex编写的视频直播也挺流畅的，但过了一个小时后，就出现画面跳动现象，关了FLEX客户端，再连就正常了。不知道是什么问题，望交流研究，q：280429608 
附flex代码： 
package 
{ 
import flash.display.Sprite; 
import flash.events.*; 
import flash.media.Video; 
import flash.net.NetConnection; 
import flash.net.NetStream;


public class ftest extends Sprite 
{ 
public function ftest() 
{ 
//var params:Object = FlexGlobals.topLevelApplication.parameters; 
var fileName:String = "mp4:guang.3gp";
var nc:NetConnection = new NetConnection(); 
var ns:NetStream; 

nc.objectEncoding = flash.net.ObjectEncoding.AMF0; 
nc.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus); 

var counter:int = 0;
function onNetStatus(evt:NetStatusEvent):void { 
trace("onNetStatus: "+evt.info.code); 
if (evt.info.code =="NetConnection.Connect.Success") { 
ns = new NetStream(nc); 
ns.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus); 
ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler); 

var myVideo:Video = new Video(480, 320);
myVideo.attachNetStream(ns); 

addChild(myVideo); 
myVideo.x = 0; 
myVideo.y = 0; 

ns.bufferTime = 0; 
ns.backBufferTime = 0; 

ns.play(fileName, true);
} 
}
//nc.connect("rtmp://192.168.9.128/oflaDemo", true); 
nc.connect("rtmp://192.168.1.20/oflaDemo", true); 
//nc.close(); 

function asyncErrorHandler(event:AsyncErrorEvent):void{ 
//ignore error; 
} 

NetConnection.prototype.onBWDone = function(p_bw) { 
trace("onBWDone: "+ p_bw); 
};

NetConnection.prototype.onBWCheck = function() { 
return ++counter; 
} 
} 


} 
}

6 楼  yangpixxxx 2011-09-23  

这也叫“手把手教......”，呵呵，玩笑呐？标题党吧

5 楼  sailei1 2011-01-13  

我觉得 你应该 发个源码在javaeye上  好上大家学习 共同进步！

4 楼  adriny 2010-11-21  

你好，我们公司是一个开发互联网远程教育平台的公司，目前正在尝试开发直播功能，使用FMS来完成，看过了你的帖子，我自己也已经完成了直播流程的实现，但是还是有很多的细节地方没有注意好，就像 你帖子里面说过的缓冲等相关问题都没有仔细考虑，不知道你是不是能够给我一个建议，关于直播需要特别关注的一些性能或其他方面的问题，谢谢！

3 楼  myworkfirst 2010-10-21  

上面是java代码吗?

2 楼  takingoff 2010-08-05  

博主 上一篇博文的屏幕共享实现了吗？ 
我最近也在做这方面的开发
采用 虚拟摄像头录制屏幕 在flex里加载摄像头 publish到red5或者fms服务器上
效果均不是很好 一卡一卡的
你遇到过类似问题吗？

1 楼  qianlei007 2010-08-05  

可否 提供 代码， 学习一下呢！