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：webtempvideo.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=" 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

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