MediaStream не подключается к MediaElement - PullRequest
Новая
       35

MediaStream не подключается к MediaElement

0 голосов
/ 26 марта 2020

Код React для создания элемента выглядит следующим образом: 

export const VideoPage: React.FC<{}> = () => {
  const localVideoRef = useCallback((localVideo: HTMLMediaElement | null) => {
    if (localVideo) {
      startVideo(localVideo);
    }
  }, []);
  return (
    <>
      <video ref={localVideoRef} playsInline></video>
    </>
  );
};

Функция startVideo() просто: 

export async function startVideo(localVideo: HTMLMediaElement) {
  const mediaStream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: true,
  });
  console.log("localVideo", localVideo);
  console.log("mediaStream", mediaStream);
  localVideo.srcObject = mediaStream;
}

Когда я загружаю страницу, зеленый свет над камера зажигает; красная точка «видео» появляется на вкладке в браузере; элемент video занимает квадрат в центре страницы браузера. На консоли регистрируется следующее: 

localVideo <video playsinline>​</video>​
mediaStream MediaStream {id: "jTQifTT0vSfcBw7v6E6E9M81mpv7qVhRrTe2", active: true, onaddtrack: null, onremovetrack: null, onactive: null, …}

Все именно так, как я ожидал. На самом деле, единственное, чего я не ожидал, это то, что видеопоток не появляется на экране.

Я не знаю, как это отладить. Все выглядит нормально, но просто не работает. Есть предложения?

1 Ответ

0 голосов
/ 26 марта 2020

Это не было преднамеренным "ха-ха, это тонкий вопрос, я должен опубликовать вопрос в StackOverflow, а затем сам ответить на него, чтобы показать себя". Я опубликовал вопрос в подлинном недоумении, и буквально через 30 секунд мне пришёл ответ.

Я изначально работал с сырой демоверсией JavaScript, которая работала, и имела строчку: 

<video id="localVideo" autoplay playsinline></video>

Когда я переводил на Typescript и React, VSCode не принимал autoplay. Он также не принял бы playsinline, пока я не исправлю дело до playsInline. Я бросил autoplay, что бы это ни было, и забыл об этом.

В любом случае, правильная строка в React / Typescript, конечно, выглядит так: 

<video ref={localVideoRef} playsInline autoPlay></video>

(Единственная проблема сейчас заключается в том, что при включении камеры MediaElement показывает видео дурака .. .)

...