我正在尝试使用 React hooks 将网络摄像头源显示在我的应用程序上。我还需要能够从提要中捕获最新的图像
我相信我有基础,但缺少一些东西。
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>
)
}
See 如何在 React 中访问 DOM 元素? https://stackoverflow.com/a/38093981/1176601代替document.querySelector
.
当应用时useRef https://reactjs.org/docs/hooks-reference.html#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} />
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)