GetUserMedia: Використання Media Capture та Streams API

Сьогодні я хотів би поекспериментувати з API Media Capture та Streams, розробленим спільно на W3C Робочою групою Web-комунікацій у реальному часі та Робочою групою API пристроїв. Деякі розробники можуть знати його просто як getUserMedia , який є основним інтерфейсом, який дозволяє веб-сторінкам отримувати доступ до пристроїв захоплення мультимедіа, таких як веб-камери та мікрофони.

Ви можете знайти вихідний код цього проекту на моєму GitHub. Крім того, ось робоча демонстрація, з якою ви можете поекспериментувати. В останній попередній версії Windows 10 Microsoft вперше додала підтримку API захоплення мультимедіа у браузері Microsoft Edge. Більшість цього коду було взято зі зразка Photo Capture, який команда розробників Edge створила на своєму сайті тест-драйву.

Для тих з вас, хто хоче зануритися трохи глибше, Ерік Бідельман має чудову статтю на HTML5 Rocks, яка входить в історію цього API.

Початок у швидкості

Метод getUserMedia() є гарною відправною точкою для розуміння API Media Capture. getUserMedia() приймає MediaStreamConstraints як вхідний аргумент, який визначає переваги та / або вимоги для пристроїв захоплення та захоплених потоків мультимедіа, таких як facingMode камери, гучність мікрофона та роздільна здатність відео.

За допомогою MediaStreamConstraints ви також можете вибрати певний захоплений пристрій, використовуючи його deviceId , який можна отримати з методу enumerateDevices() . Як тільки користувач надасть дозвіл, getUserMedia() поверне обіцянку з об'єктом MediaStream, якщо конкретні MediaStreamConstraints можуть бути виконані.

Все це без потреби завантажувати плагін! У цьому прикладі ми заглибимося в API і створимо кілька акуратних фільтрів для відео та зображень, які ми захоплюватимемо.Ваш браузер підтримує це? Ну, getUserMedia() існує з Chrome 21, Opera 18 та Firefox 17, і тепер працює в Edge.

Виявлення функцій

Функція виявлення включає просту перевірку існування navigator.getUserMedia . Це великий проект для перевірки в кожному браузері, тому я запропонував би просто використовувати Modernizr для перевірки. Ось як це працює:

MediaDevices: getUserMedia() method

Ця особливість є добре створеною і роботою, пов'язаною з багатьма пристроями і розробниками версій. It's been available across browsers since September 2017 .

Secure context: Цей характер є доступним тільки в сучасних контекстах (HTTPS), в деяких або всіх підтримуваних браузерах.

The getUserMedia() Метод з MediaDevices interface prompts the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media.

Що stream може включати, наприклад, відео track (вироблений з будь-якого hardware або віртуального відео джерела, як камера, відеозаписи, передача послуг, а також для фортепіано), аудіо track (подібно, виконана з фізичної або virtual audio source як microphone, A/D converter, or the like), і вірогідно інші транспортні типи.

Це returns a Promise that resolves to a MediaStream object. Якщо користувач застосовує передачу, або передача медіа недоступна, то передача є скасована з неможливимнеправильним або невідомимефектом DOMException respectively.

Note: It's possible for the returned promise to neither resolve nor reject, як користувач не вимагається, щоб вибрати, що все і не може ignore request.

Syntax

getUserMedia(constraints)

Parameters

На об'єкті, спрямовані на типи даних, що потребують, протягом тривалого часу з іншими потребами для кожного типу.

Зворотні параметри є об'єктом з двома членами: відео і відео, повідомлень про типи типів. Either or both must be specified.Якщо браузер не може виконати всі media tracks with specified types that meet the constraints given, then the returned promise is rejected with NotFoundError DOMException .

Для відео і відео, його значення є її boolean або object. The default value is false.

Якщо true is specified for a media type, resulting stream is required це має той тип track in it. Якщо один не може бути включений до будь-якої причини, відновлена пропозиція буде здійснена.
If false is specified for a media type, resulting stream must not має те, що тип track, або відновлений проміжок буде reject. Тому, що відео або відео дефекту до false , якщо конфігурації об'єкта містяться в інших властивостях, або якщо це не існує на всіх, перевірена передача буде в будь-який спосіб.
Якщо об'єкт використовується для типу типу, цей об'єкт використовується як MediaTrackConstraints dictionary.

