JavaScript:Библиотеки/p5.dom/createCapture()

Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску

Перевод: Максим Кузьмин
Проверка/Оформление/Редактирование: Мякишев Е.А.


Черновик


createCapture() [1]

Описание

Создает HTML5-элемент <video>, содержащий поток аудио/видео с веб-камеры. Этот элемент отделен от холста и по умолчанию показывается, но его можно спрятать при помощи функции hide(). Кроме того, при помощи функции image() поток можно нарисовать на холсте.

Более конкретные свойства потока можно задать в объекте Constraints. Более подробно об этих свойствах можно прочесть тут. Обратите внимание, что не все эти свойства поддерживаются всеми браузерами.

Внимание! Согласно новым требованиям браузеров к обеспечению безопасности, функция getUserMedia(), на основе которой создана createCapture(), работает только локально или на HTTPS. Более подробно читайте тут и тут.

Чтобы воспользоваться этой функцией, необходимо подключить библиотеку p5.dom. Для этого в заголовке своего файла «index.html» впишите следующее:

<script language="javascript" type="text/javascript" src="path/to/p5.dom.js"></script>

Синтаксис

createCapture(type, callback)

Параметры

type      тип захватываемых данных. Если ничего не указано, то это либо видео, либо аудио. По умолчанию  одновременно видео и аудио. Кроме того, это может быть объект Constraints. Тип данных  String, константа, объект.
callback  функция, которая будет вызвана после загрузки потока. Тип данных  функция

Возвращаемое значение

Захваченное видео в виде объекта p5.Element. Тип данных  объект, p5.Element.

Пример

№1

var capture;

function setup() {
  createCanvas(480, 480);
  capture = createCapture(VIDEO);
  capture.hide();
}

function draw() {
  image(capture, 0, 0, width, width * capture.height / capture.width);
  filter(INVERT);
}

№2

function setup() {
  createCanvas(480, 120);
  var constraints = {
    video: {
      mandatory: {
        minWidth: 1280,
        minHeight: 720
      },
      optional: [{ maxFrameRate: 10 }]
    },
    audio: true
  };
  createCapture(constraints, function(stream) {
    console.log(stream);
  });
}

См.также

Внешние ссылки