Как включить media recorder на айфоне
Перейти к содержимому

Как включить media recorder на айфоне

  • автор:

MediaRecorder

The MediaRecorder это интерфейс MediaStream Recording API представляющий функциональность для простой записи медиа. Создаётся с использованием MediaRecorder() конструктора.

Конструктор

Создаёт новый объект MediaRecorder , получающий MediaStream для записи. Доступны такие параметры, как установка типа MIME контейнера ( «video/webm»,»video/mp4″ и другие) и скорости передачи аудио-и видеодорожек или одной общей скорости.

Свойства

MediaRecorder.mimeType Только для чтения

Возвращает тип MIME, который был выбран в качестве контейнера записи для объекта MediaRecorder при его создании.

Возвращает текущее состояние объекта MediaRecorder ( inactive , recording , или paused .)

Возвращает поток который был передан конструктору при создании объекта MediaRecorder

Показывает записывает ли MediaRecorder дорожку MediaStreamTrack если она отключена. Если атрибут равен false , MediaRecorder будет записывать тишину для аудио и чёрные кадры для видео. По умолчанию равно false

Возвращает скорость кодирования видео. Она может отличаться от скорости, определённой в конструкторе (если была предоставлена).

Возвращает скорость кодирования аудио. Она может отличаться от скорости, определённой в конструкторе (если была предоставлена).

Методы

Возвращает Boolean значение показывающее поддерживается ли MIME тип текущим user agent.

Приостанавливает запись медиа.

Запрашивает Blob содержащий сохранённые данные полученные с начала записи (или с последнего вызова requestData() ). После вызова этого метода, запись продолжается, но в новый Blob.

Возобновляет запись медиа после паузы.

Начинает запись медиа. В этот метод можно передать аргумент timeslice со значением в миллисекундах. Если он определён, то медиа будет записываться в отдельные блоки заданной продолжительности, вместо записи в один большой блок.

Останавливает запись, после чего запускается событие dataavailable , содержащее последний Blob сохранённых данных.

Обработчики событий

Вызывает обработчик dataavailable события, которое запускается раз в timeslice миллисекунд (или, если timeslice не был задан — по окончанию записи). Событие типа BlobEvent , сдержит записанное медиа в data . Вы можете использовать обработчик для сбора и других действий в зависимости от полученных данных.

event handler вызывается для обработки события recordingerror , включающего отчёт об ошибках во время записи. Это фатальные ошибки, приводящие к остановке записи. Полученное событие основано на интерфейсе MediaRecorderErrorEvent , свойство которого error содержит DOMException описывающие произошедшие ошибки.

event handler вызывается для обработки события pause , случившегося во время приостановки медиа.

event handler вызывается для обработки события resume , случившегося во время возобновления записи.

event handler вызывается для обработки события start , случившегося во время начала записи.

MediaRecorder.onstop event handler вызывается для обработки события stop , случившегося во время завершения записи, а так же при окончании MediaStream — или после вызова MediaRecorder.stop()

Пример

navigator.getUserMedia = (navigator.getUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.webkitGetUserMedia); if (navigator.getUserMedia) < console.log('getUserMedia supported.'); var constraints = < audio: true >; var chunks = []; var onSuccess = function(stream) < var mediaRecorder = new MediaRecorder(stream); visualize(stream); record.onclick = function() < mediaRecorder.start(); console.log(mediaRecorder.state); console.log("recorder started"); record.style.background = "red"; record.style.color = "black"; >stop.onclick = function() < mediaRecorder.stop(); console.log(mediaRecorder.state); console.log("recorder stopped"); record.style.background = ""; record.style.color = ""; // mediaRecorder.requestData(); >mediaRecorder.onstop = function(e) < console.log("data available after MediaRecorder.stop() called."); var clipName = prompt('Enter a name for your sound clip'); var clipContainer = document.createElement('article'); var clipLabel = document.createElement('p'); var audio = document.createElement('audio'); var deleteButton = document.createElement('button'); clipContainer.classList.add('clip'); audio.setAttribute('controls', ''); deleteButton.innerHTML = "Delete"; clipLabel.innerHTML = clipName; clipContainer.appendChild(audio); clipContainer.appendChild(clipLabel); clipContainer.appendChild(deleteButton); soundClips.appendChild(clipContainer); audio.controls = true; var blob = new Blob(chunks, < 'type' : 'audio/ogg; codecs=opus' >); chunks = []; var audioURL = window.URL.createObjectURL(blob); audio.src = audioURL; console.log(«recorder stopped»); deleteButton.onclick = function(e) < evtTgt = e.target; evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode); >> mediaRecorder.ondataavailable = function(e) < chunks.push(e.data); >> var onError = function(err) < console.log('The following error occured: ' + err); >navigator.getUserMedia(constraints, onSuccess, onError); > else

