Сам по себе процесс подключения к камере тривиален. Добавляем компонент spark.components.VideoDisplay:
<s:VideoDisplay id="videoDisplay"
creationComplete="videoDisplay_creationComplete();"
x="40"
y="44"
width="320"
height="240"
/>
и цепляем в скрипте к нему камеру:
private var camera:Camera = null;
private function videoDisplay_creationComplete():void
{
camera = Camera.getCamera();
if (!camera)
return;
camera.setQuality(0,100);
var localCam:Video = new Video(320,240);
videoDisplay.addChild(localCam);
localCam.attachCamera(camera);
}
Правда, на этом дело не окончилось. Аппетит, пришедший во время еды, потребовал добавить возможность делать снапшоты. Это оказалось тоже несложно. Добавляем кнопку:
<s:Button id="button"
label="Сделать фотографию"
click="videoDisplay_snapShot();"
/>
список, в которм будем показывать снимки:
<s:List id="mylist" horizontalCenter="1" width="100%" height="77" itemRenderer="SnapshotRenderer">
<s:dataProvider>
<mx:ArrayList/>
</s:dataProvider>
<s:layout>
<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
</s:List>
и в обработчике нажатия кнопки пишем следующее:
private function videoDisplay_snapShot():void
{
if (!camera)
return;
if (camera.muted)
return;
try
{
var snapshot:BitmapData = ImageSnapshot.captureBitmapData(videoDisplay);
var bitmap:Bitmap = new Bitmap(snapshot);
if (3 < mylist.dataProvider.length)
mylist.dataProvider.removeItemAt(0);
mylist.dataProvider.addItem(bitmap);
}
catch (error:*)
{
Alert.show(error.message);
}
}
В окончательном виде получился вот такой миленький проект:
1. Файл SnapshotRenderer.mxml - отвечает за отрисовку снимков экрана
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100" height="75">
<mx:Image source="{this.data}" width="100%" height="100%"/>
</s:ItemRenderer>
2. Файл main.mxml - основной файл проекта
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
frameRate="100"
creationComplete="init()"
>
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5"/>
</s:layout>
<s:Group>
<!-- рисуем рамку вокруг области с видеоизображением с камеры -->
<s:Image source="@Embed(source='frame.jpg')"/>
<!-- область с видеоизображением с камеры -->
<s:VideoDisplay id="videoDisplay"
x="40"
y="44"
width="320"
height="240"
/>
</s:Group>
<s:Button id="button"
label="Сделать фотографию"
click="videoDisplay_snapShot();"
/>
<!-- галерея снимков, присланных с сервера -->
<s:List id="mylist" horizontalCenter="1" width="100%" height="77" itemRenderer="SnapshotRenderer">
<s:dataProvider>
<mx:ArrayList/>
</s:dataProvider>
<s:layout>
<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
</s:List>
<fx:Script>
<![CDATA[
import mx.graphics.ImageSnapshot;
import mx.graphics.codec.JPEGEncoder;
import mx.utils.Base64Encoder;
import mx.controls.Alert;
private var camera:Camera = null;
// функция, подключающая камеру
private function videoDisplay_creationComplete():void
{
try
{
// в этот момент на экран выскочит окно с предупреждением безопасности
// если пользователь откажется от подключения камеры, это можно будет потом узнать,
// проверив свойство camera.muted
camera = Camera.getCamera();
if (camera)
{
camera.setQuality(0,100);
var localCam:Video = new Video(320,240);
// маленькая хитрость, чтобы получить зеркальное отображение видео с камеры
var WIDTH:int = localCam.width;
var ma:Matrix=new Matrix();
ma.a = -1;
ma.tx = WIDTH;
localCam.transform.matrix = ma;
videoDisplay.addChild(localCam);
localCam.attachCamera(camera);
}
else
{
Alert.show("Нет доступа к веб-камере");
}
}
catch(error:*)
{
Alert.show(error.message);
}
}
// класс, служащий для передачи снимка экрана на сервер и получения в ответ нескольких
// последних изображений - для отображения в галерее
private var http:HTTPServiceEngine = new HTTPServiceEngine();
private function videoDisplay_snapShot():void
{
// проверка наличия камеры
if (!camera)
return;
// проверка, не отказался ли пользователь подключить камеру
if (camera.muted)
return;
try
{
var snapshot:BitmapData = ImageSnapshot.captureBitmapData(videoDisplay);
// кодируем снимок экрана в base64 и отправляем его на сервер
var jpg:JPEGEncoder = new JPEGEncoder();
var ba:ByteArray = jpg.encode(snapshot);
var b64encoder:Base64Encoder = new Base64Encoder();
b64encoder.encodeBytes(ba);
var b64String:String = b64encoder.flush();
http.SendSnapshot(b64String);
}
catch (error:*)
{
Alert.show(error.message);
}
}
// А это нужно вот для чего. С сервера в качестве ответа на посланный снимок экрана
// возвращаются несколько последних сохраненных снимков. Их нужно превратить
// из byteArray в bitmap и последовательно добавить в компонент mylist.
// Для этой цели и служит loader. А так как он работает асинхронно, то заводим счетчик -
// чтобы хранить, какое по порядку изображение этим loader-ом обрабатывается.
private var loader : Loader = new Loader();
private var loaderCounter:int = 0;
// эта функция вызывается после получения и обработки ответа от сервера и запускает процесс
// добавления присланных изображений в mylist
public function refreshImages():void
{
mylist.dataProvider.removeAll();
loaderCounter = http.Images.length-1;
if (0 <= loaderCounter)
loader.loadBytes(http.Images[loaderCounter]);
}
// обработчик события COMPLETE для loader-а. Его вызов происходит,
// когда loader получил все данные и готов выдать bitmap
private function getBitmapData(e:Event):void
{
try
{
var loader:Loader = Loader(e.target.loader);
var bitmap:Bitmap = Bitmap(loader.content);
mylist.dataProvider.addItem(bitmap);
loaderCounter--;
if (0 <= loaderCounter)
loader.loadBytes(http.Images[loaderCounter]);
}
catch (error:*)
{
Alert.show(error.message);
}
}
// Функция, вызываемая по завершении загрузки проекта.
// Присваиваем loader-у обработчик и подключаемся к веб-камере
private function init():void
{
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, getBitmapData);
videoDisplay_creationComplete();
}
]]>
</fx:Script>
</s:Application>
3. Файл HTTPServiceEngine.as - что зря пропадать снапшотам, пусть складируются на сервере 8-) - класс для приема-передачи изображений через AJAX.
package
{
import mx.rpc.http.HTTPService;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.core.FlexGlobals;
import mx.controls.Alert;
import mx.utils.Base64Decoder;
public class HTTPServiceEngine
{
private static var HTTPServiceName :String = "http://myserver/ajax.py";
private var httpService :HTTPService = null;
// буфер для хранения изображений, присланных с сервера, в виде байтовых массивов
public var Images :Array = new Array();
// конструктор
public function HTTPServiceEngine()
{
httpService = new HTTPService();
httpService.url = HTTPServiceEngine.HTTPServiceName;
httpService.method = "POST";
httpService.addEventListener("result", HTTPResult);
httpService.addEventListener("fault", HTTPFault);
}
// отправляем на сервер снимок и ожидаем в ответ список последних изображений
public function SendSnapshot(v:String):void
{
var parameters:Object = {};
parameters["r"] = "snapshot";
parameters["s"] = v;
httpService.send(parameters);
}
// сервер должен вернуть список последних изображений в таком формате:
// [file]
// изображение 1, закодированное в base64
// [file]
// изображение 2, закодированное в base64
// и т.п.
private function HTTPResult(event:ResultEvent):void
{
var result:String = String(event.result);
var buffer:String = "";
// готовим декодер
var b64decoder:Base64Decoder = new Base64Decoder();
// очищаем буфер для хранения полученных с сервера снимков
Images.length = 0;
// парсим ответ
var lines:Array = result.split("\n");
for (var i:int = 0; i < lines.length; i++)
{
if (lines[i] == "[file]")
{
if (buffer != "")
{
b64decoder.decode(buffer);
Images.push(b64decoder.toByteArray());
}
buffer = "";
}
else
buffer += lines[i];
}
if (buffer != "")
{
b64decoder.decode(buffer);
Images.push(b64decoder.toByteArray());
}
// отображаем полученные изображения на экране
FlexGlobals.topLevelApplication.refreshImages();
}
// обработчик ошибки взаимодействия с сервером
public function HTTPFault(event:FaultEvent):void
{
var faultstring:String = event.fault.faultString;
Alert.show(faultstring);
}
}
}
Ну и, наконец, собственно результат:
