在react中点击按钮，如何提示摄像头权限？

import React, { useState } from 'react';

const CameraPermissionComponent = () => {
  const [cameraPermission, setCameraPermission] = useState(null);

  const handleButtonClick = async () => {
    try {
      await navigator.mediaDevices.getUserMedia({ video: true });
      setCameraPermission(true);
    } catch (error) {
      setCameraPermission(false);
    }
  };

  return (
    <div>
      <button onClick={handleButtonClick}>请求摄像头权限</button>
      {cameraPermission === true && <p>摄像头权限已授予</p>}
      {cameraPermission === false && <p>摄像头权限未授予</p>}
    </div>
  );
};

export default CameraPermissionComponent;