Примечание: Код выше был взят из демо Web Dictaphone. Некоторые строчки были пропущены для краткости. Полный код смотрите здесь

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

Specification
MediaStream Recording
# mediarecorder-api

Совместимость с браузерами

BCD tables only load in the browser

Ещё по теме

  • Использование MediaRecorder API
  • Web Dictaphone: MediaRecorder + getUserMedia + Web Audio API visualization demo, by Chris Mills (source on Github.)
  • simpl.info MediaStream Recording demo, by Sam Dutton.
  • Navigator.getUserMedia

Запись изображения с экрана iPhone, iPad и iPod touch

  1. Откройте «Настройки» > «Пункт управления», а затем рядом с функцией «Запись экрана» коснитесь кнопки «Добавить» .
  2. Откройте «Пункт управления» на iPhone или на iPad.
  3. Нажмите серую кнопку «Запись»
  4. Выйдите из «Пункта управления», чтобы записать экран.
  5. Чтобы прекратить запись, в верхней части экрана коснитесь кнопки «Запись экрана» , затем коснитесь кнопки «Остановить» . Или откройте пункт управления и нажмите красную кнопку «Запись» .

Откройте приложение «Фото» и выберите сохраненную запись экрана.

Некоторые приложения могут не разрешать записывать аудио и видео. Нельзя выполнять запись изображения с экрана и использовать дублирование экрана одновременно.

Дополнительная информация

Дата публикации: 24 апреля 2024 г.
Эта страница полезна?
Благодарим вас за отзыв.

Обращение в службу поддержки Apple

Нужна помощь? Не откладывайте обращение за помощью, воспользуйтесь онлайн-связью со специалистом.

Как включить media recorder на айфоне

1 Поддерживаемые версии браузеров

Версии браузеров для ПК:

  • Chrome 72+ (Windows 7+, macOS 10.12+, Linux)
  • Яндекс.Браузер 19.3+ (Windows 7+, macOS 10.12+, Linux)
  • Opera 59+ (Windows 7+, macOS 10.12+, Linux)
  • Firefox 66+ (Windows 7+, macOS 10.12+, Linux)
  • Edge 79+ (Windows 7+)

Версии браузеров для мобильных:

  • Chrome 72+ (Android 4.4+)
  • Safari (iOS 12+)

2 Проверка компьютера на совместимость

Страница проверки компьютера: https://proctoredu.ru/check
Рекомендуется выполнить проверку компьютера перед началом мероприятия, чтобы иметь возможность выполнить необходимые настройки компьютера заранее. В случае успешной проверки выводится соответствующее сообщение.

3 Доступ к камере и микрофону

Страница для проверки веб-камеры в браузере:

  • https://webcammictest.com/ru/
  • https://ru.webcamtests.com

Страница для проверки микрофона в браузере:

3.1 В браузере Chrome

При первом запросе разрешения доступа к камере и микрофону нужно ответить «Разрешить».


Если к компьютеру подключено несколько камер:
1) Кликнуть на значок камеры в правой части строки адреса и зайти в настройки по кнопке «Настроить» (Windows и Linux) или кнопке «Управление настройками мультимедийных устройств» (MacOS)

2) В настройках выбрать пункт «Камера»

3) В выпадающем списке выбрать другую камеру

После изменения настроек нужно обновить страницу тестирования.
Если подключено несколько микрофонов, то нужно выполнить аналогичные шаги для пункта «Микрофон».
Если доступ был заблокирован:
1) Кликнуть на значок камеры в правой части строки адреса и зайти в настройки по кнопке «Настроить» (Windows и Linux) или кнопке «Управление настройками мультимедийных устройств» (MacOS)

2) Удалить из списка заблокированных сайтов https://*.proctoring.online:443

3) Обновить страницу и на запрос доступа ответить «Разрешить»

Другой способ разрешить доступ к камере и микрофону, это нажать на значок замка в строке адреса и напротив пунктов «Камера» и «Микрофон» выбрать «Разрешить».

