使用 OBS 和 CodePen 为视频通话制作虚拟片尾

前几天，我看到 Scott Hanselman 发了一条推文，谈论在会议结束时添加积分：

我喜欢这个想法并决定自己做一个！

代码

首先，我打开 CodePen，整理出一个用于滚动的文本数组。我使用了我在 Netlify 博客上发表过的博客文章列表。

let posts = [
  "An Incredibly Serious Discussion about Next.js at Reactathon",
  "Enabling AMP in your Next.js projects",
  "Adding Babel presets and plugins in Next.js",
  "React Children: The misunderstood prop",
  "Query an API at both build time and runtime with Next.js",
  "How to turn off telemetry in Next.js",
  "Add Web Monetization to your sites with Snippet Injection",
  "Logging in Next.js",
  ...
]

从那里，我制作了一个小功能，将其中的每一个添加到一个中，然后将其添加到我页面上的<div>现有中。container

(() => {
  posts.map((p) => {
    document.querySelector('.container').innerHTML += `<div>${p}</div>`
  })
})()

我在CSS中创建了背景limegreen，并添加了一些滚动动画。我还添加了自定义字体和其他内容，这部分你可以随心所欲地进行操作。

这是供您试用的最后一支笔：

如果您想定制它，请随意分叉它！

光子发射系统

OBS（开放广播软件）是一个跨操作系统的免费程序，我们可以使用它来制作“虚拟摄像机”。

下载 OBS，然后创建一个新的场景。应用程序右下角有一个“场景”面板：

点击+左下角的标志，然后随意命名。如你所见，我将它命名为“场景”，因为我不太聪明。

在“场景”旁边的面板中，有一个“源”面板。我们将+再次点击该符号，将两个源添加到场景中。

首先，添加视频捕获设备，然后选择您的网络摄像头。

然后，添加浏览器，并输入你的 CodePen 的 URL。我个人使用的是实时视图，但你也可以使用全页面视图。

你的浏览器可能仍然保留着绿色背景。我们来把它去掉吧！在“来源”面板中，右键点击你的浏览器，然后点击“过滤器”。

在“效果滤镜”下，点击+并添加一个“颜色键”滤镜。将“键控颜色类型”设为“绿色”，并调整色阶，直到预览中所有绿色在“笔”上都透明为止，如下所示：

当您满意时，请关闭此窗口，现在是时候进行最后的调整了。

在 OBS 的主预览窗口中，您可以拖动摄像头和文本，直到满意为止。例如，我将浏览器设置得比预览窗口本身略宽，这样滚动条就不会出现在框架中。

大功告成！点击右下角的“启动虚拟摄像头”，即可在其他应用程序中使用它：

使用它！

现在，无论您是在 Zoom、Google Meet、会议、直播还是其他任何地方，您都可以选择您制作的虚拟摄像头，而不是普通的网络摄像头！

除了制作片尾字幕，你还能做更多。你可以添加图表、有趣的弹窗、动画等等。快来创作吧！