virtual背景のロジックのnpmパッケージを使ってデモを作成する話

create-react-app demo --typescript

npm install local-video-effector
npm install

$ ls public/pic1.jpg 
public/pic1.jpg

import * as React from 'react'
import { LocalVideoEffectors, ModelConfigMobileNetV1, ModelConfigResNet, getDeviceLists } from 'local-video-effector'

class App extends React.Component {

  localCanvasRef = React.createRef<HTMLCanvasElement>()
  localVideoEffectors : LocalVideoEffectors|null = null

  componentDidMount() {
    getDeviceLists().then((res)=>{console.log(res)})                           // <--------- (2-6')

    const model      = new URL(window.location.href).searchParams.get('model') // <---------  (1-1)
    const blurString = new URL(window.location.href).searchParams.get('blur')  // <---------  (1-2)
    const blur = blurString === null ? 0 : parseInt(blurString)
    if(model === 'MobileNetV1'){                                               // <---------  (2-1)
      this.localVideoEffectors = new LocalVideoEffectors(ModelConfigMobileNetV1)
    }else if (model === 'ResNet'){
      this.localVideoEffectors = new LocalVideoEffectors(ModelConfigResNet)
    }else{
      this.localVideoEffectors = new LocalVideoEffectors(null)
    }                                                                          
    this.localVideoEffectors.cameraEnabled              = true                 // <---------  (2-2)
    this.localVideoEffectors.virtualBackgroundEnabled   = true                 // <---------  (2-3)
    this.localVideoEffectors.virtualBackgroundImagePath = "/pic1.jpg"          // <---------  (2-4)
    this.localVideoEffectors.maskBlurAmount             = blur                 // <---------  (2-5)
    this.localVideoEffectors.selectInputVideoDevice("").then(() => {           // <---------  (2-6)
      requestAnimationFrame(() => this.drawVideoCanvas())                      // <---------  (3)
    })
  }

  drawVideoCanvas = () => {
    if (this.localCanvasRef.current !== null) {
      const width  = 640
      const height = 480
      this.localVideoEffectors!.doEffect(width,height)                         // <---------- (4)

      if (this.localVideoEffectors!.outputWidth !== 0 && this.localVideoEffectors!.outputHeight !== 0) {
        this.localCanvasRef.current.width  = width
        this.localCanvasRef.current.height = height
        const ctx = this.localCanvasRef.current.getContext("2d")!
        ctx.drawImage(this.localVideoEffectors!.outputCanvas, 0, 0,            // <---------- (5)
          this.localCanvasRef.current.width, this.localCanvasRef.current.height) 
      }
    }
    requestAnimationFrame(() => this.drawVideoCanvas())                        // <---------- (6)
  }

  render() {
    return (
      <div style={{ width: "640px", margin: "auto" }}>
        <canvas ref={this.localCanvasRef}  style={{ display: "block", width: "640px", margin: "auto" }} />
      </div>
    )
  }
}

export default App