3.2 В браузере Firefox

При первом запросе разрешения доступа к камере и микрофону нужно ответить «Разрешить» («Allow»). Чтобы не было повторных запросов, можно установить галочку «Запомнить решение» («Remember this decision»). Если доступ был запрещен, необходимо перезагрузить страницу и дать разрешение снова.

4 Доступ к экрану

4.1 В браузере Chrome

Разрешить доступ к экрану на компьютере в браузере Chrome можно тремя способами:

  1. В версии Chrome 72+ доступ к экрану запрашивается автоматически, никаких дополнительных действий не требуется;
  2. В более старых версиях Chrome требуется установить расширение браузера Supervisor;
  3. Вместо расширения можно разрешить доступ к экрану специальным флагом, который нужно указать как аргумент при запуске файла «chrome.exe»: —enable-usermedia-screen-capturing

Нужно предоставить доступ ко всему экрану

и после этого доступ нельзя закрывать

4.2 В браузере Firefox

Разрешить доступ к экрану на компьютере в браузере Firefox можно двумя способами:

  • В версии Firefox 66+ доступ к экрану запрашивается автоматически, никаких дополнительных действий не требуется;
  • В более старых версиях Firefox требуется установить расширение браузера Supervisor;

Нужно предоставить доступ ко всему экрану. Для этого во всплывающем окне в поле выбора окна или экрана нужно выбрать «Весь экран» («Entire screen»):

А затем нажать «Разрешить» («Allow») не выбирая галку «Запомнить решение» («Remember this decision»):

5 Проверка на совместимость с технологией WebRTC

Для корректной работы онлайн видеонаблюдения требуется, чтобы в сети пользователей были разрешены исходящие подключения на порты:

  • 3478/tcp
  • 3478/udp
  • 49152-65535/udp

Выполнить проверку WebRTC можно на странице WebRTC Troubleshooter . Для запуска проверки нужно просто нажать кнопку «START». Если проблем не обнаружено, то все пункты должны быть зеленые или желтые.

6 Нет доступа к веб-камере или черный квадрат вместо видео

Если отображается картинка с перечеркнутой камерой, черный прямоугольник или индикатор загрузки, то это означает, что браузер не может получать доступ к камере или камера работает неправильно. Причиной могут быть проблемы с веб-камерой, драйвером камеры или доступом к камере из браузера, если в операционной системе камера используется другим приложением (например, в Skype или в другом браузере) или доступ к камере блокируется антивирусом (ESET — статическая картинка со значком перечеркнутом камеры, Kaspersky — черный экран). Нужно закрыть все приложения, которые могут работать с камерой, отключить антивирус (или защиту камеры в нем) и обновить текущую вкладку в браузере. Можно попробовать перезагрузить компьютер.
Пример блокировки антивирусом ESET:

В Яндекс.Браузере для корректной работы прокторинга нужно отключать режим «Турбо», иначе он блокирует видео с камеры:

Если ничего не помогло, можно попробовать сбросить настройки Chrome, открыв страницу «chrome://settings/resetProfileSettings» и подтвердив действие.

7 Нет доступа к экрану на macOS «Catalina»

Начиная с macOS «Catalina» 10.15 для доступа к экрану браузера нужно выдать дополнительное разрешение в настройках системы. Для этого перейдите в системные настройки меню «Системные настройки».

Затем выберите «Защита и безопасность» → «Конфиденциальность». В предложенном списке нужно отметить браузер, которому нужно разрешить доступ к записи экрана.

После этого потребуется перезапустить браузер.

8 Не открывается страница теста с прокторингом

В браузере не должны блокироваться cookies сторонних сайтов, в Chrome это делается в настройках «Настройки» → «Дополнительные» → «Настройки сайта» → «Файлы cookie» или можно просто ввести «chrome://settings/content/cookies» в строку адреса. Там должен быть отключен пункт «Блокировать сторонние файлы cookie».

Загрузку страницы могут также блокировать некоторые расширения браузера, например Betternet Unlimited Free VPN Proxy или блокировщик рекламы AdBlock . Следует попробовать отключить все сторонние расширения. В браузере Chrome это можно сделать на странице «chrome://extensions/», которую можно открыть через «Меню» → «Дополнительные инструменты» → «Расширения».
Также станца тестирования может запрещать открывать себя в IFRAME, если в запросе передается заголовок «X-Frame-Options». Можно обойти этот запрет, установив расширение Ignore X-Frame headers .

