如何使用反应钩子获取网络摄像头提要

Question

我正在尝试使用 react 钩子在我的应用程序上显示网络摄像头提要。我还需要能够从提要中捕获最新图像

我相信我有基础，但缺少一些东西。

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

请参阅如何在 React 中访问 DOM 元素？ 而不是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;

中提琴