ReactJS：構建自定義相機組件

Question

我試圖在我的ReactJS組件中編寫一個自定義相機組件，因為我似乎找不到真正符合我要求的npm庫。 所以我發現這篇文章https://frontendnews.io/editions/2018-08-15-simple-camera-component提供了一個很好的細節。 但我認為我在將這些純JavaScript代碼更改為React組件時遇到了麻煩。 我似乎無法在頁面內渲染“相機”組件。 請看一下我的代碼，看看我做錯了什么。

這是我的相機組件：

import {Component} from 'react'

class Camera extends Component {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' });
    this.videoElement = document.createElement('video');
    this.canvasElement = document.createElemnt('canvas');
    this.videoElement.setAttribute('playsinline', true);
    this.canvasElement.style.display = 'none';
    shadow.appendChild(this.videoElement);
    shadow.appendChild(this.canvasElement);
  }

  open(constraints) {
  return navigator.mediaDevices.getUserMedia(constraints)
    .then((mediaStream) => {
      // Assign the MediaStream!
      this.videoElement.srcObject = mediaStream;
      // Play the stream when loaded!
      this.videoElement.onloadedmetadata = (e) => {
        this.videoElement.play();
      };
    });
}
}

export default Camera

這是我渲染相機組件的cam.js：

import React, { Component } from 'react';
import Camera from '../elements/camera';
import ElemLayout from '../elements/layout';

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      isLoading: true
    }
  }

  componentDidMount(){
    this.setState({ isLoading: false })
  }

  async function() {
    const camera = document.querySelector('Camera');
    camera != null && await camera.open({ video: { facingMode: 'user' }})
  }

  render () {
    return (
      <ElemLayout routes={ this.props.routes } isLoading={this.state.isLoading} >
        <Camera />
      </ElemLayout>
    );
  }
}

export default App;

Answer 1

我首先注意到，您正在擴展React.Component，但是您缺少對render()的調用

使用Class組件時，需要調用render()生命周期方法。 這里是關於React Components的更多信息：

React.Component

當我單擊文章的鏈接時，我注意到它們正在使用Web組件。 實際上，您實際上不需要對該教程的代碼進行任何更改。

您可以在React中使用Web組件，請參閱React文檔中的此頁面：

React和Web組件