Return value

A Promise який fulfillment handler receives a MediaStream object when the requested media ha successful been obtained.

Exceptions

Більше того, як користувач і функціонує система, як прямий доступ до hardware device, і не hardware issues ocurred that would cause a NotReadableError DOMException , throw if some problem ocurred which prevented the device from being used.

Thrown if current document is not fully active.

Тому, якщо один або більше потрібних джерел сайту може бути використана в цей час. Це буде зроблено, якщо розрізнення повідомлень є неможливим (що є, на сторінці було завантажено, використовуючи HTTP, тому що HTTPS). Це також happens if the user has specified that the current browsing instance is not permitted access to the device, user has denied access for the current session, or the user has denied all access to user media devices globally. На браузерах, що підтримує керування медичними можливостями з використанням політики, ця помилка буде відновлена, якщо збройна політика не configured для того, щоб отримати доступ до вкладеного джерела(s).

Note: Наступні версії specification use SecurityError for this instead; SecurityError has taken on a new meaning.

Тому якщо не media tracks of typed specified were found that satisfy the given constraints.

Тому що, за допомогою користувача здійсненого керування використанням керування пристроями, hardware error випливає з операційної системи, браузера, або веб-сторінка рівня, яка була спрямована на підключення до пристрою.

Трown if the specified constraints resulted in no candidate devices which met the criteria requested. Проблема є об'єктом типу ЗавершилапомилкаError , і має загрожує особливість, яка string value is name of constraint which was impossible to meet, and message property containing a human-readable string explaining the problem.

Note: Тому цей error може свідчити, навіть якщо він не може бути прийнятий вхід до використання підліткового пристрою, він може потенційно бути використаний як fingerprinting surface.

Thrown if user media support disabled on the Document on which getUserMedia() була названа. Механізм, за допомогою якого використовується програма керування електронною поштою, використовується для налаштування та disabled, використовується для індивідуального користувача.

Thrown if the list of constraints specified is empty, або має всі constraints set to false . Це може бути зроблено, якщо ви намагаєтеся отриматиUserMedia() в інспекторському контексті, без навколишнього середовища.

Privacy and security

Як API, що може бути необов'язковим значущим пристосуванням, getUserMedia() 's specification lays out wide array of privacy and security requirements that browsers are obligated to meet.

getUserMedia() is a powerful feature that can only be used in secure contexts; in insecure contexts, navigator.mediaDevices is undefined , preventing access to getUserMedia() . У надійному контексті є, в шорти, сторінку наданої за допомогою HTTPS або файлу http:/// URL scheme, або на сторінці з сайту loaded .

У додатку, user permission is always required to access the user's audio and video inputs.Лише window's top-level document context for valid origin in can even request permission to using UserMedia() , не підвищує top-level context expressly grants permission for given to do so using Permissions Policy. Іншівикористання користувача буде невідповідно до того, як вибрано для того, щоб використовувати вхідні пристрої.

Для додаткових речей на ці вимоги і правила, як вони будуть пояснені в контексті, в яких ваш код керує, і про те, як браузери керують user privacy and security issues, read on.

User privacy

Як API, що може бути необов'язковим значущим конфіденційністю, getUserMedia() є конкретним для дуже специфічних потреб для user notification and permission management. First, getUserMedia() must always get user permission before opening any media gathering input such as webcam or microphone. Браузери можуть запропонувати once-per-domain permission feature, але вони повинні дотримуватися в останній час, і користувачі повинні specifically grant ongoing permission якщо вони беруться до ні.

З еквівалентної важливості є правила навколо notification. Браузери є необхідною для того, щоб відобразити дисплей, що показує, що камера або мікрофон є в використанні, над і будь-який hardware indicador що існує. Вони повинні також казати про те, що схвалення буде задовольнятися використанням пристрою для введення, навіть якщо пристрій не є активно відображається на момент.

Для прикладу в Firefox, URL bar displays pulsing red icon для того, щоб повідомити про те, що записаний є на південь. Icon is gray if the permission is in place but recording is not currently underway. Пристрій фізичного світла використовувався для того, щоб визначити, який або не відображається є поточно активним. Якщо ви мусите користуватися своїми камерами (так званий "facemuting"), ваші камери функціонують світло прогулянки від того, що значок, що камера не є активно реагувати на вас, без discarding the permission to resume using the camera once muting is over.

