Как создать objectUrl из mediaStream?

Question

[historydev]

Мне нужно создать ссылку на стрим из userMedia, я пробую по примеру с mdn - оригинал:

const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true });
const video = document.createElement("video");
if ("srcObject" in video) {
  video.srcObject = mediaStream;
} else {
  // Avoid using this in new browsers, as it is going away.
  video.src = URL.createObjectURL(mediaStream);
}

Мой код:

var stream
async function turnOnCameraHandler() {
    var mediaStream = await navigator.mediaDevices.getUserMedia({
        video: /*{
            frameRate: { ideal: 60, max: 60 },
            facingMode: {
                exact: 'environment'
            },
        }*/ true,
        audio: false
    });
    
    stream = mediaStream;
    video.srcObject = stream;
    
    console.log(URL.createObjectURL(mediaStream))
}

На выходе получаю ошибку:

Uncaught (in promise) TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
    at turnOnCameraHandler

В гугле много вариаций этой ошибки, но конкретно с моей ситуацией не нашёл пока.

Предупреждение mdn:

Предупреждение: если у вас все еще есть код, который использует createObjectURL()присоединение потоков к элементам мультимедиа, вам необходимо обновить свой код, чтобы установить srcObjectего MediaStreamнапрямую.

Важно:

Основная проблема, почему я пытаюсь это сделать, в том, что на андроиде в webview зависает autoplay видео, если просто указать video.srcObject = stream, я ищу решение, решил попробовать вставить элемент с source и src.

Comments

[szQocks]

MediaDevices.getUserMedia() возвращает промис, а createObjectURL - принимает в качестве параметра объект типа File, Blob или MediaSource объект, для которого создается URL

в общем ты прокидываешь не то что нужно в параметр createObjectURL

[szQocks]

Использование URL-адресов объектов для медиапотоков
В более старых версиях спецификации источника мультимедиа для присоединения потока к элементу требовалось создать URL объекта для MediaStream. В этом больше нет необходимости, и браузеры удаляют поддержку для этого.

createObjectURL

[historydev]

szQocks, всё я прокидываю нужное, await navigator.mediaDevices.getUserMedia

[szQocks]

Владимир, mediaStream - здесь у тебя промис, результатом промиса и будет mediaStream, тебе надо вызвать .then и в коллбэке получить результат промиса и внутри колбэка делать свои манипуляции

Answer 1

[Taulan Khatuaev]

var stream;
async function turnOnCameraHandler() {
  var mediaStream = await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: false
  });

  stream = mediaStream;
  video.srcObject = stream;
  video.play(); // Добавляем автоматическое воспроизведение
}

turnOnCameraHandler();