flash+as3.0+swfobject实现摄像头拍照

前言：先说说为什么要采用flash方式实现摄像头拍照功能，本来我一开始使用Html5方式实现了摄像头拍照功能，结果客户测试时使用的浏览器是ie8，我去，我自己平常从来不用ie，直接在谷歌上测试，没啥问题，ie8上就直接挂掉了，即便是高版本的ie11也不行，我用浏览器调试过，ie上根本不能是使用getusermedia（）方法，这个方法为undefined，没办法，只能问度娘了，最终确定了flash+as3.0+swfobject实现摄像头拍照的方案，而且这样的方式兼容性很强，基本上主流浏览器都能使用，而且低版本浏览器上也没问题。

实现过程：

一、制作swf文件

A、准备工作

1、需要安装制作fla的工具，我这里使用的是Adobe Flash Professional CS5.5。

2、需要了解actionscript语言编程。

3、至少能够简单使用cs工具。

 

B、制作步骤

1、新建一个ActionScript3.0文档，然后保存，文件路径和名称自定义，本文自定义为：myFrist.fla。

2、设置舞台大小为380*260，鼠标先定位到舞台上，然后找到属性面板设置舞台的长度和宽度。

3、找到库面板，创建一些元件，如下图所示：

 

Previe_view元件是为了回显拍照后的照片。

Label是为了显示一些错误信息。

Camera_view是为了放置摄像头

Border只是一个边框，可要可不要，要了要好看点

Button ，按钮元件，用来定义拍照，重新拍照，和保存的按钮。

4、舞台布局

1)首先拖动库面板中定义的preview_view元件到舞台上，然后找到属性面板，设置属性如下图：

主要是定义实例名称，以及该元件在舞台的位置，这里定义的实例名称为：camera_preview，位置为：x：10；y：10。

2）拖动border到舞台上，设置实例名称，以及位置和大小。

3）操作方式都是相似的，按照自己的设计把库中需要用到的元件放到舞台上，在属性面板中设置其属性。最终效果如下图：

5、舞台搭建好后，就需要写些代码来控制舞台元件的动作

1）找到时间轴面板，创建一个新的图层，自定义名称，我这里定义为action，效果如下图：

 

2）鼠标选择action后，按F9就打开代码编辑器，可以开始写一些动作。

代码如下，都有注释，纯属个人理解，可能存在错误的理解，请以实际情况为准

import flash.display.Bitmap;

import flash.display.BitmapData;

import com.adobe.images.PNGEncoder;

//首先设置按钮状态，一开始定义重新拍照和保存按钮不可用，只有当点击拍照后，才会可用

clear_btn.mouseEnabled=false;

save_btn.mouseEnabled=false;

//定义一个video视频元件

var vid:Video;

//获取摄像头，如果电脑中没有摄像头，返回为null

var cam:Camera = Camera.getCamera();

if (cam != null)

{ //设置摄像头模型，宽320，高240px，帧数10/s，维持图像大小

cam.setMode(320,240,10,true)

//给摄像头添加一个状态事件

cam.addEventListener(StatusEvent.STATUS, statusHandler);

//创建一个vide实例，把摄像头放到video中

vid= new Video(cam.width, cam.height);

    vid.attachCamera(cam);

}else{

//当获取不到摄像头时，显示的错误信息

camera_msg.visible = true;

camera_msg.text="未检测到摄像头，请检查是否连接了摄像头或者摄像头是否正常.";

}

function statusHandler(event:StatusEvent):void

{

    if (!cam.muted) //如果允许使用摄像头，执行下面的程序

    { //把vide放到我们在舞台定义的camera_view中

camera_view.addChild(vid);

//给3个按钮添加点击事件

camera_btn.addEventListener(MouseEvent.CLICK, clickCamera);

clear_btn.addEventListener(MouseEvent.CLICK, reloadCamera);

save_btn.addEventListener(MouseEvent.CLICK, uploadImg);

    }else{//如果用户拒接使用摄像头，显示的错误信息

camera_msg.visible = true;

camera_msg.htmlText="<font color='#FF0000'>您已拒绝浏览器使用摄像头.</font>";

}

//移除监听摄像头状态事件

    cam.removeEventListener(StatusEvent.STATUS, statusHandler);

}

//定义一个存放byte类型的对象

var bitmap:Bitmap;

//ExternalInterface.addCallback("clickCamera", this, clickCamera);//这个注释行其实是个回调方法，供js调用哈

//点击拍照方法

function clickCamera(e:MouseEvent)

{ //创建一个BitmapData来操作图像，大概理解为画板吧，宽320，高240，允许透明，填充色为0xff0000

var bitmapdata:BitmapData = new BitmapData(320, 240, true, 0xff0000);

//把vid中的内容画到bitmapdata中。

bitmapdata.draw(vid);

//把bitmapdata数据存储到bitmap中

bitmap = new Bitmap(bitmapdata);

//预览时，就把bitmap添加到我们在舞台定义的camera_preview元件中

camera_preview.addChild(bitmap);

//让显示vid的camera_view隐藏不可见

    camera_view.visible=false;

//设置预览元件的高和宽，以及可见

camera_preview.width=320;

camera_preview.height=240;

camera_preview.visible=true;

//让重新拍照和保存按钮可用，而拍照按钮不可用

clear_btn.mouseEnabled = true;

save_btn.mouseEnabled = true;

camera_btn.mouseEnabled = false;

}