Security

Там є число способів безпеки управління і керування в agent user can cause getUserMedia() return a security-related error.

Permissions Policy

The 2 Permissions Policy directives that apply to getUserMedia() є camera and microphone .

Для прикладу, цей HTTP клавіатура буде задовольнити використання камери за допомогою документа і будь-якого об'єднаного елемента, що є loaded від того ж самого:

Permissions-Policy: camera=(self)

Це буде використання access to microphone для поточного origin і specific origin https://developer.mozilla.org :

Permissions-Policy: microphone=(self "https://developer.mozilla.org")

Якщо ви використовуєте getUserMedia() within an , ви можете скористатися можливим для того, щоб кадр, який clearly more secure than requesting a more general permission. Тут, наскільки потрібна можливість для використання як camera and microphone:

Encryption based security

getUserMedia() method is only available in secure contexts. У надійному контексті є один браузер є явно confident contains document which був loaded securely, використовуючи HTTPS/TLS, і має обмежений exposure to insecure contexts. Якщо документ не завантажено в додатковий контекст, навик.

Примітка до використання getUserMedia() в цьому положенні буде результат в TypeError .

Document source security

Тому, що існують надійні проблеми, пов'язані з використаннямUserMedia(), якщо використовуються бездипломно або без безпеки, коли він керується, може бути тільки в контексті. Там є число можливих способів, щоб завантажити документ, що короткий, в поточний час, щоб скористатися getUserMedia() . Наведені нижче приклади повідомлень у яких getUserMedia() is not permitted to be called:

Document loaded in sandboxed element cannot call getUserMedia() не має його sandbox atribut set to allow-same-origin .
A document loaded using a data:// or blob:// URL, який не має origin (такий як один з цих URL-адрес є типовим для користувача в адресу bar) може не отримувати повідомленняUserMedia() . Ці малюнки URL-адреси loaded з JavaScript code inherit the script's permissions.
Будь-яке інше розташування в якому є не origin, так як при srcdoc atribut is used до specify the contents of a frame.

Examples

Using getUserMedia()

Generally, ви будете використовувати MediaDevices один object object using navigator.mediaDevices , як це:

async function getMedia(constraints) < let stream = null; try < stream = await navigator.mediaDevices.getUserMedia(constraints); /* use the stream */ >catch (err) < /* handle the error */ >>

По-друге, використовуючи невеликі promises directly, the code looks like this:

navigator.mediaDevices .getUserMedia(constraints) .then((stream) => < /* use the stream */ >) .catch((err) => < /* handle the error */ >);

Note: Якщо поточний документ не завантажено вірно, navigator.mediaDevices буде undefined , і ви не можете використовувати getUserMedia() . See Security for more information on this and other security issues related to using getUserMedia() .

Нижче є деякі зразки параметрів параметрів.

Наступні запити як audio і video без будь-яких конкретних вимог:

While інформацію про user's cameras and microphones є inaccessible for privacy reasons, application can request the camera and microphone capabilities it needs and wants, using additional constraints. Наступні expresses a preference for 1280x720 camera resolution:

Браузер буде намагатися скористатися цим, але може відреагувати на інші рішення, якщо несправжній матч не є наявним, або він перевірити його.

To require a capability, use thekeywords min , max , чи exact (a.k.a. min === max ). Наступні вимоги minimum resolution of 1280x720:

Якщо камера не існує з цим рішенням або високим, то буде переміщена помилка, щоб бути здійснена з overconstrainedError , і він не буде покладений.

Відповідь для відмінності в поведінці є те, що ключові слова min , max , and exact are inherently mandatory — whereas plain values and keyword called ideal are not. Here's a full example:

Ideal value, when used, has gravity - which means that the browser will try to find the setting (and camera, if you have more than one), with the small fitness distance from the ideal values given.

Відмінні значення є врівноважено ідеальним, які методи, що в першу чергу для наших розв'язання випадки, як правило, повинні бути написані як це:

Не всі загрожують числовими номерами. Для прикладу, на мобільних пристроях, наступні будуть prefer the front camera (якщо є наявним) over the rear one:

To require the rear camera, use:

Інші non-number constraint is the deviceId constraint. Якщо ви маєте пристрійІд від mediaDevices.enumerateDevices() , ви можете використовувати його для конкретних пристроїв:

