Краткое руководство: захват фото или видео с помощью пользовательского интерфейса камеры (HTML)

Статья
02/16/2016

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

В этом разделе мы рассмотрим самый простой способ захвата фото- или видеоизображения с встроенной или подключенной камеры с помощью API CameraCaptureUI. Этот API запускает полноэкранное диалоговое окно пользовательского интерфейса камеры и позволяет очень просто выполнять захват фото- или видеоизображения.

Если же вы хотите создать собственный пользовательский интерфейс вместо того, который предоставляется классом CameraCaptureUI, следует использовать класс MediaCapture. Подробнее см. здесь: Краткое руководство: захват видео с помощью API MediaCapture.

Цель: Захват фото- или видеоизображения с веб-камеры.

Необходимые условия

Вы должны быть знакомы с JavaScript, а на компьютере с Windows 8 должна быть установлена среда Microsoft Visual Studio.

Время для завершения: 20 мин.

Инструкции

1. Открытие Visual Studio

Запустите экземпляр Visual Studio.

2. Создание нового проекта

В диалоговом окне Создать проект выберите среди типов проектов JavaScript пустое приложение.

3. Вставьте приложение JavaScript и HTML

Откройте файл Default.html и скопируйте в него следующий HTML, заменив исходное содержимое.

<!DOCTYPE html>
<html>
<head>   
   <title>WinWebApp1</title>
   <!-- WinJS references -->
   <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
   <script src="/winjs/js/base.js"></script>
   <script src="/winjs/js/wwaapp.js"></script>
   <!-- WinWebApp1 references -->
   <link rel="stylesheet" href="/css/default.css" />
    
   <script type = "text/javascript" >

   // Takes a photo using the default JPEG format.
   function takepicture() {
      var captureUI = new Windows.Media.Capture.CameraCaptureUI();
      captureUI.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).then(function (capturedItem) {
         if (capturedItem) {
             document.getElementById("message").innerHTML = "User captured a photo."
         }
         else {
             document.getElementById("message").innerHTML = "User didn't capture a photo."
         }
      });
   }
   </script>
</head>
<body>
   <input type="button" onclick="takepicture()" value="Take a Picture" /><br />
   <span id="message"></span>
</body>
</html>

4. Объявите возможность работы с веб-камерой

Чтобы добавить возможность работы с веб-камерой, используйте конструктор файла манифеста приложения. Выберите вкладку Возможности, а затем выберите в списке вариант Веб-камера.

5. Создание приложения

Щелкните Сборка > Собрать решение, чтобы выполнить сборку проекта.

6. Проверка приложения

Щелкните Отладка > Начать отладку, чтобы проверить решение.
Чтобы сделать фотографию, нажмите кнопку Take Picture.

Сводка

Вы только что сделали снимок, используя параметры по умолчанию. Также можно задать другие формат или пропорции или же записать видео.

Чтобы захватить фотоизображение с пропорциями 4:3 в формате PNG, вставьте этот код над вызовом метода captureFileAsync в коде, который вы вставили в приложение
```
captureUI.photoCaptureSettings.format = Windows.Media.Capture.CameraCaptureUIPhotoFormat.png;
captureUI.photoCaptureSettings.croppedAspectRatio = {width:4, height:3};
```

Связанные разделы

Краткое руководство: захват видео с помощью API MediaCapture

Образец захвата мультимедийного содержимого

Поделиться через