Эта статья посвящена Дню № 21 из 31-й серии Windows 8 . Каждая из статей этой серии будет опубликована как для HTML5 / JS, так и для XAML / C # . Вы можете найти дополнительные ресурсы, загрузки и исходный код на нашем сайте .
Сегодня все дело в устройствах, ну да ладно, действительно одно устройство; камера. Как веб-разработчики СМИ были одной вещью, которая взяла нас на диких американских горках. От плагинов для браузера до нативных спецификаций в браузере, держитесь, потому что он не пришел на станцию. Это также показывает, насколько круто, и все же как-то изменить некоторые, если отдельные спецификации, содержащиеся в HTML5, действительно. В любом случае, нам нужны наши СМИ!
Для тех, кто играл в HTML5 дома, вы, возможно, помните, что API устройства был убит в феврале этого года . Это был стандарт, установленный для захвата аудио и видео с наших вещей, таких как веб-камера, а также ряда других предметов. Это сложное пространство, без сомнения, но не бойтесь, у нас есть новая спецификация, ориентированная только на медиа, называемая Media Capture and Streams или navigator.getUserMedia (). К сожалению, это одна из тех спецификаций, которая очень ранняя в своей жизни и не очень распространена во всех браузерах. Если вы хотите узнать больше об этом, прочитайте отличную статью о getUserMedia о HTML5 Rocks .
Теперь поговорим о Windows 8. На 14-й день мы поговорили о геолокации . У нас было два разных варианта реализации; используйте WinRT или используйте стандартную спецификацию html5. Оба были похожи, достигая одной и той же цели. Но getUserMedia отличается, он еще не поддерживается в браузере, поэтому мы должны обратиться к WinRT.
Это явно ставит некоторые интересные вопросы, по крайней мере для меня. Такие вещи, как обнаружение функций и полифиллы, долгое время были предпочтительным способом убедиться, что браузер клиента использует то, что мы знали, как адаптироваться. Теперь, в Windows 8, нам нужно подумать об обнаружении функций и полифилах на оборудовании? Возможно, нет, если вы просто пишете для Windows, но что, если вы пишете код для браузера и Windows? Время покажет, шаблоны будут развиваться, и, как и все остальное, контекст того, что вы делаете, оказывает наибольшее влияние.
Теперь, когда я ушел от темы, давайте вернемся. Захват медиа. WinRT. Погнали.
Начало
Это не должно быть сюрпризом для вас, но как вы думаете, с чего мы начнем. ВПРАВО — O appxmanifest. Нам нужно проверить веб-камеру.
Теперь, когда мы объявили, что будем использовать веб-камеру, давайте начнем делать снимки. Как и в прошлые дни, я только что создал простой пустой шаблон с парой элементов; в частности, кнопка и элемент div, в который будут помещены наши результаты. Давайте посмотрим на обработчик кнопки.
var _capture = Windows.Media.Capture;
var captureUI = new _capture.CameraCaptureUI();
captureUI.captureFileAsync(_capture.CameraCaptureUIMode.photo)
.then(function (capturedItem) {
// now what ?
}
);
Мы начнем с создания нового экземпляра WinRT CameraCaptureUI . В Windows 8 мы фактически используем встроенный пользовательский интерфейс камеры для выполнения всей тяжелой работы, и мы просто взаимодействуем с этим. Подобно тому, как печать работала вчера. После того, как мы создали экземпляр, нам просто нужно открыть пользовательский интерфейс и добавить обещание к нашему выражению, которое будет выполнено, когда пользователь закончит фотографировать. Вы также должны заметить, что мы перешли в какой «режим» мы хотели бы включить нашу камеру. На данный момент мы выбрали фотографию. Мы могли бы выбрать любой из следующих; фото, видео или фото или видео . Как только мы запустим его, мы увидим диалоговое окно, спрашивающее пользователя, можем ли мы на самом деле использовать веб-камеру.
Как только мы позволим это, нам будет представлен интерфейс захвата камеры.
Да, я сижу в ресторане, когда пишу эту часть, и камера, кажется, добавила еще один подбородок. Давайте изменим режим на видео, чтобы немного контрастировать. Я вырезал часть кода только для демонстрации.
captureUI.captureFileAsync(_capture.CameraCaptureUIMode.video)
.then();
Просто изменив это и запустив снова, вы заметите, что у нас больше нет необходимого доступа. Почему что случилось? Просматривая в настройках приложения и его разрешения, мы получаем некоторое представление.
Поскольку мы переключились на видео, у нас теперь есть доступ (или его отсутствие) к микрофону. Из-за этого нам нужно вернуться в наш package.appxmanifest и объявить, что мы также будем использовать микрофон .
Объявляя микрофон и перезапуская, мы снова получаем запрос На этот раз для доступа к веб-камере и микрофону :
А теперь, если мы посмотрим на наше разрешение заявки.
Вы заметите, что у нас есть оба разрешения. Я прошел через это подробно по нескольким причинам. 1. Надеюсь, вы не сидите, стуча головой о стену поздно вечером, пытаясь выяснить, почему ваше видео не работает, когда это просто объявление в приложении. 2. Доступ — это все или ничего здесь. Доступ не веб-камера и \ или микрофон.
Вернуться к коду.
.затем()
Итак, до этого момента мы запускаем интерфейс камеры, но это действительно так. Как только пользователь делает снимок, что происходит. Хорошо, наше обещание будет выполнено.
captureUI.captureFileAsync(_capture.CameraCaptureUIMode.photo)
.then(function (capturedItem) {
if (capturedItem) {
/* Storage Item */
}
else {
/* user cancelled */
}
}
);
Когда наше обещание срабатывает, нам дают StorageFile . Этот снимок на самом деле автоматически сохраняется во временном хранилище приложения . Вы можете увидеть это из моего окна часов здесь.
Так как то, что нам дали, это StorageFile, мы можем просто работать с ним оттуда. Ниже я просто собираюсь создать URL для StorageFile, создать новый элемент img и начать добавлять его в мое менее чем удивительное приложение.
var photoBlobUrl = URL.createObjectURL(
capturedItem,
{ oneTimeOnly: true });
var imageElement = document.createElement("img");
imageElement.setAttribute("src", photoBlobUrl);
document.querySelector("#result").appendChild(imageElement);
Как и при печати, у нас также есть возможность влиять на некоторые из наших настроек, как в пользовательском интерфейсе камеры, так и на вывод. Это делается путем установки CameraCaptureUIPhotoCaptureSettings (нет, это не было плохой шуткой), найденного в вашем экземпляре класса CameraCaptureUI. По умолчанию JPEG были сохранены, давайте изменим это на pngs.
captureUI.photoSettings.format = _capture.CameraCaptureUIPhotoFormat.png;
Мы также можем влиять на работу Camera UI. Ниже я собираюсь изменить соотношение сторон окна обрезки, чтобы увеличить его до 4: 3.
captureUI.photoSettings.croppedAspectRatio = { height: 4, width: 3 };
Я думаю, вы поняли.
Кинофильмы
Хорошо, достаточно моих ужасных картинок, которые в конечном итоге будут проиндексированы и использованы как-то, когда я меньше всего этого ожидаю Давайте перейдем к кинофильмам. К счастью, мы действительно уже видели это, потому что это в значительной степени то же самое. Давайте пойдем ва-банк и сделаем несколько видео.
var captureUI = new _capture.CameraCaptureUI();
captureUI.videoSettings.format
= _capture.CameraCaptureUIVideoFormat.mp4;
captureUI.videoSettings.allowTrimming = true;
captureUI.videoSettings.maxDurationInSeconds = 15;
captureUI.videoSettings.maxResolution =
_capture.CameraCaptureUIMaxVideoResolution.highestAvailable;
captureUI.captureFileAsync(_capture.CameraCaptureUIMode.video)
.then(function (capturedItem) {
if (capturedItem) {
var url = URL.createObjectURL(
capturedItem,
{ oneTimeOnly: true });
var imageElement = document.createElement("video");
imageElement.setAttribute("src", url);
imageElement.setAttribute("autoplay");
imageElement.setAttribute("controls");
document.querySelector("#result").appendChild(imageElement);
}
else {
document.querySelector("#result").innerText = "User Cancelled"
}
}
);
Я выделил пункты выше, что мы разные и, честно говоря, ничего особенного. Учитывая, что я не собираюсь тратить на это много времени. Мы используем один и тот же интерфейс камеры, но с другим режимом . Мы можем установить вещи, как мы делали раньше, но на этот раз они связаны с видео. Можете ли вы угадать, что это за класс? CameraCaptureUIVideoCaptureSettings
Давайте посмотрим на некоторые из настроек. Во-первых, мы можем указать между MP4 видео или WMV. Вы не увидите разницу между этими двумя форматами, пока не попробуете поделиться этим видео с другими системами и платформами. MP4 гораздо более широко используется, чем WMV, но это также более крупный формат, так что стоит задуматься.
Во-вторых, я включил «AllowTrimming», который позволяет пользователю выбирать сегмент своего записанного видео, который он хотел бы использовать. Они получат пользовательский интерфейс, похожий на этот, где они могут перетащить любой конец видео, используя белые круги на полях:
В-третьих, я указал MaxDurationInSeconds, который ограничивает максимальную длину видео, которую может предоставить пользователь. Если они запишут больше этой продолжительности, они смогут выбрать, какие 30 секунд (или указанную вами продолжительность) они хотели бы использовать. Я вижу, что это полезно для таких компаний, как Match.com, где люди делают профильные видео, но они не хотят, чтобы они работали вечно.
Наконец, я также указал MaxResolution. Это позволяет нам управлять разрешением, с которым пользователь может записывать, что также может помочь с окончательным размером файла, с которым мы в конечном итоге. У вас есть четыре варианта:
В противном случае мы получим очень похожий результат на наши усилия камеры. На этот раз я создал элемент видео и установил на него несколько атрибутов. Результаты, достижения? Хорошо, я оставлю это для Голливуда.
Резюме
Короче говоря, захват фотографий и видео с камеры вашего пользователя очень прост, а также настраиваем. Большая часть сложного пользовательского интерфейса обрабатывается непосредственно Windows 8, поэтому нам не нужно беспокоиться о большей части взаимодействия с пользователем. В этой статье я предоставил скриншоты и видео, но лучший способ почувствовать этот процесс — работать с реальным приложением.
Джефф также собрал симпатичное небольшое видео о том, как он демонстрирует интерфейс камеры в действии.
Если вы хотите загрузить пример кода, который обсуждался в этой статье, щелкните значок ниже:
Завтра мы рассмотрим, как отправить эти картинки куда-нибудь с помощью PlayTo.
