Замените "navigator.mediaDevices.getUserMedia" на "canvas.captureStream" - PullRequest
Новая
       90

Замените "navigator.mediaDevices.getUserMedia" на "canvas.captureStream"

0 голосов
/ 29 августа 2018

Я использую Red5pro html SDK для создания однорангового соединения между сервером и клиентом, видео и аудио чат работают как шарм с getUserMedia () . Проблема в том, что я хочу выполнять потоковую передачу с элемента DOM (Canvas), а не с камеры пользователя, используя captureStream () .

Red5Pro имеет метод с именем " OnGetUserMedia " со следующими инструкциями:

Метод onGetUserMedia - когда он определен в конфигурации, предоставляемой издателю на основе WebRTC - переопределяет внутренний вызов getUserMedia в HTML-SDK Red5 Pro.

Вы можете предоставить свою собственную логику того, как вызывается getUserMedia и достигается поток мультимедиа, задав для атрибута onGetUserMedia метод, соответствующий следующим рекомендациям:

Входные аргументы для onGetUserMedia не предоставляются. Ожидается, что объект Promise будет возвращен. Объект MediaStream должен быть указан в разрешении Обещания.

Когда я провел исследование и спросил команду поддержки Red5pro, они сказали

Внутри возвращенного обещания вы можете получить MediaStream из captureStream.

Ссылка: Документация Red5Pro

Я просто понятия не имею, что делать или что менять.

Вот пример onGetUserMedia Метод:

{ host: "localhost", protocol: 8083, port: 8081, streamName: "mystream", iceServers: [{urls: 'stun:stun2.l.google.com:19302'}], onGetUserMedia: function () { return navigator.mediaDevices.getUserMedia({ audio: true, video: { width: { max: 1920, ideal: 1280, min: 640 }, width: { max: 1080, ideal: 720, min: 360 } } }) } }

Любая помощь?

1 Ответ

0 голосов
/ 29 августа 2018

То, что вам было предложено сделать, это установить свойство onGetUserMedia для функции, которая возвращает Promise, сам по себе преобразуясь в MediaStream.

Вероятно, это связано с тем, что они построили свой API с правильным предположением, что большинство MediaStream, которые будет иметь их пользователь, имеют метод mediaDevices.getUserMedia , и этот метод возвращает такое обещание, которое разрешает MediaStream.

Чтобы соответствовать их коду, вы должны обернуть собственный MediaStream в такое Обещание.
Действительно, HTMLCanvasElement.captureStream является синхронным и возвращает MediaStream напрямую, без оболочки Promise.

Итак, для этого вам просто нужно создать функцию, которая обернет ваш MediaStream в Promise, и это можно сделать с помощью Promise.resolve метода: 

{
  [...]
  iceServers: [{urls: 'stun:stun2.l.google.com:19302'}],
  onGetUserMedia: () => Promise.resolve(canvas.captureStream(frameRate))
}

Ps:
() => Синтаксис ES6 Функция стрелки , широко поддерживаемая браузерами, которые поддерживают HTMLCanvasElement.captureStream .

...