Усього буде відновити камеру, яку ви потребуєте, або різна камера, якщо конкретна камера не є тривалим доступним. Again, to require the specific camera, you would use:

Width and height

Це наслідки preference for camera resolution, and assigns the resulting MediaStream object to video element.

// Prefer camera resolution nearest to 1280x720. const constraints = <audio: true, video: <width: 1280, height: 720>,>; navigator.mediaDevices .getUserMedia(constraints) .then((mediaStream) => < const video = document.querySelector("video"); video.srcObject = mediaStream; video.onloadedmetadata = () =>< video.play(); >; >) .catch((err) => < // always check for errors at the end. console.error(`$: $`); >);

Frame rate

Низькі frame-rates можуть бути непридатними в деяких випадках, як WebRTC transmissions with bandwidth restrictions.

Front and back camera

let front = false; document.getElementById("flip-button").onclick = () => < front = !front; >; const constraints = < video: < facingMode: front ? "user" : "environment" >, >;

Note: У певних випадках, це може бути необхідним для керування поточною камерою, що тримає режим перед тим, як можна перемикати до одного. Для того, щоб забезпечити камеру перемикання, вона є пристосованою до безкоштовного вмісту медіа ресурсів за допомогою "stop()" method on the track before requesting a different facing mode.

Specifications

Browser compatibility

BCD tables only load in the browser

MediaDevices.getUserMedia()

Метод MediaDevices .getUserMedia() , при виконанні викликає спливаючий діалог, що запитує дозвіл користувача на використання медіа пристрою (камера, мікрофон). Результат повертає проміс, що містить потік, який складається з треків (доріжок), що містять необхідні типи медіа. Цей потік може включати, наприклад, відеотрек, створений апаратним засобом, або віртуальним відеоджерелом, такими як камера, пристрій відеозапису, сервіс обміну зображеннями і т.д); аудіотрек, створений фізичним або віртуальним аудіоджерелом, наприклад, мікрофоном, аналого-цифровим перетворювачем звуків та можливо інші типи треків.

Він повертає Promise , який, за згодою користувача, дозволяється MediaStream об'єктом.Якщо користувач відмовляє у дозволі, або медіапристрій не доступний, тоді проміс скасовується з об'єктами типу NotAllowedError або NotFoundError відповідно.

Примітка: Можливо, що проміс ні дозволитись, ні скасуватись, у випадку, коли користувач не зробить вибір і запит проігнорує.

Зазвичай розробник отримує доступ до єдиного екземпляра об'єкта MediaDevices , використовуючи navigator.mediaDevices.getUserMedia() метод, що повертає потік:

async function getMedia(constraints) < let stream = null; try < stream = await navigator.mediaDevices.getUserMedia(constraints); /* використовуємо потік */ >catch (err) < /* обробка помилки */ >>

Той самий результат, але використовуючи тип промісу :

navigator.mediaDevices .getUserMedia(constraints) .then(function (stream) < /* використовуємо потік */ >) .catch(function (err) < /* обробка помилки */ >);

Примітка: Якщо документ завантажений не безпечно, значення navigator.mediaDevices буде undefined і не можна буде використовувати метод getUserMedia() . Див. Security для додаткової інформації про подальші питання безпеки, пов'язані з використанням методу getUserMedia() .

Синтаксис

var promise = navigator.mediaDevices.getUserMedia(constraints);

Параметри

Об'єкт MediaStreamConstraints , що визначає медіатипи, що запитуються, разом з вимогами для кожного типу.

Тип параметра constraints (обмеження) - це об'єкт типу MediaStreamConstraints з двома членами: video і audio , що описують медіатипи, що запитуються. Один або обидва повинні визначатися розробником. Якщо браузер не зможе виявити медіатреки визначеного типу, які відповідають переданим обмеженням, проміс, що повертається методом, скасовується з об'єктом NotFoundError .

Наступний уривок коду запитує і типи audio і video без додаткових умов:

Якщо визначається значення true для медіатипу, результуючий потік обов'язково матиме запитаний медіатип. Якщо жоден тип не входить до запиту, виклик методу getUserMedia() призведе до помилки.

Якщо повна інформація про камери та мікрофони користувача недоступна з причин конфіденційності, програма може запросити доступ тільки до необхідних функцій, використовуючи додаткові умови. Наступний приклад запитує відеотрек з роздільною здатністю камери 1280x720 пікселів:

