Flash+fms视频录制在项目中的实际应用

Flash+fms视频录制在项目中的实际应用

前言：以下只是记录本人在项目中的应用，而flash+fms视频录制有多种实现方式，具体可根据实际情况而定！

1：古人云：工欲善其事，必先利其器，首先安装flash+flash media server（fms），以下主要介绍fms，具体下载以及安装过程略！安装完成之后，可以在windows所有程序Adobe文件夹中找到如下：

接下来 点击 （start adobe media server 5）开启服务，之后，如图：

打开控制台，在接一下关于控制台的一些介绍就省略了（更多详情网上很多，可以自行搜索！）

2：接下来在看看fms对应那些文件夹是我们需要多了解的（只是针对视频录制方面）：

以上几个文件夹中，重点说一下conf文件夹，因为在实际项目中，如果需要把录制的视频文件直接放到我们自定义的文件夹下面，那么需要在conf文件夹下的ams.ini 中添加对应的站点文件夹路径，举例如下截图：

注：以上 （e：\webtemp\video.abc.com\为服务器上站点路径），这样在视频录制完成之后，视频就会保存到自己设定的文件夹中了，更多关于fms的还需要自己去查询资料学习(我知道的已差不多就这些了......)

3：flash编写as（actionScript）代码：具体代码如下（代码实现方式多种多样，以下只是其中一种实现方式，仅供参考）：

as代码：

package 

{

import flash.display.MovieClip;

import flash.media.*;

import flash.display.*;

import flash.net.*;

//import fl.controls.*;

import flash.events.*;

import flash.geom.*;

import flash.net.NetConnection;

import flash.net.NetStream;

import flash.display.MovieClip;

import flash.net.Responder;

import flash.events.MouseEvent;

import flash.events.NetStatusEvent;

import flash.events.AsyncErrorEvent;

import fl.motion.MotionEvent;

import flash.utils.Timer;

import flash.external.ExternalInterface;

import flash.utils.ByteArray;

import flash.display.Bitmap;

import flash.display.BitmapData;

import flash.display.Sprite;

import flash.net.URLRequest;

import flash.net.navigateToURL;

//需要在脚本设置里面添加abobe核心类库

import com.adobe.images.JPGEncoder;

public class ASflashVideo extends Sprite

{

private var cam:Camera;

private var nc:NetConnection;

private var ns:NetStream = null;

private var myVideo:Video;

private var mic:Microphone;

private var mystage:Stage;

private var videoName:String = null;

private var flag:Boolean = false;

private var bitmapData:BitmapData = null;

public function ASflashVideo():void

{

//注册JavaScript：;

/*方法名用as开头表示此方法是js与as交互的方法*/

ExternalInterface.addCallback("asInit",Init);

ExternalInterface.addCallback("asStartRecord",StartRecord);

ExternalInterface.addCallback("asStopRecord",StopRecord);

ExternalInterface.addCallback("asPlayBackVideo",PlayBackVideo);

//截图：;

ExternalInterface.addCallback("asPrintScreen",PrintScreen);

}

/*初始化，连接fms*/

public function Init(fmsUrl:String):void

{

nc = new NetConnection();

nc.addEventListener(NetStatusEvent.NET_STATUS,onNetStatus);

nc.connect("rtmp://"+fmsUrl);

}

public function onNetStatus(event:NetStatusEvent):Boolean

{

trace(event.info.code);

if (event.info.code == "NetConnection.Connect.Success")

{

ExternalInterface.call("Tips","连接服务器成功！");

return true;

}

else if (event.info.code=="NetStream.Play.Stop")

{

//监听回放处理：
this.ns.pause();
ExternalInterface.call("Tips","视频回放结束！");
return true;
}

else

{
return false;
}

}

/*点击开始录像

初始化摄像头，当用户点击了允许之后才开始录像

*/

public function StartRecord(myVideoName:String):Boolean

{
videoName = myVideoName;

if (flag)
{

ExternalInterface.call("Tips","您刚才点击了拒绝摄像头请重新刷新页面");
}

else

{
ExternalInterface.call("Tips","录像名称为："+videoName);
}

cam = Camera.getCamera();

//判断是否有摄像头：

if (cam!=null)

{

//初始化摄像头到舞台：（监听用户点击事件）

cam.addEventListener(StatusEvent.STATUS,statusHandler);

//默认为320*240

myVideo = new Video();

myVideo.width = 640;

myVideo.height = 480;

cam.setQuality(0,80);

myVideo.x = 10;

myVideo.y = 10;

//设置带宽与图片品质;
cam.setMode(640,480,20,false);
cam.setLoopback(true);

//设置压缩：;

myVideo.attachCamera(cam);

addChild(myVideo);

return true;

}

else

{

return false;

}

}

/*捕捉用户点击按钮行为*/

public function statusHandler(event:StatusEvent):void

{
switch (event.code)
{

case "Camera.Muted" :

trace("User clicked Deny.");

//将监听事件注册到JavaScript：

flag = true;

ExternalInterface.call("Tips","您点击了拒绝调用摄像头！");

break;

case "Camera.Unmuted" :

trace("User clicked Accept.");

//（用户点击了接受）

//开始录像：

mic = Microphone.getMicrophone();

ns = new NetStream(nc);

ns.attachCamera(cam);

ns.attachAudio(mic);

ns.publish(""+videoName+"","record");

break;

}

}

/*停止录像*/

public function StopRecord():void

{

this.myVideo.attachCamera(null);

this.myVideo.clear();

this.ns.attachCamera(null);

this.ns.close();

ExternalInterface.call("Tips","视频录像已经停止！");

}

public function PlayBackVideo()

{

if (videoName!=null)

{

this.ns.play(videoName);

this.myVideo.attachNetStream(this.ns);

//监听回放完成！

this.ns.addEventListener(NetStatusEvent.NET_STATUS,onNetStatus);

}

else

{

ExternalInterface.call("Tips","当前没有录像可以回放！");

}

}

/*截图*/

public function PrintScreen():void

{

var jpgSource:BitmapData = new BitmapData(this.myVideo.width,this.myVideo.height);

jpgSource.draw(this.myVideo);

var jpgEncoder:JPGEncoder = new JPGEncoder(85);

var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);

var header:URLRequestHeader = new URLRequestHeader("Content-type","application/octet-stream");
//此处只是随便写的URL，做请求演示（以下URL将会被重定向，http状态码：302-200），实际过程中需要在后台代码中读取流并转换为图片：
var jpgURLRequest:URLRequest = new URLRequest("http://www.baidu.com?name=myVideo.jpg");

jpgURLRequest.requestHeaders.push(header);

jpgURLRequest.method = URLRequestMethod.POST;

jpgURLRequest.data = jpgStream;

var uploadURLLoader:URLLoader = new URLLoader();

//可以添加监听事件

uploadURLLoader.load(jpgURLRequest);

ExternalInterface.call("Tips","ok");

}

}

}

