获取（承诺）DOMException：play（）请求被新的加载请求中断

Question

我想要做的是访问客户端的相机笔记本电脑并向客户端显示正在拍摄的视频，然后每当客户端准备就绪时，他可以点击按钮拍摄他的照片。

我遇到困难的部分是 - 在我的React组件中显示视频。我收到错误'Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.'

这是我写的代码

export default class UploadPhoto extends Component {
  constructor() {
    super();
    this.state = {
      url: '',
    };
    this.capturePhoto = this.capturePhoto.bind(this);
    this.playVideo = this.playVideo.bind(this);
  }

  playVideo() {
    // this.refs.vidRef.load();
    this.refs.vidRef.play();
  }

  capturePhoto() {
    const that = this;

        navigator.getUserMedia(
            // Options
          {
            video: true,
          },
            // Success Callback
            (stream) => {
                // Create an object URL for the video stream and
                // set it as src of our HTLM video element.
              const src = window.URL.createObjectURL(stream);

              that.setState({
                url: src,
              });

              this.playVideo();
                // Play the video element to show the stream to the user.
            },
            // Error Callback
            (err) => {
                // Most common errors are PermissionDenied and DevicesNotFound.
              console.error(err);
            }
        );
      }
      render() {
        return (
          <div>
            <h1>Upload Photo</h1>
            {this.capturePhoto()}
            <video
              ref="vidRef"
              src={this.state.url}
              type="video/mp4"
            />

          </div>
        );
      }
    }

请告诉我哪里出错了以及如何纠正。