javascript - 如何从网络摄像头Reactjs获取每个帧(How to get each frame from the webcam Reactjs)

Question

I am running web cam from navigator.media devices and its working fine, but I want to get each single frame from a video how can I achieve that?

(我正在从navigator.media设备运行网络摄像头，并且运行正常，但是我想从视频中获取每个帧，我该如何实现？)

class Recognize extends Component {
    constructor(props) {
        super(props);
        this.videoTag = React.createRef();
        this.myStream = null;
        this.state = {
            baseimage:null,
            iterator:0,
            flag:false,
            stop:false,
            screenshot:null
        };
    }

    componentDidMount() {
        navigator.mediaDevices
            .getUserMedia({ video: true })
            .then(this.handleStream)
            .catch(err => console.log(err));
    }

    componentWillUnmount() {
        this.myStream.getTracks()
            .forEach((track) => track.stop());
    }

    handleStream = async stream => {
        // start receiving stream from webcam
        this.myStream=stream;
        this.videoTag.current.srcObject = stream;

        // let img=stream.getScreenshot();
        // console.log(typeof (img));
        console.log("The video is ready");
    };






    render() {


        return (
            <Grid fluid>

                <video
                    id="myvideo"
                    ref={this.videoTag}
                    width={0}
                    height={0}
                    autoPlay
                    title="video"
                />

                <br></br>



            </Grid>
        );
    }
}


export default Recognize

I have tried to use ImageCapture in handlestream(),so I can grabFrame afterwards but unable to achieve

(我试图在handlestream（）中使用ImageCapture，所以以后可以抓取Frame但无法实现)

let mediaStreamTrack = stream.getVideoTracks()[0];
        imageCapture =new ImageCamera(mediaStreamTrack)  // its constructor is not working

but when I initialize the new object of Imagecapture it won't work.

(但是当我初始化Imagecapture的新对象时，它将无法工作。)

  ask by Nabeel Ayub translate from so

Answer 1

等待大神答复