React项目接入use-screen-recorder录屏组件无法运行求助

你写的代码核心逻辑没有问题，无法正常运行是几个细节配置缺失导致的，具体问题和修复方法如下：

• 浏览器录屏API仅支持localhost本地环境、HTTPS协议环境，部署在HTTP公网环境下会直接调用失败
• 首次点击开始录制需要在浏览器弹窗中授予屏幕共享权限，拒绝权限会导致功能失效
• 建议使用Chrome 90+、Edge 90+版本测试，老旧浏览器不支持MediaRecorder原生API

import useScreenRecorder from "use-screen-recorder";

const ScreenRecorder = () => {
  const {
    blobUrl,
    pauseRecording,
    resetRecording,
    resumeRecording,
    startRecording,
    status,
    stopRecording,
  } = useScreenRecorder();

  return (
    <div>
      {/* 新增controls属性显示播放控件 */}
      <video src={blobUrl} controls style={{ width: 600, marginTop: 20 }} />

      <small>Status: {status}</small>
      <div style={{ gap: 10, display: 'flex', margin: '10px 0' }}>
        <button onClick={startRecording}>开始录制</button>
        <button onClick={stopRecording}>停止录制</button>
        <button onClick={pauseRecording}>暂停录制</button>
        <button onClick={resumeRecording}>恢复录制</button>
        <button onClick={resetRecording}>重置录制</button>
      </div>
    </div>
  );
};
export default ScreenRecorder;

• 执行命令安装依赖：npm install use-screen-recorder
• 新建组件文件（如ScreenRecorder.js），粘贴上面修正后的代码
• 在App.js中引入组件：import ScreenRecorder from './ScreenRecorder'
• 在App组件的返回模板中调用组件：<ScreenRecorder />
• 启动本地开发服务，用localhost地址访问项目，点击开始录制后选择要共享的屏幕区域即可正常使用

内容的提问来源于stack exchange，提问作者MWerneke