（感觉就算配好了这开播关播过程步骤都很无敌多……）
其实事情的开始是路过了这么一个东西：mistivia/ezlive: Self-hosted Serverless Livestream Using S3，是个…不用服务器的直播方案，连个S3存储桶（←还是不知道怎么来理解这个东西，所有人提到这个都不拿网盘概念在一块说全都在甩更专业词汇看不懂啊……总之是能存文件的东西）拿来存直播片段文件，开下软件推个流就行。因为看有windows的一键运行exe就想头铁试一下玩玩（←其实完全没碰过直播也不懂技术相关）。
……然后一番乱试后发觉这玩意延迟巨高能有半分钟(。_。)…也不知道怎么调整才会好些（或许是用到的HLS这个技术本身的问题吗…）。好吧只能黯然离去。
不过因为项目这留了一个半屏是要用的的HLS播放器半屏是用来当聊天室的hack.chat嵌入部件（墙了，特点是不留聊天历史记录）的现成网页模板，就想起了之前看见过的一些网站布局生成器好像顺便就可以拿来弄个类似的样式出来。于是顺便就想看看有没有什么其他的小型直播服务能用，最后整一个拼好播…
之前逛了很多在 Neocities 下或 Nekoweb 等其他地方部署着的个人手工码的复古式个人网站，这边有很多人会悉心分享各种各样的IndieWeb/独立网站方向的编码教程和工具素材，网站样式生成器就是其中一种。
因为Neocities/Nekoweb这类地方只是提供托管纯html文件的服务，不会以平台方的形式去提供现存主题列表或工具列表之类的东西，所以现成的别人自制的帮助分享资源都分散在各种人的个人网站的资源整理列表和相关讨论社区里（如果看别人站点有个专门的资源收集页面的话有时间就可以多去偷一偷看一看）。这里用到的是比较知名的petrapixel’s layout generator。通过调整这里的模板完全可以获得一个基础的类似直播间的多栏式网站布局。
如果真的要来鼓捣网页的话，可能需要的前提：
-
会用git建立本地库 & 关联本地和远程仓库 & 提交本地库代码到远程库 & 用托管服务部署网页（netlify、cloudflare等）
-
对小部分html网页结构（head、Body、footer）和常用富文本或其他标签 & 小部分css属性有点印象……
↑ 也是网友自身代码理解水平的极限，其余的只能靠基础文档和LLM扶着了……
基础网页框架
结构
在生成器里添加 Right sidebar ，然后把 Footer 去掉，调整成喜欢的样式后下载模板。
然后在 index.html 文件的代码里把 <header> 标签的部分完全去掉。
然后剩下的内容就大部分都是示例文本了，<body> 的部分完全可以删到只剩下包在 <div class="layout"> 里面的 <main id="content"> 和 <aside class="right-sidebar">。
（不要把 <script> 给删了这是在浏览器控制台（f12可见）生成模板作者署名的脚本…）
<div class="layout">
<main id="content">
...
</main>
<aside class="right-sidebar">
...
</aside>
</div>
...
content 里面就是拿来放直播的播放器与其他所有自定义文字或图片或其他内容的地方，而 right-sidebar 就会拿来放聊天用的部件。
直播部件
直播的部件用的是 vdo.ninja 的嵌入iframe。（原来的名字似乎是OBS Ninja…）
它有一个内容非常多的使用文档…总之主要的目的就是多人设备画面共享与语音/文字聊天。可以/需要调整的东西挺多的。据说网好设备配置好的话是可以带得动30+人的。
↑ 或许如果只是想要私密个人直播只用这个东西来弄或许其实就可以了，但是其余更有展示性的花里胡哨内容我做都做完了所以（略）
创建群聊房间 这个方式大多用于多人群聚，有可视化的手动调整输出画质的选项，不过用旁边两个方式也可以通过调整链接参数来更改输出画质。旁边的方式就是即用即开，每次开的推流的链接都是随机字符串，也可以随便改成自己喜欢的文本重复用。
这里的推流链接或房间名称是只要某个时刻没有人就随时都可以被重复使用的，就算表面上可以给房间设密码，或者开单推流的时候可以设置 &audience 这样的二次防备参数，这嵌入链接只要最后会被放到网页里，f12一下就能看见源代码里的所有东西，所以设置了也没用……所以为了安全性，之后配置网页的时候这个播放器的嵌入代码不播的时候最好还是不要一直留在网页上。
先给一个创建房间模式的流程（但关于多人连接本身的内容就先略过，也还没研究）。
创建的时候把 嘉宾仅看到导演视频 和 导演作为参与者 勾上 ↓。
于是接下来就会到这个页面（被马赛克掉的地方都是房间名，没码的都是各种调整参数…）。
用左上角的软盘emoji可以保存房间配置（但是只会重定向去上一次使用的链接，好像不会保存底下设置配好的内容 :/ ），窗户emoji可以切换控制视图和自己&其他人的同屏分享视图。点击下方的 enable director's microphone or video 后就等于是打开了一个直播源。
左边就会多出一个画面（第一次开的时候可能直接开的就会是电脑摄像头，麦克风声音也会默认打开，需要小心一下^^;;;）。
右上角也会显示出这个直播源链接到的设备的数量与有在观看/收听直播的人的数量，以及传输速度。（只有后面三个数据真的能证明有多少人打开了视频在看，多人在房间里时好像会包括里面的人。最后那个scene好像就不包含房间里连接到的其他人，只有从左下那个单人观看链接来看的观众数量。。不用房间模式开推流就没有scene这个计数）
此时需要按下面的齿轮图标打开设置。上半部分是调整视频源和音频源。
（如果用中间的 添加摄像头 开启实时流的话底部的设置按钮就只有第1、3、4、5、8个，用 OBS远程屏幕共享 的话会多出喇叭符号的扬声器控制选项。并且在创建页就会让你选择视频源和音频源，按CTRL可以同时选择多个源）
视频源这边可以使用 OBS虚拟摄像头 功能来输出在OBS里自定义好的画面（在OBS主界面里可以在右下看见 启动虚拟摄像机 的设置），但是默认设置下声音不会附带过来。Vdo Ninja只能用 浏览器自带的分享屏幕功能 来分享声音，浏览器分享虽然能够提供 单个浏览器标签页 、单个窗口 、和 整个全屏 的分享，但是 分享 单个窗口 时是输出不了声音的……
于是最后如果要单窗口的声音目前就必须得安装使用文档提到的VB-Cable。软件装完重启好后，网页设置的音频源设置就可以选择CABLE Output (VB-Audio Virtual Cable)了（如果还需要说话可以按CTRL同时选上麦克风之类的）。
然后在windows自带搜索里输入 mix，打开 混音器选项 （在win11设置页里显示的是 系统 > 声音 > 音量合成器 ），把需要的窗口的 输出设备 这个设置都从默认改成 CABLE Input。
这样就可以在直播流中听到声音了，但是随之而来的问题就是本地设备同时也听不到那些窗口的声音了。所以这个方法基本还是拿来单独测试直播流用比较好。之后还是得用文档下面的用OBS的那个方法来设置声音。
打开OBS右下的设置：
在需要输出声音的窗口右键打开设置把 采集音频 这个项勾上
然后就可以看见 混音器 这边多出来了设置的窗口的单独音频数据，右键打开 高级音频设置
在相应窗口的 音频监听 栏把 关闭监听改成 监听并输出，这样直播和本地的音频就都可以正常播放了。
（↑ 截图里桌面的监听好像之前是默认就开着的，但还是建议只单独输出想要的窗口的音频并把桌面音频关了，因为音质差距有点大。。。）
…然后你可能就会发觉这个声音听着完全就是一坨莫名其妙的糊糊，是因为声音设置这里如图黄框默认自动打开的几个选项导致的，如果要正经放音乐之类的就得全部关掉。
（顺便现在接过来的声音要静音的话得靠关麦克风的那个选项…）
视频源的设置可以调整画面宽高和帧数
但是这俩选项的设置好像还是保存不下来，所以每次开推流的时候都得记得重新设置（呃）。。
在设置选项旁边的房间设置可以更改输出画质之类的
一般开房间时房主所在的导演室的链接是这个样子 ↓
https://vdo.ninja/?director=房间名&showdirector
只要开了推流后面就会多出 &push=自己开播时的推流ID 这个参数（创房间时勾选导演作为参与者那个选项是为了方便看见视频画面与这个id和分享链接，不选的话链接就藏在设置里）。在房间里的单人分享链接是这样的 ↓，只要开了推流就可以在左下角看见。比起单独分享多了solo和room的参数。
https://vdo.ninja/?view=推流号&solo&room=房间名
（现在不考虑屏幕分享了就只看看单开虚拟摄像头推流的部分。）
在单独的分享模式中的打开的页面的链接后缀参数只有 push，这种模式下只能分享出把push替换成 view 的只有视频播放器的观看链接给人看，无法多人使用。如果另外的人打开同一个push开头的链接就会显示这个链接已被使用。
然后就是嵌入的部分…到了iframe这里就可以使用 房间 模式下带有solo和room后缀的view链接和 单独 的view链接两种模式来嵌入。（文档里还有一大堆可折腾参数……）
从文档里默认复制过来的iframe的allow参数就也已经有了…这么多。也可以适当删掉些…src要填入的就是view链接了。完整例子就像：
<!-- （房间版） -->
<iframe allow="document-domain;encrypted-media;sync-xhr;usb;web-share;cross-origin-isolated;midi *;geolocation;camera *;microphone *;fullscreen;picture-in-picture;display-capture;accelerometer;autoplay;gyroscope;screen-wake-lock;"src="https://vdo.ninja/?view=房主分享摄像头时左下生成的随机参数（后面的信息也会一起附带→）&solo&room=房间名&proaudio=2&audiobitrate=510&videobitrate=30000"></iframe>
<!-- （单独版链接替换） -->
src="https://vdo.ninja/?view=随机参数或自己随便写的数值&proaudio=2&audiobitrate=510&videobitrate=30000"
&proaudio=2 、 &videobitrate=30000 和 &audiobitrate=510 这些数值是后加的。用于控制音质和画质。只要是view链接都可以用。建议把proaudio和audiobitrate的数值都全加上，如果什么都不加这个最后出来的声音音质真的会不太行… proaudio的文档表示了不同数值的不同行为，虽然写着1是最强模式但是个人不知道为什么会觉得开到2可能更好点（感觉1的效果带了些奇怪的混音显得声音很闷）。。。audiobitrate 的最大值就是510kbps，和前面的proaudio放一起能改善一些音质问题。
videobitrate 是调整视频画质的参数。文档里给了&videobitrate=6000或者20000的例子，最高能到60000kbps。试着用这个值这么放了一会这个4050显卡的笔记本挪鼠标已经会开始有点卡卡的了，请谨慎拉满…
（所以这直播工具到最后也只是一个凑合使的免费替代的性质，不知道还有没有比这还能更好的选择…）
（但是它都免费开源了也不需要服务器，就跟部署别的网页一样随便拉一下仓库就能自己部署自己的份恩）
一切配置好就可以把iframe塞到自己的网页的content区了。
（由于Vdo Ninja这整个配置过程感觉已经占内容有点多了于是怎么给播放器写css调合适大小甚至响应式适配之类的就略过了。因为我也完全不会写都是从之前的极其有限的记忆和模板里现学现抄和抄LLM的）
聊天部件
右边的实时聊天评论区用的是 cbox ，外面的个人网站逛多了看见它的频率大概就会高一些。明明有着实时聊天的卖点但是各种做个站的人都在拿这个玩意当更静态性质的页面留言板在使，倒是没什么人真拿来做聊天室（不过与实时聊天相关的部分增强功能也要付订阅费才能获得）
（怨念：其实有另一个自定义性更强能自己写css皮肤的完全免费实时聊天部件存在叫 Chattable ，也直接用iframe插入页面就可以了。有些人已经真的有在拿它专门做很个性化的多人在线聊天室网站了。但是它目前用的是谷歌的数据库所以被墙了，。，。，。不然我直接就能用它了…）
（上面的Vdo Ninja其实也有内部聊天部件，但是它好像无法自定义昵称…）
cbox的免费版能够保存100条消息，普通个人用应该完全足够。所有内容的存档下载功能是需要付钱才能使用。我个人的话基本都是一播完就会手动把内容清空的。（如果有想保存的内容就…截图或复制粘贴存起来吧）
在网站注册完创建完box后在上方 publish 页可以看见默认的嵌入链接。
<iframe src="https://www3.cbox.ws/box/?boxid=生成的boxid&boxtag=（嵌入页的叫Security tag的东西）" width="100%" height="150" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>
为了填满整个边栏要把width和height都改成100%。
cbox主页的 Look feel 下面两个页面可以调整显示样式和主题颜色（要充钱才能真的去写自定义CSS…）
Options 下面的 Emotions 可以用来添加自定义表情。免费版可以添加一套自选的30个表情。
（为什么会想来用这个部件的原因之一，当然如果能用到上面那个被墙了的部件那自定义性就更强了，那边目前还看不出表情的添加上限）。
……不过需要注意一下图的尺寸，这边的图不会自动缩小成一致的尺寸，不管多大图一发出来它就会是原图那么大（代码插img图片或许也会这样…）。如果图稍微大了那么一点点和文字内容摆在一起就会有点混乱。35x35px或以下尺寸就会合适一些。
另外cbox还可以使用Box Code（BBcode）在聊天区里加入富文本或插入图片。部分基础富文本约等于是html换了个外框（帮助里给的部分使用方式）
在 Users 可以为自己注册管理员用户或者占位保护一些名字让其不被注册。免费版还不能让别的游客自由注册名字成为用户，游客只能填写个人资料链接（当然这和名字一样完全可以乱填…可能还是防不了网友之间的troll行为，更路人一些的就也不好说。总之管理员号可以随意删除内容和封ip…）。发送过消息的名字会随着浏览器cookie每次打开都自动保留。如果有注册过这个box，匹配到相应名字后登录按钮就会自动亮起来 & 发送消息时会自动提示名字有主要求登录。
最后侧边栏还需要一定的CSS调整来把它固定在屏幕右侧来让它不被滑动。至少自己这个模板PC端最后给瞎配成了这样…
.right-sidebar {
overflow: hidden;
width: 400px;
position: fixed;
right: 0;
top: 15px;
padding: 0;
margin: 15px;
height: 96%;
}
移动端竖屏模式还得固定在屏幕底部，不过手机模式下应该还是只有横屏了才起码能正常看，还不知道咋处理这个尺寸适配这方面就先搁置了…
于是忍受了这么一大圈麻烦和修整网页样式的麻烦之后，恭喜你总算可以至少让人在pc端上看你的直播啦！……但还记得上面说的安全问题吗。播完的时候最好还是把Vdo Ninja的iframe代码整个去掉备份在其他地方，等要用的时候再加回来。原来的地方换成随便什么图片文字占位符之类的都行，再开的时候就用html的注释代码包起来注释掉。这个留在代码里应该还是没问题的（<!-- 我是注释 -->）聊天框这边在 My Cboxes 的管理页面有个 Lock Cbox 的选项，可以锁住评论区让人不能乱发东西。
于是，一切就是这样了……（最后弄出来的朴素界面也就这个样子，，）（明明最近萌上了鼠但是我为什么要用猫耳人当神秘例图）
截长图背景会出问题补一下左栏没截到的地方（只是想截出来源不明随机老鼠）
……所以最后折腾这么半天到底是为了些什么啊？
可能是：
-
懒得&不想在某些主流平台实名认证
-
如果真的要播不想因为平台太大公开性太强而被一些可能会突然突入的未知路人jump scare到（虽然感觉是过度担忧但用户的脑子真的无法处理太多随机性）
-
只是真的上头了想实验一下可行性，，
-
没有配置比较好的服务器用大概托管不了某些知名自托管直播平台（
owncast），或许也无精力学习配置&维护不动
附加：连接IPAD画面到OBS
这玩意弄完了可能也就只会偶尔拿来放音乐画图随便干点画面不会那么激烈的事情，不过由于主力画图软件目前还是procreate就又得涉及到一个跨设备投屏的问题……
大部分方法都得买好几百元的实体设备或买断/订阅费也要百来元的软件。Vdo Ninja虽然其实有Pad端软件可以推ipad的流，可以把流的链接再丢到OBS里放出来；但是不开麦克风声音的话软件就必然会被杀后台（好像是目前一直没法解决的问题）。。虽然可以靠OBS控制音频关掉声音直接放画面，但是这边的输出比起下面的方案好像会更卡顿一些…
所以最后采用的仍然完全免费的妙妙工具是名为 3uTools 的苹果设备管理软件……里面内置的3uAirplayer。（看copyright还是国内开发的…）
（搜到了油管管主Pogo的这分享视频才发现的好东西：How to Mirror Your iPad to PC in 2025 | High-Quality Recording & Streaming Tutorial! (OBS Tutorial)）
下载Windows版后打开会弹让你装iTunes驱动的弹窗，等几秒就可以关掉不管（如果不太常有连电脑需求的话）。然后在上面Toolbox找到 3uAirplayer 点击下载，立马就会自动装好。
（原软件其实现在就已经可以卸载掉了，卸完后这软件会弹推荐你把软件下回来的弹窗，不过也完全可以叉掉并不影响使用）
这边如果说要让装驱动就必须得装了。在软件里能使用IOS的屏幕镜像（无线）和usb有线连接电脑投屏的两种方法（建议有线）。连接上后就可以用OBS抓取pad的窗口了（如果没有显示出画面就换两下采集方式或看看窗口是不是被最小化了）。
要让画质达到最高得在设置里把Mirroring的几个选项都调到最高值：
Resolution → Follow the mirroring quality
Wireless Resolution → 2560
Wireless FPS → 60
打开的窗口也可以尽量拖大一点不要最大化（最大化了就会出现黑边甚至白边无法一键填充设置好的OBS尺寸）。
就是目前用起来画面可能一直会出现轻微的影像残留（开画笔栏的时候）。。。感觉还是vdo ninja的问题。就，先凑合着吧（擦汗）…