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

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

Перевод: Максим Кузьмин (Cubewriter) Контакты:</br>* Skype: cubewriter</br>* E-mail: cubewriter@gmail.com</br>* Максим Кузьмин на freelance.ru
Проверка/Оформление/Редактирование: Мякишев Е.А.


Pixel Art Mini Meow Animated.gif Черновик


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

 1 var capture;
 2 
 3 function setup() {
 4   createCanvas(480, 480);
 5   capture = createCapture(VIDEO);
 6   capture.hide();
 7 }
 8 
 9 function draw() {
10   image(capture, 0, 0, width, width * capture.height / capture.width);
11   filter(INVERT);
12 }

№2

 1 function setup() {
 2   createCanvas(480, 120);
 3   var constraints = {
 4     video: {
 5       mandatory: {
 6         minWidth: 1280,
 7         minHeight: 720
 8       },
 9       optional: [{ maxFrameRate: 10 }]
10     },
11     audio: true
12   };
13   createCapture(constraints, function(stream) {
14     console.log(stream);
15   });
16 }

См.также

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