ReactJS: создание пользовательского компонента камеры

Question

Я пытаюсь написать собственный компонент камеры внутри моего компонента ReactJS, потому что я не могу найти библиотеку npm, которая действительно соответствует моим требованиям.Так что я нашел эту статью https://frontendnews.io/editions/2018-08-15-simple-camera-component, которая дает довольно хорошие детали.Но я думаю, что у меня проблемы с превращением этого чистого кода JavaScript в компонент React.Я не могу рендерить компонент Camera внутри моей страницы.Пожалуйста, посмотрите на мой код и посмотрите, что я сделал не так.

Вот мой компонент Camera:

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

Когда я нажимаю ссылку на статью, я замечаю, что они используют веб-компоненты,На самом деле вам не нужно вносить какие-либо изменения в код этого учебника.

Вы можете использовать веб-компоненты в React, см. Эту страницу в документации React:

React & WebКомпоненты