Javascript Can'；t显示react图片应用程序的画布元素

我正在尝试创建一个简单的应用程序来使用reactJS拍照

似乎我能找到的所有例子都是老派的使用裁判和所有我们不再使用的有趣的东西，我正试图避免这些

但无论如何，目前它不起作用。根据我看过的教程，我需要将我的视频元素传递到画布中，但我不理解

无论如何，我当前的组件如下所示：

export default class Camera extends Component {
 constructor (props) {
    super(props)

    this.canvasRef = React.createRef()
    this.videoRef = React.createRef()
    this.state = {
      stream: {}
    }
  }

  async componentDidMount () {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 } })

      if (stream) {
        this.setState({
          stream
        })
      }
    } catch (err) {
      console.error(err)
    }
  }

  render () {
    const video = document.getElementById('video')
    const context = (this.canvasRef && this.canvasRef.getContext('2d'))
    context && context.drawImage(document.getElementById('video'), 0, 0, 640, 480)
    return (
      <>
        <video id='video' width='640' heigh='480' src={this.state.stream} autoPlay={true}/>
        <button onClick={(evt) => console.warn('take photo')}>Take photo!</button>
        <div>
          <canvas id='canvas' width='640' height='480' ref={ref => (this.canvasRef = ref)} />
        </div>
      </>
    )
  }
}

导出默认类摄影机扩展组件{
建造师（道具）{
超级（道具）
this.canvasRef=React.createRef（）
this.videoRef=React.createRef（）
此.state={
流：{}
}
}
异步组件didmount（）{
试一试{
const stream=wait navigator.mediaDevices.getUserMedia（{video:{宽度：640，高度：480}）
如果（流）{
这是我的国家({
流动
})
}
}捕捉（错误）{
控制台错误（err）
}
}
渲染（）{
const video=document.getElementById（'video'））
const context=（this.canvasRef&&this.canvasRef.getContext（'2d'））
context&&context.drawImage（document.getElementById（'video'），0,060480）
返回(
console.warn（'take photo'）}>拍照！
（this.canvasRef=ref）}/>
)
}
}

就目前而言，我得到的只是一个空白屏幕。问题似乎出在画布上，但我不知道我做错了什么。

---

我还应该提到，理想情况下，我甚至不想使用refs。我只想使用道具，也许是状态，但我想首先我必须让它按现在的样子工作。

据我所知，命令式动画仍然是REF的一个非常有效的用例：

在构造函数中，声明画布：

this.canvasRef = React.createRef();

然后像这样使用它

const canvas = this.canvasRef.current;
const ctx = canvas.getContext("2d");

在渲染函数中，将ref指定给画布元素：

<canvas ref={this.canvasRef} /> 

---

我个人发现将Canvas应用到react生命周期中非常棘手，但这肯定是可以做到的。祝你好运

谢谢你的帮助！不幸的是，它仍然不起作用。。。canvas.current当前为

null

。是否需要执行其他操作，以使渲染函数中的该点不为空？我还应该注意，通过这些更改，我现在在

组件willmount

上的try/catch块中获得了

DOMException

。如果我确实删除了try/catch块，我在控制台中得到的错误是

未捕获错误：您提供的错误不包含堆栈跟踪。

知道这是怎么回事吗？是的，对不起，我忘了提到您必须在渲染函数中设置ref<代码>。我将编辑应答，不确定到底是什么原因导致错误，而不进行更多的错误记录。试着用

控制台打印它。error（err）

看看这是否有帮助？

DOMException

是我在

控制台中得到的全部。error

。我已更新代码以反映您建议的更改。当我试图从

navigator.mediaDevices.getUserMedia