9 Не запускается прокторинг на iOS Safari

Если разрешено прохождение тестов с прокторингом на мобильных устройствах, но в iOS 12+ Safari прокторинг не запускается (интеграция SDK), то нужно проверить настройки Safari. Для корректной работы прокторинга необходимо отключить опцию «Настройки» → «Safari» → «Конфиденциальность и безопасность» → «Без перекрестн. отслеж.»

10 Появляется ошибка MediaRecorder на iOS Safari

Для корректной работы системы в iOS Safari должна быть включена опция MediaRecorder в разделе «Настройки» → «Safari» → «Дополнения» → «Experimental Features» → «MediaRecorder».

11 Не работает прокрутка (скролл) на iOS Safari

В iOS Safari может не работать скролл внутри элементов IFRAME, когда в Safari включена опция «Async Frame Scrolling». Необходимо отключить эту опцию «Настройки» → «Safari» → «Дополнения» → «Experimental Features» → «Async Frame Scrolling».

12 Отключить уведомления и звонки

Рекомендуется отключать уведомления и входящие звонки при прохождении прокторинга на мобильных устройствах или при подключении мобильной камеры. Для этого нужно выполнить описанные ниже шаги.

12.1 В iOS Safari

Зайти в «Настройки» → «Не беспокоить» → включить «не беспокоить» сверху, Тишина — всегда, Телефон — разрешить звонки от — ни от кого, Убрать флаг в «повторяющиеся звонки».

12.2 В Android Chrome

Зайти в «Настройки» → «Звук» → «Не беспокоить» → «Выключить сейчас».

MediaRecorder API

Safari Technology Preview 105 and Safari in the latest iOS 14.3 beta enabled support for the MediaRecorder API by default. This API takes as input live audio/video content to produce compressed media. While the immediate use case is to record from the camera and/or microphone, this API can take any MediaStreamTrack as input, be it a capture track, coming from the network using WebRTC, or generated from HTML (Canvas, WebAudio), as illustrated in the chart below.

The generated output, exposed as blobs, can be readily rendered in a video element to preview the content, edit it, and/or upload to servers for sharing with others.

This API can be feature-detected, as can the set of supported file/container formats and audio/video codecs. Safari currently supports the MP4 file format with H.264 as video codec and AAC as audio codec. MediaRecorder support can be checked as follows:

function supportsRecording(mimeType) < if (!window.MediaRecorder) return false; if (!MediaRecorder.isTypeSupported) return mimeType.startsWith("audio/mp4") || mimeType.startsWith("video/mp4"); return MediaRecorder.isTypeSupported(mimeType); > 

The following example shows how camera and microphone can be recorded as mp4 content and locally previewed on the same page.

html> body> button onclick="startRecording()">start button>br> button onclick="endRecording()">end button> video id="video" autoplay playsInline muted> video> script> let blobs = []; let stream; let mediaRecorder; async function startRecording() < stream = await navigator.mediaDevices.getUserMedia(< audio: true, video: true >); mediaRecorder = new MediaRecorder(stream); mediaRecorder.ondataavailable = (event) => < // Let's append blobs for now, we could also upload them to the network. if (event.data) blobs.push(event.data); >mediaRecorder.onstop = doPreview; // Let's receive 1 second blobs mediaRecorder.start(1000); > function endRecording() < // Let's stop capture and recording mediaRecorder.stop(); stream.getTracks().forEach(track =>track.stop()); > function doPreview() < if (!blobs.length) return; // Let's concatenate blobs to preview the recorded content video.src = URL.createObjectURL(new Blob(blobs, < type: mediaRecorder.mimeType >)); > script> body> html> 

Future work may extend the support to additional codecs as well as supporting options like video/audio bitrates.

getUserMedia in WKWebView

Speaking of Safari in latest iOS 14.3 beta and local capture, navigator.mediaDevices.getUserMedia can now be exposed to WKWebView applications. navigator.mediaDevices.getUserMedia is automatically exposed if the embedding application is able to natively capture either audio or video. Please refer to Apple documentation to meet these requirements. Access to camera and microphone is gated by a user prompt similar to Safari and SafariViewController prompts. We hope to extend WKWebView APIs to allow applications to further control their camera and microphone management in future releases.

We hope you will like these new features. As always, please let us know if you encounter any bugs (or if you have ideas for future enhancements) by filing bugs on bugs.webkit.org.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *