Как получить канал веб-камеры с реактивными крючками?

Question

Я пытаюсь заставить веб-камеру отображаться в моем приложении, используя реакционные хуки.Мне также нужно иметь возможность получить последнее изображение из канала

Я считаю, что у меня есть основания, но что-то упущено.

import React,{useState,useEffect} from "react"


export function VideoFeed(){
const[constraints] = useState({width:300,height:300})

useEffect(()=>{
    navigator.mediaDevices.getUserMedia({video:true})
    .then(stream=>{
        let video = document.querySelector('video')
        video.source = stream;
        video.play();
    })
    .catch(e=>{
        console.log(e)
    })
})

return(
    <video autoPlay ={true} id ="video"></video>
)
}

Answer 1

См. Как получить доступ к элементу DOM в React? вместо document.querySelector.

При применении с useRef перехватом и установлением частоты выполнения useEffect, если будет выглядеть примерно так:

export function VideoFeed() {
  const videoEl = useRef(null)

  useEffect(() => {
    if (!videoEl) {
      return
    }
    navigator.mediaDevices.getUserMedia({video:true})
      .then(stream => {
        let video = videoEl.current
        video.srcObject = stream
        video.play()
      })
  }, [videoEl])

  return <video ref={videoEl} />
}

Answer 2

Найдена проблема.

Изменение

 video.source = stream;

Кому:

 video.srcObject = stream;

Viola