react umi h5调用摄像头

在React Umi H5中调用摄像头，您可以使用HTML5中的`getUserMedia()` API。下面是一些步骤，可以帮助您实现这一点：

1. 在您的React组件中，创建一个ref，用于引用video元素：

import React, { useRef } from 'react';

function Camera() {
  const videoRef = useRef(null);

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

export default Camera;

2. 在组件的`componentDidMount()`生命周期方法中，使用`getUserMedia()`方法请求访问用户的摄像头。在请求的promise被resolve时，将摄像头视频流赋值给video元素：

import React, { useRef, useEffect } from 'react';

function Camera() {
  const videoRef = useRef(null);

  useEffect(() => {
    navigator.mediaDevices.getUserMedia({ video: true })
      .then((stream) => {
        if (videoRef.current) {
          videoRef.current.srcObject = stream;
        }
      })
      .catch((err) => {
        console.log('Error accessing camera:', err);
      });
  }, []);

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

export default Camera;

3. 在组件的`componentWillUnmount()`生命周期方法中，停止摄像头视频流：

import React, { useRef, useEffect } from 'react';

function Camera() {
  const videoRef = useRef(null);
  let stream = null;

  useEffect(() => {
    navigator.mediaDevices.getUserMedia({ video: true })
      .then((videoStream) => {
        if (videoRef.current) {
          videoRef.current.srcObject = videoStream;
          stream = videoStream;
        }
      })
      .catch((err) => {
        console.log('Error accessing camera:', err);
      });

    return () => {
      if (stream) {
        stream.getTracks().forEach((track) => {
          track.stop();
        });
      }
    };
  }, []);

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

export default Camera;

这些步骤可以让您在React Umi H5应用程序中调用摄像头。但是请注意，`getUserMedia()` API不是所有浏览器都支持的。在使用之前，请先检查特定浏览器的支持情况。