2

我正在从 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

我曾尝试在handlestream() 中使用ImageCapture，所以之后我可以grabFrame 但无法实现

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

但是当我初始化 Imagecapture 的新对象时它不起作用。

4

0 回答 0