Браузер спробує виконати умову, але може повернути відеотрек іншого дозволу, якщо встановлені вимоги неможливо задовольнити (камера не має такого дозволу), або користувач перевизначає умову.

Для мінімального, максимального та точного визначення значення можна використовувати ключові слова min, max, або exact. Наступний приклад запитує мінімальну роздільну здатність камери 1280x720:

Якщо камера не в змозі забезпечити вказану мінімальну роздільну здатність або більш високу, проміс, що повертається, буде скасовано з об'єктом OverconstrainedError , і користувач не побачить діалогу запиту дозволу.

Відмінність поведінки відбувається через те, що ключові слова min , max і exact є обов'язковими до виконання. У той час як прості значення та ключове слово ideal – не обов'язкові до виконання. Нижче, повний приклад:

Значення якості ideal має пріоритет. Це означає, що браузер намагатиметься виявити налаштування з найменшою fitness distance (відмінною відмінністю) від переданих ідеальних значень. Тобто. намагається знайти найближче до переданого значення.

Прості значення працюють як ідеальні, тому один із перших прикладів вище можна переписати, використовуючи властивість ideal:

Не всі значення обмежень є числовими.Наприклад, на мобільних пристроях наступний уривок буде запитувати передню камеру (якщо є), тому у властивості facingMode зазначено рядкове значення user :

Запит зворотної (задньої) камери:

Наступне рядкове властивість - deviceId (ідентифікатор пристрою). Його значення може бути отримано з методу mediaDevices.enumerateDevices() , що повертає список наявних на машині пристроїв з їх ідентифікаторами, і може бути використане для запиту певного пристрою за ідентифікатором цього пристрою:

Код поверне запитувану камеру або іншу камеру, якщо потрібна камера недоступна. Для отримання доступу до потоку лише певної камери без альтернативи використовується властивість exact (точно) :

Значення, що повертається

Проміс Promise, при вдалому запиті потрібного медіа пристрою дозволяється об'єктом типу MediaStream.

Винятки (Помилки)

При невдалому запиті медіа пристрою, промис Promise, що повертається, скасовується об'єктом типу помилки DOMException . Можливими помилками можуть бути типи:

Хоча користувач та операційна система надали доступ до апаратного пристрою, і не виникло проблем з обладнанням, які могли б викликати NotReadableError, виникла деяка проблема, яка не дозволила використовувати пристрій.

Виникає якщо, один або кілька пристроїв, що запитуються, не може бути використані в даний час. Це відбувається тоді, коли контекст браузера не є безпечним (сторінка була завантажена використовуючи протокол HTTP замість HTTPS), а також, якщо користувач не дозволив доступ поточному екземпляру браузера до пристрою, користувач відмовив у доступі в поточній сесії, або користувач відмовив у доступі до міді глобально.Для браузерів, які підтримують керування медіадозвілами за допомогою Feature Policy, така помилка повертається якщо Feature Policy не налаштована для дозволу доступу до медіапристрою або пристроїв

Примітка: Більш старі версії специфікації замість цього використовували SecurityError. SecurityError має нове значення.

Виникає якщо типи медіа треків, що задовольняють переданим значенням, не знайдені.

Хоча користувач і надав дозвіл на використання відповідних пристроїв, виникла помилка апарату на рівні операційної системи, браузера або веб-сторінки, яка перешкоджала доступу до пристрою.

Виникає, якщо в результаті зазначених обмежень не було знайдено пристроїв, які відповідають запитаним критеріям. Помилка є об'єктом типу OverconstrainedError і має властивість constraint , рядкове значення якого є ім'ям обмеження, яке було неможливо зустріти, і властивість message , що містить людину, що читається рядок, що пояснює проблему.

Примітка: Помилка може виникнути навіть, якщо користувач ще не видав дозвіл на використання пристрою, який використовується як поверхня для ідентифікації відбитка пальця.

Виникає якщо, медіа підтримка відключена в Document, на якому був викликаний метод getUserMedia() . Механізм за яким медіа підтримка включається та відключається перебувати в компетенції браузера користувача.

Якщо список обмежень порожній або всі обмеження встановлені в false . Так само це відбувається, якщо намагатися викликати метод getUserMedia() у небезпечному контексті, оскільки в ньому navigator.mediaDevices і undefined .

