NodeCG 开源项目教程

NodeCG 开源项目教程

nodecg Create broadcast graphics using Node.js and a browser 项目地址: https://gitcode.com/gh_mirrors/no/nodecg

1. 项目介绍

NodeCG 是一个用于创建广播图形（也称为“字符生成”或“CG”）的框架和应用程序。它允许你使用 Node.js 和浏览器来编写复杂且动态的广播图形。NodeCG 本身不提供任何图形或绘图原语，而是提供了一个结构和 API，用于在仪表板、服务器和图形之间移动数据。NodeCG 的图形可以在任何能够渲染 HTML 的环境中运行，包括 OBS Studio、vMix、XSplit 和 CasparCG（v2.2.0+）等流媒体软件。

NodeCG 的目标是使广播图形更加易于访问，同时保持与 Web 平台的紧密结合，支持从小型到大型广播的各种规模和雄心。

2. 项目快速启动

安装 NodeCG

首先，确保你已经安装了 Node.js 和 npm。然后，你可以通过以下命令安装 NodeCG：

npm install -g nodecg-cli

创建一个新的 NodeCG 实例

使用 nodecg-cli 创建一个新的 NodeCG 实例：

nodecg setup

按照提示完成设置过程。

启动 NodeCG

进入你刚刚创建的 NodeCG 实例目录，并启动 NodeCG：

cd my-nodecg-instance
nodecg start

现在，你可以在浏览器中访问 http://localhost:9090 来查看 NodeCG 的仪表板。

创建一个简单的图形

在 bundles 目录下创建一个新的图形包：

nodecg new-bundle my-first-graphic

进入新创建的图形包目录，并编辑 graphics/index.html 文件，添加一些简单的 HTML 和 JavaScript 代码来创建你的第一个图形。

运行图形

启动 NodeCG 后，你可以在仪表板中选择并运行你刚刚创建的图形。

3. 应用案例和最佳实践

应用案例

NodeCG 已经被用于各种规模的广播项目中，从小型的慈善活动到大型电竞赛事。例如，Tip of the Hats 是一个全志愿者慈善募捐活动，使用 NodeCG 来创建实时广播图形。

最佳实践

• 模块化开发：将图形和逻辑分离，使用模块化的方式组织代码，便于维护和扩展。
• 使用 TypeScript：虽然 NodeCG 支持纯 JavaScript，但使用 TypeScript 可以提高代码的可维护性和可读性。
• 测试驱动开发：在开发过程中编写单元测试，确保代码的稳定性和可靠性。

4. 典型生态项目

NodeCG 的生态系统中有许多相关的项目和工具，可以帮助你更好地开发和部署广播图形：

• nodecg-cli：NodeCG 的命令行工具，用于创建和管理 NodeCG 实例和图形包。
• nodecg-types：TypeScript 类型定义，帮助你在 TypeScript 项目中更好地使用 NodeCG API。
• nodecg-obs：一个 NodeCG 扩展，用于与 OBS Studio 集成，实现自动化的场景切换和源管理。

通过这些工具和项目，你可以更高效地开发和部署 NodeCG 图形，满足各种广播需求。

nodecg Create broadcast graphics using Node.js and a browser 项目地址: https://gitcode.com/gh_mirrors/no/nodecg