react 调用摄像头

要在 React 中调用摄像头，你可以使用 `getUserMedia` API。首先，确保你的项目中已经安装了 `react-dom` 和 `react-scripts`。然后，你可以按照以下步骤进行操作：

1. 在你的组件中导入 React：

import React from 'react';

2. 创建一个新的组件：

class Camera extends React.Component {
  constructor(props) {
    super(props);
    this.videoRef = React.createRef();
  }

  componentDidMount() {
    this.startCamera();
  }

  startCamera() {
    navigator.mediaDevices.getUserMedia({ video: true })
      .then((stream) => {
        this.videoRef.current.srcObject = stream;
        this.videoRef.current.play();
      })
      .catch((error) => {
        console.error('Error accessing camera:', error);
      });
  }

  render() {
    return (
      <div>
        <video ref={this.videoRef} />
      </div>
    );
  }
}

export default Camera;

3. 然后，在你的应用程序中使用这个组件：

import React from 'react';
import Camera from './Camera';

function App() {
  return (
    <div>
      <h1>Camera Example</h1>
      <Camera />
    </div>
  );
}

export default App;

通过上述步骤，你就可以在 React 中调用摄像头并在页面上显示视频流了。请注意，这个示例可能在不同浏览器上的兼容性方面存在差异。在某些浏览器中，你可能需要使用特定的前缀或其他设置。