Конфіденційність та безпека

Оскільки API можуть суттєво порушувати питання конфіденційності, специфікація getUserMedia() пред'являє широкий спектр вимог захисту конфіденційності та безпеки, яким сучасні браузери повинні дотримуватися.

getUserMedia() - це потужна функція, яка може бути використана лише у безпечному контексті. У небезпечному контексті navigator.mediaDevices одно undefined , запобігаючи доступу до методу getUserMedia() . Безпечний контекст - це, якщо коротко, сторінка, що завантажується за протоколом HTTPS або file:/// URL схемою, або сторінка, що завантажується з localhost .

У ньому обов'язково запитується дозвіл користувача до доступу audio або video джерелам. Тільки контекст документа верхнього рівня перевіреного джерела може запросити доступ, використовуючи метод getUserMedia() . Якщо контексту верхнього рівня явно не надається дозвіл для цього використовуючи Feature Policy, користувачеві ніколи не буде запропоновано видати дозвіл на використання пристроїв, доки користувач самостійно не скасує заборону в налаштуваннях браузера.

Додаткові подробиці на тему вимог і правил, і як вони відображені в контексті коду, про те, як браузери керують питаннями конфіденційності та безпеки читайте далі.

Конфіденційність користувача

Оскільки програмний інтерфейс торкається питань конфіденційності та безпеки, у специфікації, для методу getUserMedia() містяться особливі вимоги для керування повідомленнями та дозволами користувача. Спочатку метод getUserMedia() повинен завжди вимагати дозволу користувача до початку збору даних потоків камери і мікрофона. Браузер може використовувати функціональність одного дозволу на домен, але вперше браузер обов'язково має отримати дозвіл користувача.

Не менш важливими є правила повідомлення.Браузери обов'язково відображають індикатор, який вказує на використання камери або мікрофона, вище або зверху будь-якого вже наявного індикатора апаратного засобу (якщо є). Вони також повинні відображати індикатор того, що дозвіл вже виданий для використання пристроїв, навіть якщо пристрої не використовуються зараз.

Наприклад, Firefox, в панелі адреси відображається червона пульсуюча іконка, що вказує на використання апаратного засобу. Сірий значок вказує на виданий дозвіл, але не використання апаратного засобу в даний момент. Фізичний (явний) світло пристрою свідчить про поточне використання (активізацію) апаратного засобу. Якщо вимкнути камеру програмно, світло активності камери вимикається, вказуючи на те, що вона запис не робить, без скасування дозволу на використання, і включитися після запуску камери в роботу.

Безпека

Існують кілька способів управління безпекою та контролем в user agent. Для цього можна використовувати метод getUserMedia() , який повертає об'єкти помилок щодо безпеки.

Примітка: Модель безпеки для методу getUserMedia() знаходиться у процесі розробки. Спочатку спроектований механізм безпеки перебувати у процесі заміщення Feature Policy, тому різні браузери мають різний рівень підтримки безпеки, використовують різні механізми. Вам необхідно обережно тестувати свій код на різних пристроях та браузерах, щоб упевнитись у його впевненій працездатності.

Feature Policy (Функціональна політика)

Функція керування безпекою (Feature Policy) протоколу HTTP знаходиться в процесі введення в браузери, з підтримкою, доступною різною мірою в багатьох браузерах (але не завжди включеної в стандартних налаштуваннях, як у Firefox). Метод getUserMedia() - один із методів, що вимагає використання функціональної політики та вашого коду потрібно бути готовим до роботи з ним.Наприклад, щоб метод був доступний у документах не високого рівня, розробнику потрібно використовувати або атрибут allow на елементі, який використовує getUserMedia(), або Feature-Policy заголовок для сторінок, що передаються з сервера, які використовують getUserMedia().

Два дозволи, які звертаються до getUserMedia() - camera та microphone .

Наприклад, рядок HTTP заголовка дозволить використовувати камеру документу та будь-яким вбудованим елементам, які завантажуються з одного джерела:

Feature-Policy: camera 'self'

Рядок нижче, запитує доступ до мікрофону для поточного джерела та вказаному в заголовку https://developer.mozilla.org :

Feature-Policy: microphone 'self' https://developer.mozilla.org

Якщо використовується getUserMedia() всередині елемента , можна запросити дозвіл лише для цього кадру, який явно більш безпечний, ніж запитувати більш загальну роздільну здатність. Тут нам потрібно використовувати і камеру, і мікрофон:

