Функция, переданная в событие video.addEventListener ("play"), не определена

Question

В настоящее время я работаю над компонентом React, который требует, чтобы кадры из элемента видео передавались в элемент холста.

Пока видео работает, холст на нем ничего не рисует.Я полагаю, это потому, что метод, который я написал для рисования фреймов, не входит в сферу применения и был бы признателен за любые мысли об альтернативных подходах к этому, так как я застрял на том, что попробовать дальше.

import React, { Component, Fragment } from 'react'

class Stream extends Component {
  constructor(props) {
    super(props);
    this.video = React.createRef();
    this.canvas = React.createRef();
    this.screen = React.createRef();

    this.drawFrame = this.drawFrame.bind(this);
  }

  drawFrame(video) {
    const screen = this.screen.current
    screen.height = 500
    screen.width = 500
    let context = screen.getContext('2d')
    context.drawImage(video, 0, 0, screen.width, screen.height)
    context.drawImage(video, 0, 0, screen.width, screen.height)
    requestAnimationFrame(this.drawFrame)
    console.log("Screen", screen)
  }

  componentDidMount() {
    // This code runs a video stream.
    const video = this.video.current
    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(function(stream) {
        video.srcObject = stream
        video.play()
        // Says drawFrame is undefined if line below in uncommented.
        //video.addEventListener("play", this.drawFrame(video), false);
        console.log("Video is playing from component")
    })
    .catch(function(err) {
        console.log("An error occurred! " + err)
    })
  }

  componentDidUpdate() {}

  render() {
    return(
      <Fragment>
          <video
            ref={this.video}
            width="500"
            height="500"
          >Video stream is not available.</video>
          <canvas
            ref={this.screen}
            width="500"
            height="500"
          >Canvas is not available in this browser.</canvas>
          <canvas
            ref={this.canvas}
            width="500"
            height="500"
          >Canvas is not available in this browser.</canvas>
      </Fragment>
    )
  }
}

export default Stream

Answer 1

Вы потеряли контекст для ссылки this.просто используйте функцию стрелки для лексического контекста:

.then((stream) => ...

Если вы не можете использовать функцию стрелки, сделайте это по-старому, закройте this и сохраните ее вдругую переменную, затем используйте ее вместо:

componentDidMount() {
    const _this = this;
    // This code runs a video stream.
    const video = this.video.current
    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(function(stream) {
        video.srcObject = stream
        video.play()
        video.addEventListener("play", _this.drawFrame(video), false);
        console.log("Video is playing from component")
    })