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

• 博客分类：

开发环境及工具准备：

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. private function init(): void {
7. //轨道通信，必须要设置
8. conn.objectEncoding = ObjectEncoding.AMF0 ;
9. //共享对象轨道通信设置
10. SharedObject.defaultObjectEncoding = ObjectEncoding.AMF0;
11. //连接FMS服务器
12. conn.connect(fms) ;
13. //连接FMS结果事件处理器
14. conn.addEventListener(NetStatusEvent.NET_STATUS,connectFMS) ;
15. }

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的远程互动教学系统设计与实现

id=“iframeu1405021_0” src=“ 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;">

分享到：

|

• 2010-08-02 10:57
• 浏览 7499
• 分类:

参考知识库

:

61 关注 |

244

收录

522 关注 |

579

收录

664 关注 |

1842

收录

344 关注 |

282 收录

评论

9 楼 2014-12-28

正需要

8 楼 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 楼 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 楼 2011-09-23

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

5 楼 2011-01-13

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

4 楼 2010-11-21

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

3 楼 2010-10-21

上面是java代码吗?

2 楼 2010-08-05

博主 上一篇博文的屏幕共享实现了吗？

我最近也在做这方面的开发

采用 虚拟摄像头录制屏幕 在flex里加载摄像头 publish到red5或者fms服务器上

效果均不是很好 一卡一卡的

你遇到过类似问题吗？

1 楼 2010-08-05

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