view 代码：

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title></title>
     <script src="Scripts/jquery-1.10.2.min.js"></script>
 </head>
 <body>
     <div style="width: 640px; height: 480px">
         <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="480"
                 id="ASflashVideo" align="middle">
             <!--<param name="flashVars" value="VW=640&VH=480&VFPS=20&VQ=80" />-->
             <param name="movie" value="ASflashVideo.swf" />
             <param name="quality" value="high" />
             <param name="bgcolor" value="#000000" />
             <param name="play" value="true" />
             <param name="loop" value="true" />
             <param name="wmode" value="window" />
             <param name="scale" value="showall" />
             <param name="menu" value="true" />
             <param name="devicefont" value="false" />
             <param name="salign" value="" />
             <param name="allowScriptAccess" value="always" />
             <!--[if !IE]>-->
             <object type="application/x-shockwave-flash" data="ASflashVideo.swf"
                     width="640" height="480" id="ASflashVideo">
                 <!--<param name="flashVars" value="VW=640&VH=480&VFPS=20&VQ=80" />-->
                 <param name="movie" value="ASflashVideo.swf" />
                 <param name="quality" value="high" />
                 <param name="bgcolor" value="#000000" />
                 <param name="play" value="true" />
                 <param name="loop" value="true" />
                 <param name="wmode" value="window" />
                 <param name="scale" value="showall" />
                 <param name="menu" value="true" />
                 <param name="devicefont" value="false" />
                 <param name="salign" value="" />
                 <param name="allowScriptAccess" value="always" />
                 <!--<![endif]-->
                 <a href="http://www.adobe.com/go/getflash">
                     <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
                          alt="获得 Adobe Flash Player" />
                 </a>
                 <!--[if !IE]>-->
             </object>
             <!--<![endif]-->
         </object>
     </div>
     <div>
         请输入录像名称：<input type="text" id="videoName" />
         <input type="button" onclick="StartRecord()" value="开始录像" />
         <!--<input type="button" onclick="Init()" value="初始化" />-->
         <input type="button" onclick="Stop()" value="停止录制" />
         <input type="button" onclick="PlayBackVideo()" value="回放" />
         <input type="button" onclick="PrintScreen()" value="截图" />

     </div>
 </body>
 </html>
 <script type="text/javascript">
     var swfObject = null;
     var fmsUrl = "localhost/testFms";

     //页面加载完成之后再执行：
     window.onload = function () {
         Init();
     };

     function Init() {
         getSWFObject();
         if (swfObject != null) {
             swfObject.asInit(fmsUrl);
             console.log("初始化完成！");
         } else {
             alert("未能获取到对象！");
         }
     }

     function StartRecord() {
         var videoName = $("#videoName").val();
         if (videoName.length > 0) {

             var flag=swfObject.asStartRecord(videoName);
             console.log(flag);
         } else {
             alert("录像名称不能为空！");
         }
     }
     function Stop() {
         swfObject.asStopRecord();
     }
     //回放：
     function PlayBackVideo()
     {

         swfObject.asPlayBackVideo();
     }
     function PrintScreen() {
         var videoName = $("#videoName").val();
         swfObject.asPrintScreen();
     }
     //信息提示：
     function Tips(para)
     {
         alert(para);
     }

     //获取swf对象：
     function getSWFObject() {
         var movieName = "ASflashVideo";
         if (document[movieName]) {
             swfObject = document[movieName];
         } else if (window[movieName]) {
             swfObject = window[movieName];
         } else if (document.embeds && document.embeds[movieName]) {
             swfObject = document.embeds[movieName];
         } else {
             swfObject = document.getElementById(movieName);
         }
     }

 </script>

4：在编写as代码需要注意的地方（应该是我之前不会的地方），在需要使用到Adobe核心类库的时候：

5：实现效果图：

tips:实际项目需要在后台代码中将流转换成图片：

6：最后，相关学习资料：

--------------------flash as在线API 文档 -----------------------------------

http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html

--------------------flash+fms入门教程----------------------------------------

http://www.nshen.net/article/2007-08-29/fms-tutorial/

-------------------flash+fms 跨域，安全沙箱 -----------------------------

参考：http://scn.sap.com/thread/3307666

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

adobe核心类库as3corelib-.93.zip下载地址：

http://pan.baidu.com/s/1c0hR7rE

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