Video mediaDevices назначают большой двоичный объект для 'videoRef.srcObject' вместо 'src'

Я пытаюсь сделать blob-объект src элемента видео. Мой код работает нормально, когда:

videoRef.src = URL.createObjectURL(blob)

но использование 'src' и 'URL.createObjectURL' устарело вместо использования 'srcObject' https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

введите описание изображения здесь

и https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

введите описание изображения здесь

Мой вопрос в том, как я могу просто добавить файл BLOB-объекта в srcObject следующим образом:

videoRef.srcObject = blob

Когда я пробую приведенный выше код, я получаю сообщение об ошибке: «TypeError: не удалось установить свойство 'srcObject' в 'HTMLMediaElement': предоставленное значение не относится к типу 'MediaStream'».

Как я могу не использовать устаревший videoRef.src и применить blob непосредственно к videoRef.srcObject? Или для типа blob нормально использовать src, и только потоки не могут использовать src?


javascript webrtc html5-video recordrtc
person Will    schedule 03.06.2018    source источник

Ответы (2)


arrow_upward
15
arrow_downward

URL.createObjectURL не рекомендуется использовать только для потоков, но не для больших двоичных объектов и источников мультимедиа.

Предупреждение MDN, на которое вы ссылаетесь, находится в разделе Использование URL-адресов объектов для медиапотоков. В самом предупреждении говорится:

Если у вас все еще есть код, который использует createObjectURL () для присоединения потоков к элементам мультимедиа

Была предпринята попытка отказаться от URL.createObjectURL особенно вокруг потоков, потому что потоки по своей сути являются локальными объектами.

TypeError: не удалось установить свойство srcObject в HTMLMediaElement.

Похоже, ваш браузер еще не реализовал srcObject для больших двоичных объектов. Это обычный банкомат.

Например. и Chrome, и Firefox имеют частичную поддержку srcObject для потоков. только, но не большой двоичный объект, файл или источник мультимедиа.

MDN на srcObject повторяет это:

По состоянию на ноябрь 2017 г. браузеры поддерживают только MediaStream. Для MediaSource, Blob и File необходимо создать URL-адрес с помощью URL.createObjectURL () и назначить его HTMLMediaElement.src.

person jib    schedule 04.06.2018
comment
URL.createObjectURL устарел только для потоков ... Отличный ответ. Спасибо! - person Will; 05.06.2018
comment
Но здесь developer.mozilla.org/en-US/docs/ Web / API / HTMLMediaElement / они приводят пример с MediaSource и комментарием. Избегайте использования этого в новых браузерах, так как он больше не используется для параметра createObjectURL. Это смущает. - person Alexander Zinchuk; 22.03.2020
comment
@AlexanderZinchuk Вы правы, этот пример MDN сбивал с толку, поэтому я обновил его. PTAL! - person jib; 22.03.2020
comment
Я люблю тебя и хочу, чтобы у тебя были мои дети - person nrmad; 04.11.2020

arrow_upward
0
arrow_downward

В дополнение к ответу jib, вот фрагмент кода от с подробным описанием альтернативы поддержки старых браузеров:

const mediaSource = new MediaSource();
const video = document.createElement('video');
try {
  video.srcObject = mediaSource;
} catch (error) {
  video.src = URL.createObjectURL(mediaSource);
}
person ZMil    schedule 20.02.2019