понедельник, 7 декабря 2009 г.

Webcam Fun

Привет, Друзья!

На всеукраинской сходке айтишников IT Jam, нам с Сергеем Лутаем посчастливилось делать доклад по новинкам четвертого Сильверлайта. Пока обрабатывается видео с презентации, выкладываю код, который мы использовали для демонстрации работы с веб камерой. Кроме кода, мы посмотрим на основы работы с камерой  и на несколько веселых эффектов, которые можно сделать при помощи пиксельных шейдеров.

Исходники к этому посту можно скачать здесь. Живое демо находится здесь. Для запуска демо, вам, кроме камеры, понадобится установить Silverlight 4 Beta 1. Рантайм есть только для разработчиков, но ведь это про вас, верно :)?

Основы


Для старта нам понадобится... камера. Чтобы получить доступ к камере из Silverlight'a, достаточно спросить у пользователя разрешения, и получив оное, начать видеозахват:

private CaptureSource _captureSource;

private CaptureSource CaptureSource
{
  get { return _captureSource ?? (_captureSource = new CaptureSource()); }
}

private void StartCapture()
{
  // Можно мне попользоваться вашей камерой?
  if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess())
  {
    // Урра! Начинаем захват: 
    CaptureSource.Start();
    
    var brush = new VideoBrush();
    brush.SetSource(CaptureSource);
    VideoBrush = brush; // К этому свойству можно привязать любой Brush: <Border Background="{Binding VideoBrush}" .../>
  }
}
Видео является обычной кисточкой (Brush), а значит, мы можем разукрасить выходом с камеры любой элемент, который можно разукрасить :). Пожалуй, это и все. Просто, не так ли?

Не Основы


К "продвинутым" темам можно отнести сохранение рисунка с камеры. Тут есть два варианта: воспользоваться функцией CaptureSource.AsyncCaptureImage() или сделать снимок UIElement'a, как обычно, при помощи WriteableBitmap'a: new WriteableBitmap(uie, null). Разница в том, что WriteableBitmap фотографирует содержимое со всеми эффектами, а CaptureSource выдаст именно то, что есть на выходе камеры, без трансформаций, эффектов и прочего.

Если есть несколько камер (скорее всего, у вас, как и у меня, их нет, но мало ли :)?), то можно всегда выбрать с какой камеры вести захват: CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices();

Для того, чтобы сохранить WriteableBitmap в Jpeg формат нужно написать свой энкодер, который будет последоватльно, байт за байтом, запаковывать цвета в формат Jpeg. Для этого, конечно, нужно сначала достать спецификацию Jpeg'a, изучить ее, и заимплементить... Шутка :). Все уже написано до нас: библиотека FJCore позволяет легко сохранять jpeg'и. Для просмотра примера использования, загляните в исходники к этому посту.

Спецэффекты


Использование спецэффектов радует больше всего. В реальном времени увидеть себя с необычной стороны, и я говорю не о спине, - оказывается очень увлектально :)! О создании собственных эффектов на шейдерах, я уже писал. А на презентации мы показали четыре эффекта:

Эффект находит границы на рисунке и закрашивает их черным цветом. Все остальное выводится белым. На этой фотке знакомые могут узнать Мишу Чалого :).
С этой фотки из паралельной вселенной дружественный привет землянам шлет головастый и чертовски умный двойник  автора этого блога :).
Этот эффект-страшилка просто инвертирует цвета. Как-то так выглядел мир по ту сторону кольца, когда Фродо надевал его :).
И, наконец, последний эффект, "скрытая фича Sivlerlight 4.0", он же знакомый нам по передачам типа "Прогноз погоды": подмена вывода. Как только цвет точки становится ярче определенного порога, вместа оригинала выводится точка из другого сэмплера (читай - brush'a). Здесь я направил включенный фонарик в ладошку, открывая секретный кусочек лица Билла.

Конечно, можно написать шейдер, который будет подменять вывод в зависимости от разных условий, например, на синий цвет выводить Брина и Пейджа, на зеленый - Стива, а на очень белый (или черный, в зависимости от того, на чьей вы стороне) - Билла. 

Выводы


Пользоваться камерой в Silverlight  4.0 очень легко. Все операции с камерой не требуют  участия сервер-сайда. Можно легко сохранять изображения.

Для тех, кто любит просто читать с конца, еще раз привожу ссылку на исходники и демо. Не забудьте про рантайм: Silverlight 4 Beta 1. Отличного программирования и прекрасного настроения!

ЗЫЖ спасибо всем, кто пришел к нам на презентацию. И, конечно, всем тем, кто поставил за нас "наляпочки" на доске голосования :). Нам было очень приятно!

3 комментария:

  1. Спасибо, Санек.

    Видео будет. Я только не знаю, где лучше захостить его и чем пережать :)...

    ОтветитьУдалить
  2. Мне тож понравилось ;)

    ОтветитьУдалить