Предварительный просмотр видео с веб-камеры (HTML)

Статья
02/16/2016

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

Вы можете связать камеру с тегом <video> для предпросмотра видео.

Примечание В этом разделе рассказывается, как программным способом связать камеру с элементом управления видео HTML5. Класс CameraCaptureUI (средство выбора камеры) здесь не рассматривается. Кроме того, этот раздел относится исключительно к приложениям среды выполнения Windows на JavaScript. Приложения среды выполнения Windows на C++, C# и Visual Basic используют другой API.

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

Предполагается, что вы умеете создавать простые приложения среды выполнения Windows на JavaScript. Дополнительную информацию о создании первого приложения см. в разделе Создание первого приложения Магазина Windows на JavaScript.

Инструкции

Этап 1: Установка возможностей устройства в манифесте приложения

Чтобы включить доступ к веб-камере, необходимо прежде всего указать в манифесте приложения соответствующее значение DeviceCapability.

В Microsoft Visual Studio откройте конструктор манифеста приложения, дважды щелкнув элемент package.appxmanifest в обозревателе решений.
Выберите вкладку Capabilities (Характеристики).
Проверьте, установлен ли флажок Webcam (Веб-камера).

Этап 2: Добавление кода

Тег <video> можно использовать для предпросмотра видео с веб-камеры.

<script type="text/javascript">
   function init(){
      var mediarec = new Windows.Media.MediaRecorder();
      var opInitializeRecorder = mediarec.initializeAsync(null);
      opInitializeRecorder.start();
   }

   function preview(){  
      var myVideo = document.getElementById("videoTag1");
      myVideo.src = URL.createObjectURL(mediarec);
      myVideo.play();
   }
</script>

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

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

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