如何使用反应挂钩获取网络摄像头提要？答案

【问题标题】：How to get webcam feed with react hooks?如何使用反应挂钩获取网络摄像头提要？
【发布时间】：2019-04-12 16:18:43
【问题描述】：

我正在尝试使用 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>
)
}

【问题讨论】：

标签： javascript reactjs webcam react-hooks

【解决方案1】：

请参阅 How to access a DOM element in 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} />
}

【讨论】：

其在“video.srcObject = stream”行的抛出错误“Object is possible is 'null'. TS2531”。它在“视频”中显示的警告 (^)
这是 javascript 代码，不是打字稿。 videoEl.current 不会在 useEffect 中为无条件引用为空......依赖检查只是为了让 eslint 开心，所以如果 TS 在它也开心之前需要更有说服力，你应该知道该怎么做（如果你不，您可能不应该使用 TS .. 但使用 if !video.current inside .then)

【解决方案2】：

发现问题。

改变

 video.source = stream;

收件人：

 video.srcObject = stream;

中提琴

【讨论】：

不不不，document.querySelector('video') => useRef