Безпека на основі шифрування

Метод getUserMedia() доступний тільки для безпечних контекстів Безпечний контекст - це впевненість браузера в тому, що документ був завантажений безпечно, використовуючи HTTPS/TLS, і має обмежену схильність до небезпечних контекстів. Якщо документ не завантажений у безпечному контексті, властивість navigator.mediaDevices дорівнює undefined , унеможливлюючи доступ до методу getUserMedia() . Спроба отримати доступ у такій ситуації призведе до помилки TypeError.

Безпека джерела документа

Існує кілька небезпечних способів завантажити документ, який може спробувати викликати метод getUserMedia() . Нижче наведено приклади ситуацій, в яких getUserMedia() не дозволяється викликати:

Документ, завантажений в пісочницю елемента не може викликати getUserMedia() , доки на елементі знаходиться атрибут sandbox , встановлений у значення allow-same-origin .
Документ, завантажений за протоколами data:// або blob:// в URL-адресі, що не має джерела (такими є типи URL-адрес, введені користувачами в рядку адреси браузера) не може викликати getUserMedia() . Подібні типи URL-адрес, що завантажуються з JavaScript-коду, успадковують дозволи скрипту.
Інші ситуації, документи яких немає джерела, наприклад елемент, що містить атрибут srcdoc , що використовується для зазначення вмісту кадру.

Приклади

Ширина та висота

Цей приклад вибирає вказану роздільну здатність камери і надає посилання на об'єкт MediaStream властивості srcObject елемента video .

// Вибирає роздільну здатність камери близьке до 1280x720. var constraints = < audio: true, video: < width: 1280, height: 720 >>; navigator.mediaDevices .getUserMedia(constraints) .then(function (mediaStream) < var video = document.querySelector("video"); video.srcObject = mediaStream; video.onloadedmetadata = function (e) < video.play(); > ; >) .catch(function (err) < console.log(err.name + ": " + err.message); >); // always check for errors at the end.

Використання нових API у старих браузерах

Нижче наведено приклади, які використовують navigator.mediaDevices.getUserMedia() , з поліфілами для роботи в старих браузерах. Зверніть увагу, що ці поліфіли не коригують всі відмінності в синтаксисі і не працюють у всіх браузерах. Рекомендується використовувати бібліотеку adapter.js як виробничий поліфіл.

// Старі браузери можуть не реалізовувати властивість mediaDevices // тому спочатку привласнюємо властивості посилання на порожній об'єкт if (navigator.mediaDevices === undefined) < navigator.mediaDevices = <>; > // Деякі браузери частково реалізують властивість mediaDevices, тому //ми не можемо надати посилання на об'єкт властивості getUserMedia, оскільки //це перевизначить існуючі властивості. Тут просто додамо властивість //getUserMedia , якщо вона відсутня.if (navigator.mediaDevices.getUserMedia === undefined) < navigator.mediaDevices.getUserMedia = function (constraints) < // Спочатку, якщо доступно, отримаємо застаріле getUserMedia var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia; //Деякі браузери не реалізують його, тоді повернемо скасований проміс // з помилкою для підтримки послідовності інтерфейсу if (! getUserMedia) < return Promise. >// Інакше, обернемо промісом застарілий navigator.getUserMedia return new Promise(function (resolve, reject) < getUserMedia.call(navigator, constraints, resolve, reject); >); >; > navigator.mediaDevices .getUserMedia(< audio: true, video: true >) .then(function (stream) < var video = document.querySelector("video"); // Застарілі браузери можуть не мати властивість srcObject if ("srcObject " in video) < video.srcObject = stream; >else < // Не використовуємо в нових браузерах video.src = window.URL.createObjectURL(stream); >video.onloadedmetadata = function (e) < video.play(); >; >) .catch(function (err) < console.log(err.name + ": " + err.message); >);

Частота кадрів

У деяких випадках може бути бажаною більш низька частота кадрів, наприклад, при передачі WebRTC з обмеженнями смуги пропускання

Передня та задня камери

На мобільних пристроях.

var front = false; document.getElementById("flip-button").onclick = function() < front = !front; >; var constraints = < video: < facingMode: front ? "user": "environment" >>;

Специфікації

Сумісність із браузерами