为你的静态博客增加直播

阅前须知

请确保您的行为符合你所在地区的相关法律法规
本教程使用了由cloudflare公司提供的付费服务

订阅 `CloudFlare Stream` 服务

这一步很简单，来到我们赛博菩萨的Stream服务界面交钱就行了。

计费页面

选择适合你的套餐，然后付费就行了。用量不大的情况下，$5的套餐已经很够用了。

设置服务

首先来到 媒体 选项卡，然后选择 视频 -> 实时输入

进入后我们需要新建一个项目，然后会看到如下界面

请一定不要启用签名url，除非你能够在前端实现一个安全的签名方法，否则无法播放。

强烈建议启用如下选项卡来优化体验
1. HLS低延迟（由于cf 直播会全球分发内容，低延迟也有近20s）
2. 自动删除（你的直播内容会被自动录制并存放到你的视频存储里面，忘记删了可是会额外计费的）

开始推流

创建完成后，请单击 连接信息 选项卡，在这里你能看到你需要的链接凭据

你可以使用你喜爱的推流软件来进行直播，笔者喜欢使用 obs 简单，开源

具体配置方法因软件而异，不在此处阐述，相信看到的朋友也不需要这方面的教程。

为网页添加播放器

获取播放器代码

直播的前置工作已经完成，现在我们还需要在网页添加一个播放器来让用户也能看见直播。

依旧不要离开cloudflare的网站，赛博菩萨已经实现了一个基础的网页播放器。

来到 嵌入 标签页，你就能看到一段html代码。

当然，这个播放器也有一定的自定义功能，详见由cloudflare提供的文档

嵌入播放器

以hexo为例子

你需要新建一个页面或一个博文，然后直接将这段代码直接粘贴进去就可以了，你也可以写点内容来让你的直播页面更丰富。

以我的页面给各位一个参考

---
title: Sam正直播
comments: false
date: 2025-01-12 20:30:23
---

如果我在直播的话，这里会出现画面哦
可能会播放的内容
 - music
 - game
 - coding


<div style="position: relative; padding-top: 56.25%">
  <iframe
    src="***/iframe?autoplay=true&controls=true"
    style="border: none; position: absolute; top: 0; height: 100%; width: 100%"
    allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
    allowfullscreen="true"
  ></iframe>
</div>

结束了？

当你完成构建和推送后，恭喜你的博客现在拥有了一个高可用的直播服务。

但是你可以继续开发cloudflare stream的其他功能，比如它还能够同时帮助你像YouTube等平台进行直播。

祝各位玩的愉快！