（感觉就算配好了这开播关播过程步骤都很无敌多……）
感觉大部分都是VDO.Ninja的使用说明。。（*因为各种更新它现在的界面也许会跟此文章的稍有不同…）
2026.1.28: 原来的pad投屏方法大概是死了换了些替代
其实事情的开始是路过了这么一个东西：mistivia/ezlive: Self-hosted Serverless Livestream Using S3，是个…不用服务器的直播方案，连个S3存储桶（←还是不知道怎么来理解这个东西，所有人提到这个都不拿网盘概念在一块说全都在甩更专业词汇看不懂啊……总之是能存文件的东西）拿来存直播片段文件，开下软件推个流就行。因为看有windows的一键运行exe就想头铁试一下玩玩（←其实完全没碰过直播也不懂技术方面的事情，纯头铁）。
……然后一番乱试后发觉这玩意延迟巨高能有半分钟(。_。)…也不知道怎么调整才会好些。好吧只能黯然离去。
不过因为项目这留了一个半屏是要用的的HLS播放器半屏是用来当聊天室的hack.chat嵌入部件（墙了，特点是不留聊天历史记录）的现成网页模板，就想起了之前看见过的一些网站布局生成器好像顺便就可以拿来弄个类似的样式出来。于是顺便就想看看有没有什么其他的小型直播服务能用，也来整一个拼好播网页玩…
之前逛了很多在 Neocities 下或 Nekoweb 等其他地方部署着的个人手工码的复古式个人网站，都很有个性。这边也有很多人会在自己网站里悉心分享各种各样的IndieWeb（独立网站）方向的编码教程和工具素材，网站布局生成器就是其中一种。
（Neocities/Nekoweb这类社区本质只提供托管网页文件服务，不会以平台方的形式去主动整理收集用户做的网页主题或工具列表之类的东西，所以现成的别人自制的帮助分享资源仍然分散在各种个人网站中其他人专门设立的资源收集页面&其余讨论社区里，如Reddit。还可以在两个平台里靠搜索source、layout等关键词寻找这些资源收集页面。）
这里用到的是相对比较知名的petrapixel’s layout generator。通过调整这里的模板完全可以获得一个基础的类似直播间的网站布局。
首先如果真的要来鼓捣网页的话，可能需要的前提：
-
需要会用git的这些基础功能：建立本地库 & 关联本地和远程在线仓库 & 提交本地库代码到远程库（如果用VS Code当编辑器的话安装了git后在侧边栏直接就能可视化管理，不需要在命令行手输命令）。然后选择一个托管服务来部署网页（netlify、cloudflare等）。
-
对小部分html网页结构（head、Body、footer）和常用富文本或其他标签 & 小部分的css属性有点印象……
↑ 也是网友自身代码理解水平的极限，其余的只能靠基础文档和各种乱查来扶着了……
（隔壁的个人资源收集贴也放了一点html等东西的学习资源：Link）
基础网页框架
（我自己瞎折腾出来的）结构
在生成器里添加 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+人的。
↑ 如果只是想要私密个人直播只用这个东西来弄或许其实就可以了，但是其余更有展示性的花里胡哨内容我做都做完了所以（后略）
（*这个工具到最后也只是一个凑合使的免费替代的性质，不知道还有没有比这还能更方便的选择…）
（但是它是免费开源的并且完全只基于网页，不需要服务器。就跟部署别的网页一样随便复制一下仓库代码就能自己部署自己的份了恩。）
创建群聊房间 这个方式大多用于多人群聚，有可视化的手动调整输出画质的选项，用旁边两个只专注推流的方式开的话需要通过调整链接后面的参数来更改输出画质。每次开的推流的链接都是随机字符串，也可以随便改成自己喜欢的文本重复用。
⚠️：这里的推流链接或房间名称是只要某个时刻没有人就随时都可以被重复使用的。因为网页只要一向外发布它的html源代码就永远会是公开的，就算表面上可以给房间设密码，或者开单推流的时候可以设置 &audience 这样的二次防备参数；嵌入的链接只要最后会被放到公开网页里，只要f12一下打开控制台或者ctrl+U就能看见源代码里的所有东西，熟悉技术的人一眼就能分辨出来链接。所以设置了可能也没用……为了安全性，之后配置网页的时候这个播放器的嵌入代码不播的时候或许还是不要一直留在网页上？但是改网页改来改去推送来推送去果然还是很麻烦，或许也可以使用一些另外的html文件加密工具如PageCrypt）再设置一层密码……
先给一个创建房间模式的流程用来解释部分用法（但关于多人连接本身的内容就先略过，也还没研究），但是为了方便快捷自己实际上最后还是用的 添加摄像头 的那个选项在推流。
先从房间模式来观察各种设置的话…
创建的时候把 嘉宾仅看到导演视频 和 导演作为参与者 勾上 ↓。
于是接下来就会到这个页面（被马赛克掉的地方都是房间名，没码的都是各种调整参数…）。
用左上角的软盘emoji可以保存房间配置（但是只会重定向去上一次使用的链接，好像不会保存底下设置配好的内容 :/ ），窗户🪟emoji可以切换控制视图和自己&其他人的同屏分享视图。点击下方的 enable director's microphone or video 后就等于是打开了一个直播源。
左边就会多出一个画面（第一次开的时候可能直接开的就会是电脑/其他设备的摄像头，麦克风声音也会默认打开，需要小心一下^^;;;）。
右上角也会显示出这个直播源链接到的设备数量与有在观看直播&直播开了声音的人的数量，以及传输速度。（只有后面三个数据真的能证明有多少人打开了视频在看，多人在房间里时好像会包括里面的人。最后那个scene的计数好像就不包含房间里连接到的其他人，只有从左下那个单人观看链接来看的观众数量。。不用房间模式开推流就没有scene这个计数）
此时需要按下面的齿轮图标打开设置。上半部分是调整视频源和音频源。
（如果用中间的 添加摄像头 开启实时流的话底部的设置按钮里就不会有第2个和第6第7个按钮。用 OBS远程屏幕共享 的话第2个按钮的扬声器控制选项又会回来。并且在创建页就会让你选择视频源和音频源，按CTRL可以同时选择多个源）
视频源这边可以使用 OBS虚拟摄像头 功能来输出在OBS里自定义好的画面（在OBS主界面里可以在右下看见 启动虚拟摄像机 的设置），但是默认设置下声音不会附带过来。
Vdo Ninja只能用 浏览器自带的分享屏幕功能 来分享声音，浏览器分享虽然能够提供 单个浏览器标签页 、单个窗口 、和 整个全屏 的分享，但是 分享 单个窗口 时是输出不了声音的……
于是最后如果要单窗口的声音目前就必须得安装使用文档提到的VB-Cable。软件装完重启好后，网页设置的音频源设置就可以选择CABLE Output (VB-Audio Virtual Cable)了（如果还需要说话可以按CTRL同时选上麦克风之类的）。
按照文档最先给的方法需要在windows自带搜索里输入 mix，打开 混音器选项 （在win11设置页里显示的是 系统 > 声音 > 音量合成器 ），把需要的窗口的 输出设备 这个设置都从默认改成 CABLE Input。
这样虽然可以在直播流中听到声音，但是随之而来的问题就是本地设备同时也听不到那些窗口的声音了。所以这个方式还是拿来单独测试直播流 用比较好。之后还是得用文档下面的用OBS的那个方法来设置声音。
打开OBS右下的设置：
在需要输出声音的窗口的源右键打开设置把 采集音频 这个项勾上
然后就可以看见 混音器 这边多出来了此窗口的音频音量计，右键打开 高级音频设置
在相应窗口的 音频监听 栏把 关闭监听改成 监听并输出，这样直播和本地的音频就都可以正常播放了。
（↑ 截图里桌面的监听好像之前是默认就开着的，但还是建议只单独输出想要的窗口的音频并把桌面音频关了，因为音质差距有点大。。。）
…然后你可能就会发觉这个声音听着完全就是一坨莫名其妙的糊糊，是因为声音设置这里如图黄框默认自动打开的几个选项导致的，如果要正经放音乐之类的就得全部关掉。
（顺便现在接过来的声音要静音的话得靠关麦克风的那个选项…）
视频源的设置可以调整画面宽高和帧数
但是这俩选项的设置好像还是保存不下来，所以每次开推流的时候都得记得重新设置（呃）。。
在设置选项旁边的房间设置可以更改输出画质之类的
VDO Ninja的各种推流&观看端链接参数（房间模式&单独推流模式）
一般开房间时房主所在的导演室的链接是这个样子 ↓
https://vdo.ninja/?director=房间名&showdirector
只要开了推流后面就会多出 &push=自己开播时的推流ID 这个参数（创房间时勾选导演作为参与者那个选项是为了方便看见视频画面与这个id和分享链接，不选的话链接就藏在设置里）。在房间里的单人分享链接是这样的 ↓，只要开了推流就可以在左下角看见。比起单独分享多了solo和room的参数。
https://vdo.ninja/?view=推流号&solo&room=房间名
（屏幕分享的那个选项就跳过了下面就只来看一看添加摄像头那个单独推流选项的部分。）
在单独的分享模式中的打开的页面的链接后缀参数只有 push，这种模式下只能分享出把push替换成 view 的只有视频播放器的观看链接给人看，无法多人使用。如果另外的人打开同一个push开头的链接就会显示这个链接已被使用。
然后到了嵌入的部分…使用html的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=10000"></iframe>
<!-- （单独版链接替换） -->
src="https://vdo.ninja/?view=随机参数或自己随便写的数值&proaudio=2&audiobitrate=510&videobitrate=10000"
&proaudio=2 、 &videobitrate=10000 和 &audiobitrate=510 这些数值是后加的。用于控制音质和画质。只要是view链接都可以用。建议把proaudio和audiobitrate的数值都全加上，如果什么都不加这个最后出来的声音音质真的会不太行… proaudio的文档表示了不同数值的不同行为，虽然写着1是最强模式但是个人不知道为什么会觉得开到2可能更好点（感觉1的效果带了些奇怪的混音显得声音很闷）。。。audiobitrate 的最大值就是510kbps，和前面的proaudio放一起能改善一些音质问题。
甚至还有 &audiocodec=pcm 这样的参数能输出无损的音频。。。（文档）
videobitrate 是调整视频画质的参数。文档里给了&videobitrate=6000或者20000的例子，最高能到60000kbps。试着用这个值这么放了一会这个4050显卡的笔记本挪鼠标已经会开始有点卡卡的了，请谨慎拉满…
一切配置好就可以把iframe塞到自己的网页的content区然后适当调整播放器大小了。
（由于Vdo Ninja这整个配置过程感觉已经占内容有点多了，于是怎么给播放器写css调合适大小甚至响应式适配之类的就略过了。因为我也完全不会写都是从之前的极其有限的记忆和模板里现学现抄的）
聊天部件（Cbox）
右边的实时聊天评论区用到的是 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。
（为什么会想来用这个部件的原因之一，当然如果能用到上面那个被墙了的部件那自定义性就更强了，那边目前还看不出表情的添加上限）。
……不过需要注意一下图的尺寸，图只要稍微传大了那么一点点和文字内容摆在一起的观感就会有点奇怪。如果追求小表情emoji式风格，35x35px或以下的尺寸会更合适一些。
另外cbox还可以使用Box Code（BBcode）在聊天区里加入富文本或插入图片。部分基础富文本约等于是html换了个外框（帮助里给的部分使用方式）
在 Users 可以为自己注册管理员用户或者占位保护一些名字让其不被注册。但是免费版还不能让别的游客自由注册名字成为用户，游客只能填写个人资料链接😶（当然这和名字一样完全可以乱填…可能还是防不了网友之间的troll行为，更路人一些的就也不好说。总之管理员号可以随意删除内容和封ip…）。发送过消息的名字会随着浏览器cookie每次打开都自动保留。如果有注册过这个box，匹配到相应名字后登录按钮就会自动亮起来 & 发送消息时会自动提示名字有主要求登录。
聊天框那里还有一个 pop up 按钮可以直接打开这个部件本体的单独网页窗口，可以单独挂着看聊天。
最后PC端侧边栏还需要一定的CSS调整来把它固定在屏幕右侧来让它不被滑动，移动端竖屏模式还得固定在屏幕底部。不过手机模式下应该还是只有横屏了才起码能正常看，还不知道咋处理这个尺寸适配这方面就先搁置了…这些就自行处理吧因为我的CSS理解也是半桶水orz
于是忍受了这么一大圈麻烦和修整网页样式的麻烦之后，恭喜你总算可以至少先让人在pc端上看你的直播啦！……但还记得上面说的安全问题吗。除了上面说的直播播放器的部分，聊天框这边如果要关闭的话在 My Cboxes 的管理页面有个 Lock Cbox 的选项，选了就可以锁住评论区了。当然如果你直接加密了整个网页应该就不太需要管这些了…
于是，一切就是这样了……（最后弄出来的朴素界面也就这个样子，，）（明明最近萌上了鼠但是我为什么要用猫耳人当神秘例图）
截长图背景会出问题补一下左栏没截到的地方（只是想截出来源不明随机老鼠）
……所以最后折腾这么半天到底是为了些什么啊？
可能是：
-
某些主流平台必须实名认证才给直播，不想搞。
-
如果真的要播也不是很想因为平台太大公开性太强而被一些可能会突然突入的未知路人jump scare到（虽然感觉是过度担忧但用户的脑子真的无法处理太多随机性）
-
只是真的脑子突然发热想实验一下可行性，，
-
没有配置比较好的服务器用大概托管不了某些知名自托管直播平台（
owncast），或许也无精力学习配置&维护也维护不动
总之就是这样……
附加：连接IPAD画面到OBS
这玩意弄完了可能也就只会偶尔拿来放音乐画图随便干点画面不会那么激烈的事情，不过由于主力画图软件目前还是procreate，就又得涉及到一个跨设备投屏的问题，大部分方法都得买好几百元的实体设备或买断/订阅费也要百来元的软件……
移动端的浏览器都不支持屏幕共享所以网页版基本是用不了了。不过Vdo Ninja其实在IOS/Android上有专门的App可以直接做到开播。但是用这个App输出的画面不知为何色彩会过曝，色差略大。如果要播画画内容显然不太合适……（不过声音方面把麦克风调选项调到 ipad麦克风 就可以直接输出内部声音了，倒不用PC端这么麻烦）
所以目前应该只有用苹果自带的Airplay/屏幕镜像功能把画面投屏到电脑上然后用OBS抓画面这个方法可以用💀。。。看了一圈免费方案，好像只有Air Screen Mirror receiver这个Windows软件用起来还行。坏就坏在：这玩意只在微软商店里，现在用国内账号看商店已经看不到了。不过有看到b站有人百度网盘分享了安装包（这个视频的简介）（百度盘）……如果不折腾外区东西的话应该只能这么来装了，有点难受。
安装好后打开就可以在苹果设备的无线投屏那看到设备名字直接连就可以了。打开的窗口还是需要尽量缩放到无黑边的程度，不然不好一键填充设置好的OBS尺寸。
之前还看见了另外一个视频的方法，是用的一个开源项目（serezhka/java-airplay）改的。
默认给了gstreamer, ffmpeg, vlc, h264-dump这几个播放器，但是除了ffmpeg外其他所有播放器的效果全都跟vdo ninja的IOS app有一样的色差问题（你们不会用的是就是同一个东西吧）。。。ffmpeg的连接上PAD后的电脑窗口又默认是全屏的，需要双击两下才能小窗，而且实际上用起来画面卡顿非常明显。。。。。。所以感觉还是不太行。还是用上面的吧。
