如何在React组件中引入CCapture.js脚本并在构造函数中使用？

嘿，我懂你现在的困境——你已经通过手动创建script标签把CCapture.js加到了页面里，但在组件构造函数里直接调用它的API肯定会出问题，核心原因是脚本是异步加载的，构造函数执行的时候，CCapture还没被浏览器解析完成，自然访问不到。下面给你几个靠谱的解决方案：

方案一：监听脚本加载完成事件再初始化 #

你需要给动态创建的script标签添加onload回调，确保脚本加载完成后再实例化CCapture。如果是类组件，可以这样写：

class CaptureComponent extends React.Component {
  constructor(props) {
    super(props);
    // 用来存储CCapture实例
    this.captureInstance = null;
    // 加载脚本
    this.loadCCapture();
  }

  loadCCapture = () => {
    const ccScript = document.createElement('script');
    ccScript.type = 'text/javascript';
    ccScript.src = "CCapture.min.js";

    // 脚本加载成功后的回调
    ccScript.onload = () => {
      // 现在可以安全访问CCapture了
      this.captureInstance = new CCapture({
        format: 'webm', // 根据需求选格式
        framerate: 30,
        // 其他配置项参考官方文档
      });
      // 这里可以做初始化后的操作，比如提前配置参数
    };

    // 脚本加载失败的处理
    ccScript.onerror = () => {
      console.error('哎呀，CCapture.js加载失败了！');
    };

    document.head.appendChild(ccScript);
  }

  // 示例：触发捕获的方法
  startCapture = () => {
    if (this.captureInstance) {
      this.captureInstance.start();
      console.log('开始捕获啦');
    } else {
      console.warn('CCapture还没加载好哦，稍等一下~');
    }
  }

  render() {
    return (
      <div>
        <button onClick={this.startCapture}>启动捕获</button>
      </div>
    );
  }
}

方案二：使用npm包（更推荐） #

如果你的React项目用了webpack、Vite这类打包工具，直接安装CCapture的npm包会更符合React的开发流程，完全不用手动操作DOM脚本：

首先安装依赖：

npm install ccapture.js --save

然后在组件里直接导入使用，不管是类组件还是函数式组件都很方便：

// 类组件示例
import CCapture from 'ccapture.js';

class CaptureComponent extends React.Component {
  constructor(props) {
    super(props);
    // 直接在构造函数里初始化
    this.captureInstance = new CCapture({
      format: 'webm',
      framerate: 30
    });
  }

  // ...后续使用方法和上面一致
}

方案三：函数式组件的写法（用useEffect） #

如果你用的是函数式组件，可以借助useEffect来处理脚本的加载逻辑：

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

function CaptureComponent() {
  const [captureInstance, setCaptureInstance] = useState(null);

  useEffect(() => {
    // 先检查是否已经加载过CCapture，避免重复加载
    if (window.CCapture) {
      setCaptureInstance(new window.CCapture({ format: 'webm' }));
      return;
    }

    const ccScript = document.createElement('script');
    ccScript.src = 'CCapture.min.js';
    
    ccScript.onload = () => {
      setCaptureInstance(new window.CCapture({ format: 'webm' }));
    };

    ccScript.onerror = () => console.error('CCapture加载失败');
    
    document.head.appendChild(ccScript);

    // 组件卸载时的清理操作（可选）
    return () => {
      document.head.removeChild(ccScript);
      // 如果实例存在，记得停止捕获并销毁
      if (captureInstance) {
        captureInstance.stop();
      }
    };
  }, []);

  const startCapture = () => {
    captureInstance?.start();
  };

  return <button onClick={startCapture}>启动捕获</button>;
}

关键提醒 #

• 不管用哪种方式，都要确保CCapture实例初始化完成后再调用它的API（比如start()、stop()），否则会出现CCapture is not defined的错误。
• 如果用动态加载脚本的方式，注意不要重复创建script标签（可以加个全局变量判断是否已经加载过）。

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