问题描述
startVideo 功能与笔记本电脑的网络摄像头一起正常工作,但不能与手机摄像头一起使用,然后我参考了 expo 文档,然后使用了 expo-camera,它可以在网络摄像头和手机摄像头中实现。通过使用相机,它不会检测任何结果,如年龄、性别、地标、表情
function App() {
const videoHeight = 480;
const videoWidth = 640;
const [initializing,setIntializing] = useState(false);
const videoRef = useRef().current;
const canvasRef = useRef();
useEffect(()=>{
const loadModels = async() => {
const MODEL_URL = process.env.PUBLIC_URL + './models';
setIntializing(true);
Promise.all([
faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL),faceapi.nets.faceExpressionNet.loadFromUri(MODEL_URL),faceapi.nets.ageGenderNet.loadFromUri(MODEL_URL)
]).then(startVideo);
}
loadModels();
},[canvasRef])
const startVideo =()=>{
navigator.getUserMedia({
video : {}
},stream => videoRef.current.srcObject = stream,function(err) {
console.log("The following error occurred: " + err.name);
})
}
const handleVideoOnPlay =() =>{
setInterval(async () =>{
if(initializing){
setIntializing(false);
}
canvasRef.current.innerHTML = faceapi.createCanvasFromMedia(videoRef.current);
const displaySize ={
width : videoWidth,height : videoHeight
}
faceapi.matchDimensions(canvasRef.current,displaySize);
const detections = await faceapi.detectAllFaces(videoRef.current,new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions().withAgeAndGender();
const resizedDetections = faceapi.resizeResults(detections,displaySize);
canvasRef.current.getContext('2d').clearRect(0,videoWidth,videoHeight);
faceapi.draw.drawDetections(canvasRef.current,resizedDetections);
faceapi.draw.drawFaceLandmarks(canvasRef.current,resizedDetections);
faceapi.draw.drawFaceExpressions(canvasRef.current,resizedDetections);
console.log(detections)
},1000)
}
return (
<div className = "App">
<span>{initializing ? 'initializing' : 'Ready'}</span>
<Camera>
<div className= "display-flex justify-content-center">
<video ref ={videoRef} autoPlay muted height ={videoHeight} width={videoWidth} onPlay={handleVideoOnPlay}/>
<canvas ref={canvasRef} className="position-absolute"/>
</div>
</Camera>
</div>
);
}
export default App;
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)