Javascript React网络摄像头-截图问题

我正在尝试使用react网络摄像头模块。我能够在页面上镜像网络摄像头视频。但是，当按下按钮时，我在实现getScreenshot函数时遇到问题。有人有什么建议吗？下面是我的代码。多谢各位

import React, { Component } from 'react';
import { emotionCapture } from '../actions';
import Webcam from 'react-webcam';

export default class FaceEmotion extends Component{

    constructor(props){
        super(props);
        this.state = { screenshot: null }
        this.screenshot = this.screenshot.bind(this);
    }
    // this is the area I'm having issues with. Thanks!
    screenshot() {
        console.log(Webcam);
        var screenshot = Webcam.getScreenshot();
        this.setState({screenshot: screenshot});
      }

    render(){

        return (
            <div>   
             <Webcam audio ={false}/>
             <button onClick={this.screenshot}>Capture</button>
             { this.state.screenshot ? <img src={this.state.screenshot} /> : null }
            </div>
            )
    }
}

import React，{Component}来自'React'；
从“../actions”导入{emotionCapture}；
从“react网络摄像头”导入网络摄像头；
导出默认类组件{
建造师（道具）{
超级（道具）；
this.state={screenshot:null}
this.screenshot=this.screenshot.bind（this）；
}
//这是我遇到问题的地方。谢谢！
截图（）{
控制台日志（网络摄像头）；
var screenshot=Webcam.getScreenshot（）；
this.setState（{screenshot:screenshot}）；
}
render（）{
返回(
俘获
{this.state.screenshot？：null}
)
}
}

尝试添加对网络摄像头组件的引用。这样你就可以得到屏幕上的网络摄像头

import React, { Component } from 'react';
import { emotionCapture } from '../actions';
import Webcam from 'react-webcam';

export default class FaceEmotion extends Component{

    constructor(props){
        super(props);
        this.state = { screenshot: null }
        // this can be moved directly to the onClick event
        // this.screenshot = this.screenshot.bind(this);
    }
    // this is the area I'm having issues with. Thanks!
    screenshot() {
        // access the webcam trough this.refs
        var screenshot = this.refs.webcam.getScreenshot();
        this.setState({screenshot: screenshot});
      }

    render(){

        return (
            <div>   
             <Webcam audio ={false} ref='webcam'/> // add the reference
             <button onClick={this.screenshot.bind(this)}>Capture</button>
             { this.state.screenshot ? <img src={this.state.screenshot} /> : null }
            </div>
            )
    }
}

import React，{Component}来自'React'；
从“../actions”导入{emotionCapture}；
从“react网络摄像头”导入网络摄像头；
导出默认类组件{
建造师（道具）{
超级（道具）；
this.state={screenshot:null}
//这可以直接移动到onClick事件
//this.screenshot=this.screenshot.bind（this）；
}
//这是我遇到问题的地方。谢谢！
截图（）{
//通过this.refs访问网络摄像头
var screenshot=this.refs.webcam.getScreenshot（）；
this.setState（{screenshot:screenshot}）；
}
render（）{
返回(
//添加引用
俘获
{this.state.screenshot？：null}
)
}
}

在组件中添加以下代码

setRef = (webcam) => {
    this.webcam = webcam;
  };

然后将其用作渲染类中的引用

<Webcam
    audio={false}
    ref={this.setRef}
/>

---

这将为您提供base64编码图像字符串

什么问题？错误？发生了什么？我就是不能用那个函数。我尝试通过不同的方式访问它，但它要么是一个未定义的函数，要么无法访问该属性。我是javascript的新手，所以我不理解正确的方法。

this.webcam.getScreenshot();