//ExternalInterface.addCallback("reloadCamera", this, reloadCamera);//这个注释行其实是个回调方法，供js调用哈

//重新拍照方法

function reloadCamera(e:MouseEvent)

{ //camera_view可见，预览元件不可见，重新拍照和保存按钮不可用，拍照按钮可用。

    camera_view.visible=true;

camera_preview.visible=false;

clear_btn.mouseEnabled =false;

camera_btn.mouseEnabled= true;

save_btn.mouseEnabled = false;

bitmap = null;

}

//保存图像方法

function uploadImg(e:MouseEvent){

//这块就是打印下拍照的信息，根据实际需要自行完成。

if(bitmap != null){

var imgdata : BitmapData = bitmap.bitmapData

//var str:String = "";

//var i:Number,j:Number;

//for(i=0;i<240;i++){

//for(j=0;j<320;j++)

//str += imgdata.getPixel(j,i).toString(16)+",";

//}

var bytesArr:ByteArray = PNGEncoder.encode(imgdata);

trace("byteArr = "+bytesArr);

}

//trace("图片："+str);

}

6、测试

测试步骤如下图：

 

测试成功后，则找到你最先保存该fla文件的位置，这时已经生成了相应的swf文件，这个文件则是我们所需要的。

 

二、采用swfobject.js插件实现页面调用swf文件

A、找到官网下载swfobject.js包，放到我们web项目中，在index.jsp中引入，然后把我们制作好的swf文件也放到我们项目中，我放到webapp根目录下了。

B、在需要使用摄像头拍照的地方加入这行代码：

 

这行代码就是给swf放在页面上占个位置，因为我使用的swfobject.js，所以是靠js动态引用swf文件，这样中兼容性会更好，如果不使用swfobject.js，则需要定义<object></object>和<embed>标签，而这2个很多浏览器不一定能正确识别，兼容性很差。

 

采用swfobject提供的方法开始嵌入swf文件，代码如下：

//flash实现方式,为了支持ie8，采用该方式.

function capture_Camera(){

var flashvars = {

     id:"myid",

  }

var params = {

     menu: "false",

     allowFullscreen: "false",

     allowScriptAccess: "always",

     bgcolor: "#ffffff",

     wmode: "transparent"

 }

 var attributes = {

     id: "myswfcontent",

     name: "myswfcontent"

}

swfobject.embedSWF("myself.swf","flash_div","340", "262", "9.0.0", null, flashvars, params, attributes);

};

function myFlash(fid) {

if (navigator.appName.indexOf ("Microsoft") !=-1) {

return window[fid];

} else {

return document[fid];

}

}

function getFlashPhoto(path, dataId, dataType){

var myf = myFlash("myswfcontent");

var img = myf.getFlashPhoto();

if(img!="null"){

VM(path).cmd({type:'ajax',src:'manualReg/showHeadImgInfo',data:{dataID:dataId, dataType:dataType,imgByte:img}});

}else{

$.alert("请先拍照！");

}

}

//拍照按钮

function clickCamera(path){

myFlash("myswfcontent").clickCamera();

var btn1 = VM(path).find('fla_camera_btn');

disableBtn(btn1);

var btn2 = VM(path).find('fla_clera_btn');

usableBtn(btn2);

var btn3 = VM(path).find('fla_sure_camera');

usableBtn(btn3);

}

//重新拍照按钮

function reloadCamera(path){

myFlash("myswfcontent").reloadCamera();

var btn1 = VM(path).find('fla_camera_btn');

usableBtn(btn1);

var btn2 = VM(path).find('fla_clera_btn');

disableBtn(btn2);

var btn3 = VM(path).find('fla_sure_camera');

disableBtn(btn3);

}

//按钮可用设置

function usableBtn(btn){

btn.removeClass('disable_button');

btn.addClass('normal_button');

btn.disable(false);

}

//按钮不可用设置

function disableBtn(btn){

btn.removeClass('normal_button');

btn.addClass('disable_button');

btn.disable(true);

}

由于我第一版做的swf文件，按钮没有写在swf文件中，而是采用我们框架自己的按钮，所以这块采用的是回调swf提供的方法。关键点在于，上面的actionscript代码中的3个点击事件方法，改为回调方法，这样js就可以调用了，其次，在定义var attributes = {

     id: "myswfcontent",

     name: "myswfcontent"

}

给swf设置个id，这样我们可以直接在页面上找到swf对象，该对象在回调自己的定义的拍照方法，重新拍照方法，以及保存图片方法。

总结

之所以要把实现方式写出来，一个是怕以后忘记了，回头直接参照这个文档，很快就能做出来，还有个原因，是因为我在研究flash这块时，走了很多弯路，以前完全没有接触过flash，只能在百度上搜索，结果发现很多文章写的很笼统，对于会的来说，很容易看懂，对于完全没有接触过的人来说，就相当于看天书，很难理解，所以，我就把自己做的经验分享出来，希望能给有需要的同行们有点帮助。