Files
AAAandPedro Antonio c18502fd18 feat: improve microphone, chat and platform support
This release adds microphone processing controls and local chat controls, expands platform packages, and synchronizes the website and guides. It also fixes native H.264 input/format handling, signaling recovery, fresh STUN discovery, and UDP ownership during overlapping connections.

This is **v1.8.0**. Browser/Server v23, Native control v9 and capture v7 remain unchanged, with the existing 1440p ceiling. Additional resolutions, capability negotiation and Magicsock are separate follow-up work.

## Validation

- Full local Web check: 79 files / 1,317 tests, TypeScript and production build.
- Full Go checks, platform builds and Windows native capture regressions/probe.
- Native H.264 Host lifecycle, Browser-to-App fanout and App-exit recovery, and Native H.264 through embedded SFU: all passed with owned process/port/profile cleanup.
- Website build, documentation and repository hygiene passed. Existing UI acceptance covers narrow screens, both languages/themes, architecture downloads and all 23 film checks; final packaging and Go race checks run on the merged revision in CI.
- Physical macOS/Linux capture, representative public networks and unmatched field reports retain their documented evidence limits. No claim that every blur/disconnection report is resolved.

## Release notes

### 中文

这是一次功能与兼容性更新:麦克风和聊天增加了实用的小选项,App 与 Server 支持更多设备,同时修复了原生分享和连接恢复中的若干问题。现有 1.x 协议保持不变。

#### 新增与改进

- 浏览器麦克风新增「降噪与回声消除」开关,默认开启回声消除、降噪和自动增益;分享音乐或使用虚拟音频输入时,可按需关闭。
- 可调整弹幕字号和透明度,并将当前保留的聊天记录导出为 TXT。当前会话最多保留 1,000 条文字消息,刷新页面后清空;需要保存时请先导出。
- 新增 Intel Mac、Linux ARM64 App,以及 Linux ARM64 Server 和容器镜像。官网下载区可直接选择对应架构,并显示最新版本和发布时间。
- 更新官网演示、README 截图和中英文教程,明确浏览器分享也可选择窗口或屏幕;开始分享前显示房间号占位,保持底栏控件位置稳定。
- 官网新增直达问题排查的入口,补充浏览器 WebRTC 限制、校园网和 Windows 显卡相关的排查步骤。
- App 模式选择页显示免费开源说明、作者与贡献者署名,以及官方网站和源码链接。

#### 修复

- 修正部分 H.264 原生分享的格式兼容性校验,以及 Windows 编码器输入长度和输出缓冲区对齐问题。
- 清理已失效的重连任务和 Native 接收信令,避免旧连接继续影响当前会话。
- 修复 App 重连时可能复用过期公网地址的问题;重新探测使用当前地址,并处理探测丢包和过期响应,保留其他正常连接。
- 修复 App 新旧媒体连接重叠时共用端口造成的冲突,避免准备或撤销新连接打断仍在使用的画面;关闭连接时及时取消未完成的端口映射请求。
- 无站点密码时,连接恢复不再误引导用户输入站点密码。
- 房间失效或会话终止时,开播前后的原因提示统一显示在电视状态图标中,避免额外提示条。
- 修正 Linux 原生采集的时间戳与关键帧时间基准。感谢 Pedro Antonio 在 [#449](https://github.com/TNTcraftHIM/Piik/pull/449) 的贡献。

#### 使用说明

下载对应平台的完整压缩包,退出旧 App 后解压使用。Windows 继续提供 x64;macOS 提供 Apple 芯片与 Intel 版本,原生采集需要 macOS 13 或更新版本。Linux 提供 x64 与 ARM64,原生采集还需安装[系统组件](https://github.com/TNTcraftHIM/Piik/blob/main/native/capture/linux/README.md)。macOS 和 Linux 的实机覆盖仍有限,欢迎反馈。

### English

This update adds useful microphone and chat controls, brings Piik to more devices, and fixes several native-sharing and connection-recovery issues. The existing 1.x protocols remain unchanged.

#### New and improved

- Browser microphones now have a “Noise & echo reduction” toggle. Echo cancellation, noise suppression and automatic gain control are on by default; turn them off when appropriate for music or virtual audio inputs.
- Adjust chat-overlay text size and opacity, and export retained messages as TXT. The current session keeps up to 1,000 text messages and clears on page refresh; export first if you want to keep them.
- Added Intel Mac and Linux ARM64 App packages, plus Linux ARM64 Server and container images. The website provides architecture selectors and shows the latest release and publication date.
- Updated the website demonstration, README screenshots and bilingual guides, clarifying that browser capture can also select windows or screens. A room-code placeholder keeps the bottom bar stable before sharing starts.
- Added direct website links to troubleshooting, with steps for browser WebRTC restrictions, campus networks and Windows graphics issues.
- The App mode-selection page now shows its free and open-source status, author and contributor credit, and links to the official website and source.

#### Fixes

- Corrected H.264 format compatibility checks and Windows encoder input-length and output-buffer alignment handling.
- Retired stale reconnect tasks and Native receive signals so they cannot continue affecting the current session.
- Fixed App reconnection reusing an expired public address. Fresh discovery handles lost probes and stale responses while preserving other working connections.
- Fixed UDP socket conflicts between overlapping App media connections so preparing or canceling a replacement preserves the active picture. Closing a connection now cancels unfinished gateway mapping requests.
- Connection recovery on passwordless sites no longer incorrectly asks for a site passphrase.
- Expired-room and session-termination reasons now use the same TV status indicator before and during sharing, without an extra notice strip.
- Corrected Linux native capture timestamps and keyframe time bases. Thanks to Pedro Antonio for [#449](https://github.com/TNTcraftHIM/Piik/pull/449).

#### Updating

Download the complete archive for your platform, quit the old App, and extract the new package. Windows remains x64-only. macOS packages support Apple silicon and Intel; native capture requires macOS 13 or newer. Linux supports x64 and ARM64 and requires additional [system components](https://github.com/TNTcraftHIM/Piik/blob/main/native/capture/linux/README.md) for native capture. Physical-device coverage on macOS and Linux remains limited; feedback is welcome.

## Attribution

Co-authored-by: Pedro Antonio <wrenchwastaken@gmail.com>
2026-10-04 16:21:01 +08:00

929 lines
54 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light dark" />
<meta
name="description"
content="Share the good stuff. Piik is free screen sharing for games, movie nights, drawings and photos. Invite up to 20 friends to watch in their browsers."
/>
<meta name="theme-color" content="#e9f2ee" />
<title>Piik — Share the good stuff.</title>
<link rel="icon" href="./assets/favicon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="./styles.css" />
<link rel="stylesheet" href="./assets/brand.css" />
<script type="module" src="./main.js"></script>
</head>
<body>
<a class="skip-link" href="#main"><span lang="en">Skip to content</span><span lang="zh-CN">跳到正文</span></a>
<svg class="symbols" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<symbol id="tv-mark" viewBox="0 0 32 32">
<g fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
<path d="m11 4 5 4 5-4" />
<rect x="4" y="8" width="24" height="18" rx="4" />
<circle cx="11.5" cy="16.5" r="1.25" fill="currentColor" stroke="none" />
<path d="M19 17c1.5-1.8 3.2-1.8 4.7 0M10 29l2-3m10 3-2-3" />
</g>
</symbol>
<symbol id="download-mark" viewBox="0 0 24 24">
<path
d="M12 3v12m-5-5 5 5 5-5M4 16v4h16v-4"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</symbol>
</svg>
<header class="site-header wrap">
<a class="identity" href="#" aria-label="Piik" data-brand>Piik<span class="identity-dot">.</span></a>
<nav aria-label="Main">
<a href="#start"><span lang="en">Get started</span><span lang="zh-CN">使用教程</span></a>
<a href="#demo"><span lang="en">Use online</span><span lang="zh-CN">在线使用</span></a>
<a href="./docs/troubleshooting.html?lang=en" data-doc-page="troubleshooting.html"><span lang="en">Help</span><span lang="zh-CN">问题排查</span></a>
<a href="#download"><span lang="en">Download</span><span lang="zh-CN">下载</span></a>
<a href="./docs/?lang=en" data-doc-page=""><span lang="en">Docs</span><span lang="zh-CN">文档</span></a>
</nav>
<div class="preferences" hidden>
<button id="language" type="button" lang="zh-CN" aria-label="切换到简体中文">简体中文</button>
<label class="theme-picker"
><span class="sr-only"><span lang="en">Color theme</span><span lang="zh-CN">外观</span></span
><svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="7.5" fill="none" stroke="currentColor" stroke-width="1.6" />
<path d="M12 4.5a7.5 7.5 0 0 1 0 15Z" fill="currentColor" /></svg
><select id="theme">
<option value="system">System</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select></label
>
</div>
</header>
<main id="main">
<section class="hero wrap" aria-labelledby="hero-title">
<div class="hero-copy">
<p class="eyebrow">
<span class="status-dot" aria-hidden="true"></span><span lang="en">Screen sharing · Free &amp; open source</span
><span lang="zh-CN">屏幕共享 · 免费开源</span>
</p>
<h1 id="hero-title">
<span lang="en">Share the<br /><span class="highlight">good stuff.</span></span
><span lang="zh-CN">来,看点<br /><span class="highlight">好康的。</span></span>
</h1>
<p class="hero-description">
<span lang="en">A great play. A movie night. Photos from your trip.<br />Share your screen and invite your friends.</span
><span lang="zh-CN">游戏高光、周末电影、旅行照片。<br />开个房间,叫朋友来一起看。</span>
</p>
<div class="hero-actions">
<a class="button primary" href="#download"
><span lang="en">Download Piik App</span><span lang="zh-CN">下载 Piik App</span
><svg aria-hidden="true"><use href="#download-mark" /></svg></a
><a class="text-link" href="https://demo.piik.tv" target="_blank" rel="noopener noreferrer"
><span lang="en">Use Piik online</span><span lang="zh-CN">直接使用在线版</span
><span aria-hidden="true"> ↗</span></a
>
</div>
<p class="hero-note">
<span lang="en">One host · Up to 20 friends · Nothing to install to watch</span
><span lang="zh-CN">一位房主 · 最多 20 位朋友 · 观看无须安装</span>
</p>
<div class="film-actions">
<a class="film-link" href="./film/" data-film-link>
<span class="film-play" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="m9 6 9 6-9 6Z" fill="currentColor" /></svg></span>
<span lang="en">A little film about Piik</span><span lang="zh-CN">用一支短片,认识 Piik</span>
<span class="film-length">76s</span>
</a>
</div>
</div>
<div class="hero-scene">
<img
class="living-room"
src="./assets/living-room.svg#still"
width="900"
height="590"
fetchpriority="high"
alt="A host with a small gold crown shares an RPG, a drawing, travel photos and an animated film. Three friends watch from the sofa."
/>
<div class="scene-caption">
<span class="caption-line"></span>
<p id="welcome-line"><span lang="en">“Your seat is right here.”</span><span lang="zh-CN">“沙发给你留着呢。”</span></p>
</div>
</div>
</section>
<details class="film-preview wrap" id="film-preview" hidden>
<summary><span lang="en">A little film about Piik</span><span lang="zh-CN">用一支短片,认识 Piik</span><span class="film-collapse"><span lang="en">Close</span><span lang="zh-CN">收起</span> ×</span></summary>
<iframe id="website-film" title="Piik introduction" allow="fullscreen" allowfullscreen></iframe>
</details>
<section class="how-section" id="how" aria-labelledby="how-title">
<div class="wrap">
<div class="section-heading">
<p class="eyebrow"><span lang="en">How it works</span><span lang="zh-CN">分享只需三步</span></p>
<h2 id="how-title">
<span lang="en"
><span class="phrase">Pick a screen.</span> <span class="phrase">Send a link.</span>
<span class="phrase">Watch together.</span></span
><span lang="zh-CN"><span class="phrase">选好画面,</span><span class="phrase">发个邀请。</span></span>
</h2>
</div>
<ol class="steps">
<li>
<button class="step-art" type="button" disabled>
<span class="sr-only"
><span lang="en">Replay: choosing a screen</span><span lang="zh-CN">重播:选择分享画面</span></span
><svg viewBox="0 0 250 136" aria-hidden="true">
<g fill="none" stroke="var(--drawing)" stroke-width="3" stroke-linejoin="round">
<rect x="47" y="17" width="141" height="90" rx="12" fill="var(--art-mint)" />
<path d="M105 108v14m-20 0h65" />
<g class="chosen-window">
<rect x="64" y="31" width="64" height="57" rx="7" fill="var(--art-paper)" />
<path d="m79 76 12-15 9 7 12-19" />
</g>
<rect x="137" y="31" width="34" height="23" rx="5" fill="var(--art-blue)" />
<rect x="137" y="64" width="34" height="24" rx="5" fill="var(--art-yellow)" />
<g class="screen-cursor">
<path d="m172 82 3 33 9-8 8 13 9-5-8-13 11-2Z" fill="var(--art-orange)" />
</g>
</g>
<path
d="m33 35-8-4m12-8-4-8m169 22 9-5"
stroke="var(--drawing)"
stroke-width="3"
stroke-linecap="round"
/></svg
><span class="art-replay" aria-hidden="true">↻</span>
</button>
<p class="step-number">01 <span aria-hidden="true">/</span></p>
<h3><span lang="en">Choose what to share.</span><span lang="zh-CN">选好画面。</span></h3>
<p>
<span lang="en">Your whole screen or just one window.<br />You choose what to let people see.</span
><span lang="zh-CN">整个屏幕,或只分享一个窗口。<br />分享哪些内容,由你决定。</span>
</p>
</li>
<li>
<button class="step-art" type="button" disabled>
<span class="sr-only"
><span lang="en">Replay: sending an invitation</span
><span lang="zh-CN">重播:发出邀请链接</span></span
><svg viewBox="0 0 250 136" aria-hidden="true">
<g stroke="var(--drawing)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<g class="invite-note">
<rect
x="44"
y="31"
width="143"
height="73"
rx="16"
fill="var(--art-paper)"
transform="rotate(-5 115 67)"
/>
<path
d="m80 77-6-6a13 13 0 0 1 0-18l10-10a13 13 0 0 1 18 0l6 6m-10 8 6 6a13 13 0 0 1 0 18L94 91a13 13 0 0 1-18 0l-6-6m11-10 16-16"
fill="none"
/>
<path d="M125 58h38m-38 15h24" />
</g>
<circle cx="191" cy="96" r="25" fill="var(--art-blue)" />
<g class="invite-plane">
<path d="m174 94 34-12-12 33-7-14Z" fill="var(--art-paper)" />
<path d="m189 101 8-9" />
</g>
<path class="invite-spark" d="M190 24v10m-5-5h10M33 93v8m-4-4h8" />
</g></svg
><span class="art-replay" aria-hidden="true">↻</span>
</button>
<p class="step-number">02 <span aria-hidden="true">/</span></p>
<h3><span lang="en">Send a link.</span><span lang="zh-CN">发个邀请。</span></h3>
<p>
<span lang="en">Drop the room link in your group chat.<br />Your friends open it in a browser.</span
><span lang="zh-CN">把邀请链接发给朋友。<br />对方用浏览器打开,就能加入。</span>
</p>
</li>
<li>
<button class="step-art" type="button" disabled>
<span class="sr-only"
><span lang="en">Replay: friends joining the sofa</span
><span lang="zh-CN">重播:朋友坐上沙发</span></span
><svg viewBox="0 0 250 136" aria-hidden="true">
<g stroke="var(--drawing)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<path d="M55 112v9m139-9v9" />
<rect x="46" y="63" width="157" height="50" rx="17" fill="var(--couch)" stroke="none" />
<g class="sofa-friend">
<g fill="var(--art-blue)" stroke="none">
<circle cx="99" cy="39" r="12" />
<path d="M78 88c0-19.5 7.5-30 21-30s21 10.5 21 30q0 4.5-4.5 4.5h-33Q78 92.5 78 88Z" />
</g>
<path d="M95 39v1m8-1v1" />
</g>
<g class="sofa-friend">
<g fill="var(--art-pink)" stroke="none">
<circle cx="150" cy="37" r="12" />
<path d="M129 88c0-19.5 7.5-30 21-30s21 10.5 21 30q0 4.5-4.5 4.5h-33Q129 92.5 129 88Z" />
</g>
<path d="M146 37v1m8-1v1" />
</g>
<path d="M125 99v10M46 73h18a10 10 0 0 1 10 10v26m129-36h-18a10 10 0 0 0-10 10v26" fill="none" stroke="var(--couch-dark)" />
<g class="sofa-spark"><path d="m185 20 3 8 8 3-8 3-3 8-3-8-8-3 8-3Z" fill="var(--art-yellow)" /></g>
</g></svg
><span class="art-replay" aria-hidden="true">↻</span>
</button>
<p class="step-number">03 <span aria-hidden="true">/</span></p>
<h3><span lang="en">Watch together.</span><span lang="zh-CN">沙发上见。</span></h3>
<p>
<span lang="en">Watch, chat and send reactions.<br />Friends join in their browser.</span
><span lang="zh-CN">边看边聊,送个表情。<br />朋友打开浏览器就能加入。</span>
</p>
</li>
</ol>
</div>
</section>
<section class="start-section wrap" id="start" aria-labelledby="start-title">
<div class="section-heading">
<p class="eyebrow"><span lang="en">Quick start</span><span lang="zh-CN">使用教程</span></p>
<h2 id="start-title">
<span lang="en">Start your first room.</span><span lang="zh-CN">开始第一次分享。</span>
</h2>
<p>
<span lang="en"
>Download the App to start sharing, or open <a href="https://demo.piik.tv">Piik online</a> and use it right in your browser.</span
><span lang="zh-CN"
>下载 Piik App,开始分享;也可以直接打开<a href="https://demo.piik.tv">在线版</a>,用浏览器开房间。</span
>
</p>
</div>
<nav class="guide-links" aria-label="Guides">
<a href="#demo"><span lang="en">Use online</span><span lang="zh-CN">在线版</span></a
><a href="#guide-app"><span lang="en">Piik App</span><span lang="zh-CN">Piik App</span></a
><a href="#guide-web"><span lang="en">Existing site</span><span lang="zh-CN">已有站点</span></a
><a href="#watch"><span lang="en">Join as a viewer</span><span lang="zh-CN">加入房间</span></a>
</nav>
<div class="guides">
<details class="guide" id="demo" open>
<summary>
<span class="guide-number">01</span
><span class="guide-heading"
><span lang="en">Share online</span><span lang="zh-CN">直接在线分享</span
><small
><span lang="en">Open in your browser and start sharing</span
><span lang="zh-CN">打开浏览器就能开房间、发邀请</span></small
></span
>
</summary>
<div class="guide-body">
<ol class="guide-steps">
<li>
<strong
><span lang="en">Open Piik online.</span
><span lang="zh-CN">打开在线版。</span></strong
>
<p>
<span lang="en"
>Visit <a href="https://demo.piik.tv">demo.piik.tv</a> on a computer or phone.
</span
><span lang="zh-CN"
>用电脑或手机浏览器打开 <a href="https://demo.piik.tv">demo.piik.tv</a>。
</span
>
</p>
</li>
<li>
<strong
><span lang="en">Share a screen and copy its invitation.</span
><span lang="zh-CN">分享画面,复制邀请。</span></strong
>
<p>
<span lang="en"
>Select <strong>Start sharing</strong>. On a computer, use <strong>Browser</strong> to choose a screen, window or tab.
You can also choose <strong>Camera</strong> on a supported computer or phone browser.
Once the preview appears, select <strong>Copy invite link</strong>.</span
><span lang="zh-CN"
>点击<strong>开始分享</strong>。电脑上可通过<strong>浏览器</strong>选择屏幕、窗口或标签页;
电脑和手机也可选择<strong>摄像头</strong>(需浏览器支持)。预览出现后,点击<strong>复制邀请链接</strong>。</span
>
</p>
</li>
<li>
<strong
><span lang="en">Send the invitation to your friends.</span
><span lang="zh-CN">把邀请发给朋友。</span></strong
>
<p>
<span lang="en"
>Friends can open the link on a phone or computer. Select <strong>Play</strong> if playback does not start automatically.</span
><span lang="zh-CN"
>朋友用手机或电脑打开链接即可观看。如果没有自动播放,点击<strong>播放</strong>。</span
>
</p>
</li>
<li>
<strong><span lang="en">End your share.</span><span lang="zh-CN">结束分享。</span></strong>
<p>
<span lang="en"
>When you are finished, select <strong>Stop sharing</strong> on the host page.</span
><span lang="zh-CN">结束时,在房主页面点击<strong>停止分享</strong>。</span>
</p>
</li>
</ol>
<aside class="guide-note">
<h3><span lang="en">About this online site</span><span lang="zh-CN">在线版说明</span></h3>
<p id="demo-status">
<span lang="en"
>This site uses direct device-to-device connections (P2P), with media forwarding disabled.
Restrictive networks may open the page but block the video.</span
><span lang="zh-CN"
>在线版仅使用设备间直连(P2P),未启用媒体转发。
在受限网络下,可能出现页面能打开、画面无法连接的情况。</span
>
</p>
<p>
<span lang="en">Self-hosted Piik sites can <a href="./docs/self-hosting.html#optional-media-fallback">enable media forwarding (SFU)</a> as a fallback when a direct connection cannot be established.</span
><span lang="zh-CN">自行部署的 Piik 站点可以<a href="./docs/zh/self-hosting.html#可选启用媒体兜底">启用媒体转发(SFU)</a>,为直连失败提供兜底。</span>
</p>
<a class="button download-button" href="https://demo.piik.tv" aria-describedby="demo-status"
><span lang="en">Use Piik online</span><span lang="zh-CN">直接在线使用</span
><span aria-hidden="true"> ↗</span></a
>
</aside>
</div>
</details>
<details class="guide" id="guide-app">
<summary>
<span class="guide-number">02</span
><span class="guide-heading"
><span lang="en">Share with Piik App</span><span lang="zh-CN">用 Piik App 分享</span
><small
><span lang="en">Download, open and create a room</span
><span lang="zh-CN">下载后直接开房间</span></small
></span
>
</summary>
<div class="guide-body">
<ol class="guide-steps">
<li>
<strong
><span lang="en">Download and extract Piik App.</span
><span lang="zh-CN">下载并解压 Piik App。</span></strong
>
<p>
<span lang="en"><a href="#download">Download the App package for your system</a>, extract it completely and keep the folder intact.</span
><span lang="zh-CN"><a href="#download">下载对应系统的 Piik App 程序包</a>,完整解压并保留目录结构。</span>
</p>
<dl class="launch-files">
<div>
<dt>Windows</dt>
<dd><span lang="en">Open </span><span lang="zh-CN">打开 </span><code>piik-app.exe</code></dd>
</div>
<div>
<dt>macOS</dt>
<dd><span lang="en">Open </span><span lang="zh-CN">打开 </span><code>Piik App.app</code></dd>
</div>
<div>
<dt>Linux</dt>
<dd><span lang="en">Run </span><span lang="zh-CN">运行 </span><code>./piik-app</code></dd>
</div>
</dl>
</li>
<li>
<strong
><span lang="en">Choose Public invite, then Open Piik.</span
><span lang="zh-CN">选择「公网邀请」,点击「进入 Piik」。</span></strong
>
<p>
<span lang="en"
>The launcher opens in your system browser. Public invite creates a temporary Internet address
for friends outside your network. If you are on the same network or already have a site, see the mode descriptions.</span
><span lang="zh-CN">启动页会在系统浏览器里打开。「公网邀请」会生成临时公网地址,方便不在同一网络的朋友加入。如果朋友和你在同一局域网,或你们已有站点,可查看模式说明。</span>
</p>
</li>
<li>
<strong
><span lang="en">Start sharing and choose a source.</span
><span lang="zh-CN">点击「开始分享」,选择来源。</span></strong
>
<p>
<span lang="en"
>Choose <strong>Browser</strong>, <strong>Camera</strong>, <strong>Apps / Windows</strong> or
<strong>Screens</strong> where available. Select the picture and audio you want to share.</span
><span lang="zh-CN"
>按可用选项选择<strong>浏览器</strong>、<strong>摄像头</strong>、<strong>程序 / 窗口</strong
>或<strong>屏幕</strong>,再选择具体画面和声音。</span
>
</p>
</li>
<li>
<strong
><span lang="en">Copy the invitation and keep the App open.</span
><span lang="zh-CN">复制邀请,并保持 App 运行。</span></strong
>
<p>
<span lang="en"
>Check the preview and select <strong>Copy invite link</strong>. Keep both the App and sharing tab
open until you finish.</span
><span lang="zh-CN"
>确认预览后点击<strong>复制邀请链接</strong>。分享期间保持 App
和分享标签页打开,结束时点击<strong>停止分享</strong>。</span
>
</p>
</li>
</ol>
<aside class="guide-note">
<h3><span lang="en">Which mode should I use?</span><span lang="zh-CN">模式怎么选?</span></h3>
<dl class="modes">
<div>
<dt><span lang="en">Local room</span><span lang="zh-CN">本地房间</span></dt>
<dd>
<span lang="en">For friends on the same Wi-Fi or local network, such as at home or in the office. If several local invitation addresses appear, choose the network your friends use.</span
><span lang="zh-CN">适合同一 Wi-Fi 或局域网里的朋友,比如同屋或同办公室。出现多个局域网邀请地址时,选择与朋友相同的网络。</span>
</dd>
</div>
<div>
<dt><span lang="en">Public invite</span><span lang="zh-CN">公网邀请</span></dt>
<dd>
<span lang="en"
>For friends on another network, even in another city. Send them a temporary invitation and keep the App running. Closing it ends the room and invitation.</span
><span lang="zh-CN">朋友在外地、和你不在同一网络时,用临时公网邀请加入。分享期间保持 App 运行,退出后房间和邀请失效。</span>
</dd>
</div>
<div>
<dt><span lang="en">Connect to Site</span><span lang="zh-CN">连接站点</span></dt>
<dd>
<span lang="en">Connect the App to a Piik site run by you or a friend. You can also use <a href="https://demo.piik.tv">demo.piik.tv</a>. <a href="#guide-web">See guide 03 below.</a></span
><span lang="zh-CN">把 App 连接到自己或朋友部署的 Piik 站点,也可以用 <a href="https://demo.piik.tv">demo.piik.tv</a>。<a href="#guide-web">具体操作见教程 03。</a></span>
</dd>
</div>
</dl>
<p>
<span lang="en"
>Public invite relies on P2P media connections, without a media-server fallback. Some networks may
open the page but fail to receive video.</span
><span lang="zh-CN"
>公网邀请依赖 P2P
媒体连接,不提供媒体服务器转发兜底;部分网络可能出现网页能打开、画面无法连接的情况。</span
>
</p>
<p>
<span lang="en"
>Physical-device coverage for the macOS and Linux apps is still limited. Test reports are welcome on
<a href="https://github.com/TNTcraftHIM/Piik/issues">GitHub Issues</a>.
On macOS, native capture requires macOS 13+. On Linux, it needs <a href="https://github.com/TNTcraftHIM/Piik/blob/main/native/capture/linux/README.md">additional system components</a>. Browser capture is also available.</span
><span lang="zh-CN"
>macOS 和 Linux 版 Piik App 仍需更多实机测试,欢迎有设备的朋友试用并在
<a href="https://github.com/TNTcraftHIM/Piik/issues">GitHub Issues</a> 反馈。
macOS 原生采集需要 macOS 13 及以上;Linux 原生采集需要<a href="https://github.com/TNTcraftHIM/Piik/blob/main/native/capture/linux/README.md">额外系统组件</a>。也可以用浏览器采集。</span
>
</p>
<a href="./docs/getting-started.html#share-with-piik-app" lang="en">Full App guide →</a>
<a href="./docs/zh/getting-started.html#用-piik-app-分享" lang="zh-CN">完整 Piik App 使用指南 →</a>
</aside>
</div>
</details>
<details class="guide" id="guide-web">
<summary>
<span class="guide-number">03</span
><span class="guide-heading"
><span lang="en">Use your group's Piik site</span><span lang="zh-CN">使用已有的 Piik 站点</span
><small
><span lang="en">Open in a browser, or connect with Piik App</span
><span lang="zh-CN">浏览器直接用,也能搭配 Piik App</span></small
></span
>
</summary>
<div class="guide-body">
<ol class="guide-steps">
<li>
<strong
><span lang="en">Get a Piik site address.</span
><span lang="zh-CN">准备一个站点地址。</span></strong
>
<p>
<span lang="en"
>A Piik site runs on a server set up by you or someone in your group.
Use its address, or try the public site at <a href="https://demo.piik.tv">https://demo.piik.tv</a>.</span
><span lang="zh-CN">Piik 站点由你或朋友部署在服务器上。使用你们已有的地址,
也可以先用公开站点 <a href="https://demo.piik.tv">https://demo.piik.tv</a>。</span>
</p>
</li>
<li>
<strong
><span lang="en">Connect Piik App to the site.</span><span lang="zh-CN">用 App 连接站点。</span></strong
>
<p>
<span lang="en"
>Open Piik App and choose <strong>Connect to Site</strong>. Enter the address,
add the site passphrase if required, then select <strong>Open Piik</strong>.
The sharing page opens in your browser.</span
><span lang="zh-CN"
>打开 Piik App,选择<strong>连接站点</strong>,填入地址;如果站点有访问口令,也一并填写,
再点击<strong>进入 Piik</strong>。浏览器会打开这个站点的分享页面。</span
>
</p>
<p>
<span lang="en">After opening this site through the App once, you can keep the App running
with that site configured and visit the address directly in the same browser.
The page reconnects to the App when you choose what to share.
Allow local-network access if your browser asks.</span>
<span lang="zh-CN">通过 App 打开过一次后,保持 App 运行并使用该站点配置,
之后就能在同一浏览器中直接访问网址,选择分享来源时会自动连接 App。
浏览器询问本地网络权限时,请允许访问。</span>
</p>
</li>
<li>
<strong
><span lang="en">Share a picture and invite your friends.</span
><span lang="zh-CN">选好画面,把邀请发给朋友。</span></strong
>
<p>
<span lang="en"
>Select <strong>Start sharing</strong> and choose a source. Check the preview, then
<strong>Copy invite link</strong> and send it to your friends. Keep the App and sharing tab open.</span
><span lang="zh-CN"
>点击<strong>开始分享</strong>并选择来源,确认预览后,<strong>复制邀请链接</strong>发给朋友。
分享期间保持 App 和分享标签页打开。</span
>
</p>
</li>
</ol>
<aside class="guide-note">
<h3><span lang="en">App and site, together</span><span lang="zh-CN">App 与站点,搭配着用</span></h3>
<p>
<span lang="en"
>Use the App's window, screen and audio capture with your group's regular Piik address.
Your friends can still watch in a browser.</span
><span lang="zh-CN"
>用上 App 的窗口、屏幕与声音采集,也保留站点的固定入口。朋友照样用浏览器观看。</span
>
</p>
<p>
<span lang="en">With the site's media forwarding (SFU) enabled and the host's Privacy mode off,
Piik can try this fallback when a direct connection is unavailable.
<strong>demo.piik.tv is P2P-only; this fallback is not enabled there.</strong></span>
<span lang="zh-CN">站点启用媒体转发(SFU)、房主关闭隐私模式后,直连不通时,Piik 会自动尝试这条备用路线。
<strong>demo.piik.tv 仅使用 P2P,未开启 SFU 兜底。</strong></span>
</p>
<p>
<span lang="en">To share using just a browser, open the same site on a computer and select <strong>Start sharing</strong>.
Available sources and audio depend on your browser and system.</span>
<span lang="zh-CN">也可以直接用电脑浏览器打开同一站点,点击<strong>开始分享</strong>。
可选画面和声音取决于浏览器与系统。</span>
</p>
<a href="./docs/getting-started.html#share-from-an-existing-site" lang="en">Full usage guide →</a>
<a href="./docs/zh/getting-started.html#使用已有站点分享" lang="zh-CN">完整使用指南 →</a>
<a href="#docs"><span lang="en">Host a site of your own</span><span lang="zh-CN">部署自己的站点</span><span aria-hidden="true"> ↓</span></a>
</aside>
</div>
</details>
</div>
<article class="watch-guide" id="watch" aria-labelledby="watch-title">
<svg aria-hidden="true"><use href="#tv-mark" /></svg>
<div>
<h3 id="watch-title">
<span lang="en">Here to watch a friend?</span><span lang="zh-CN">来围观朋友的分享?</span>
</h3>
<ol>
<li>
<span lang="en">Open your friend’s invitation in a phone or computer browser.</span
><span lang="zh-CN">用手机或电脑浏览器打开朋友发来的邀请链接。</span>
</li>
<li>
<span lang="en">Wait for the picture. If playback does not start, select <strong>Play</strong>.</span
><span lang="zh-CN">等待画面出现;如果没有自动播放,点击<strong>播放</strong>。</span>
</li>
<li>
<span lang="en"
>Move the pointer over the video or tap it to show volume, fullscreen and other playback
controls.</span
><span lang="zh-CN">将鼠标移到画面上,或轻点画面,显示音量、全屏等播放控件。</span>
</li>
</ol>
<p>
<span lang="en"
>Only have a room code? Select <strong>Join a room</strong> on the same Piik site and enter the
four-digit code. Access depends on the host’s settings; a site passphrase or room password may be
required.</span
><span lang="zh-CN"
>只有房间号时,在同一个 Piik
站点选择<strong>加入房间</strong>,输入四位房间号。能否加入由房主设置决定,可能需要站点口令或房间密码。</span
>
</p>
</div>
</article>
</section>
<section class="faq-section wrap" id="faq" aria-labelledby="faq-title">
<div class="faq-intro">
<p class="eyebrow"><span lang="en">FAQ</span><span lang="zh-CN">常见问题</span></p>
<h2 id="faq-title">
<span lang="en">Good to know.</span><span lang="zh-CN">你可能<br />还想知道。</span>
</h2>
<svg class="faq-tv" aria-hidden="true"><use href="#tv-mark" /></svg>
</div>
<div class="questions">
<details>
<summary>
<span lang="en">Which platforms are ready?</span><span lang="zh-CN">目前支持哪些平台?</span>
</summary>
<p>
<span lang="en"
>Windows App and browser sharing are the primary tested paths. Viewers can use a computer or phone browser.
Physical-device coverage for the macOS and Linux apps is still limited; if you have a device,
we'd welcome your test results and <a href="https://github.com/TNTcraftHIM/Piik/issues">feedback</a>.</span
><span lang="zh-CN"
>目前主要测试 Windows 版 Piik App 和浏览器分享,观众可使用电脑或手机浏览器。
macOS 和 Linux 版 Piik App 仍需更多实机测试,欢迎有设备的朋友试用并<a href="https://github.com/TNTcraftHIM/Piik/issues">反馈问题</a>。</span
>
</p>
</details>
<details>
<summary>
<span lang="en">Does everyone need Piik App?</span
><span lang="zh-CN">每个人都需要安装 Piik App 吗?</span>
</summary>
<p>
<span lang="en"
>No. Friends watch in a desktop or mobile browser without installing anything. You can host from a
supported desktop browser on a Piik site, share a camera from a supported phone browser, or use Piik App to create a room.</span
><span lang="zh-CN"
>不需要。观众用电脑或手机浏览器就能看,无须安装。房主可以在已有 Piik
站点上,用电脑浏览器分享屏幕,或用支持摄像头的手机浏览器分享镜头画面;也可以通过 Piik App 创建房间。</span
>
</p>
</details>
<details>
<summary>
<span lang="en">Can we watch from different places?</span
><span lang="zh-CN">不在同一个地方,也能一起看吗?</span>
</summary>
<p>
<span lang="en"
>Yes. Use Piik online, an Internet-accessible Piik site, or Public invite in the App. Public invite gives
your room a temporary address that can change or become unavailable; closing the App ends the room.
The online site and Public invite use direct media connections without server forwarding, so some networks
may load the page but block the video. You can also use a Piik site with media forwarding enabled
for a fallback connection.</span
><span lang="zh-CN"
>可以使用在线版、能从外网访问的 Piik 站点,或 Piik App 的“公网邀请”。公网邀请的地址是临时的,可能中断或变化,退出 App 后房间也会结束。
在线版和公网邀请的画面靠设备间直连传输,没有服务器转发兜底;部分网络可能出现页面能打开、画面连不上的情况。
也可以使用已启用媒体转发兜底的 Piik 站点。</span
>
</p>
</details>
<details>
<summary>
<span lang="en">How many friends can join?</span><span lang="zh-CN">最多能叫多少朋友?</span>
</summary>
<p>
<span lang="en"
>One host and up to 20 invited viewers fit in a room. Piik is made for a private group hanging out
around one screen.</span
><span lang="zh-CN"
>一个房间支持一位房主和最多 20
位受邀观众。叫上熟悉的朋友,看看游戏、演示作品,或者围观彼此的新发现。</span
>
</p>
</details>
<details>
<summary>
<span lang="en">Can I share sound too?</span><span lang="zh-CN">声音也能一起分享吗?</span>
</summary>
<p>
<span lang="en"
>Yes, when the selected source and capture method support audio. Check the sound option when choosing
what to share. For your own voice, turn on <strong>Microphone</strong> below the picture; choose its device and volume in
<strong>Settings</strong>. Viewers may need to press Play and turn on the video's sound.</span
><span lang="zh-CN"
>可以,来源声音取决于所选画面与采集方式,选源时可查看声音选项。想让朋友听到你说话,打开画面下方的<strong>麦克风</strong>,在旁边的<strong>设置</strong>里选择设备、调整音量。观众可能需要先点播放,再打开视频声音。</span
>
</p>
</details>
<details>
<summary><span lang="en">Do I need my own server?</span><span lang="zh-CN">需要自己搭服务器吗?</span></summary>
<p>
<span lang="en">No. Use <a href="#demo">Piik online</a>, or choose <strong>Public invite</strong> in Piik App to create a temporary room. You can also use a Piik site provided by someone else. For a permanent site under your own domain, see <a href="#docs">self-hosting below</a>.</span>
<span lang="zh-CN">不需要。可以直接用<a href="#demo">在线版</a>,或在 Piik App 中选择<strong>公网邀请</strong>创建临时房间,也可以使用别人提供的 Piik 站点。想用自己的域名长期运行一个站点,再看<a href="#docs">下方的自托管说明</a>。</span>
</p>
</details>
<div class="faq-more">
<p><span lang="en">Having trouble sharing or connecting?</span><span lang="zh-CN">分享或连接遇到问题?</span></p>
<a class="text-link" href="./docs/troubleshooting.html?lang=en" data-doc-page="troubleshooting.html">
<span lang="en">Open troubleshooting</span><span lang="zh-CN">查看问题排查</span><span aria-hidden="true"> →</span>
</a>
</div>
</div>
</section>
<section class="download-section wrap" id="download" aria-labelledby="download-title">
<div class="section-heading">
<p class="eyebrow"><span lang="en">Download</span><span lang="zh-CN">下载 Piik App</span></p>
<h2 id="download-title"><span lang="en">Get Piik App.</span><span lang="zh-CN">下载 Piik App。</span></h2>
<div class="download-release">
<span id="download-release" hidden>
<strong><span lang="en">Latest release </span><span lang="zh-CN">最新版本 </span><b></b></strong>
<span class="release-date"><span lang="en">Released </span><span lang="zh-CN">发布于 </span><time></time></span>
</span>
<a href="https://github.com/TNTcraftHIM/Piik/releases/latest"><span lang="en">Release notes</span><span lang="zh-CN">版本说明</span></a>
</div>
<p>
<span lang="en"
>Host from your computer, with controls in your browser.<br />Friends only need a browser to watch.</span
><span lang="zh-CN">在电脑上运行 Piik App,在浏览器里操作。<br />观看朋友的分享,无须安装 Piik App。</span>
</p>
</div>
<p class="release-note" id="download-status">
<span lang="en">Choose your system, then download and extract.</span>
<span lang="zh-CN">选择对应系统,下载后解压。</span>
</p>
<div class="download-cards">
<article class="download-card" aria-labelledby="download-windows">
<div class="platform-mark" aria-hidden="true">
<svg viewBox="0 0 32 32">
<path d="M4 5h10v10H4zm14 0h10v10H18zM4 19h10v10H4zm14 0h10v10H18z" fill="currentColor" />
</svg>
</div>
<h3 id="download-windows">Windows</h3>
<fieldset class="download-architecture" disabled>
<legend class="sr-only"><span lang="en">Windows architecture</span><span lang="zh-CN">Windows 架构</span></legend>
<label><input type="radio" name="windows-architecture" value="windows-amd64" checked /><span><span lang="en">64-bit (x64)</span><span lang="zh-CN">64 位(x64)</span></span></label>
</fieldset>
<a
class="button download-button"
href="https://github.com/TNTcraftHIM/Piik/releases/latest/download/piik-app-windows-amd64.zip"
aria-describedby="download-status"
><svg aria-hidden="true"><use href="#download-mark" /></svg><span lang="en">Download from GitHub</span
><span lang="zh-CN">GitHub 下载</span></a
><a href="https://gitee.com/TNTcraftHIM/Piik/releases/download/latest/piik-app-windows-amd64.zip"
><span lang="en">Download from Gitee</span><span lang="zh-CN">Gitee 国内镜像下载</span></a
>
</article>
<article class="download-card" aria-labelledby="download-macos">
<div class="platform-mark" aria-hidden="true">
<svg
viewBox="0 0 32 32"
fill="none"
stroke="currentColor"
stroke-width="2.2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="6" y="4" width="20" height="18" rx="2" />
<path d="M3 27h26M10 22l-2 5m14-5 2 5" />
</svg>
</div>
<h3 id="download-macos">macOS</h3>
<fieldset class="download-architecture" disabled>
<legend class="sr-only"><span lang="en">Mac processor</span><span lang="zh-CN">Mac 芯片</span></legend>
<label><input type="radio" name="macos-architecture" value="darwin-arm64" checked /><span><span lang="en">Apple silicon</span><span lang="zh-CN">Apple 芯片</span></span></label>
<label><input type="radio" name="macos-architecture" value="darwin-amd64" /><span>Intel</span></label>
</fieldset>
<a
class="button download-button"
href="https://github.com/TNTcraftHIM/Piik/releases/latest/download/piik-app-darwin-arm64.zip"
aria-describedby="download-status"
><svg aria-hidden="true"><use href="#download-mark" /></svg><span lang="en">Download from GitHub</span
><span lang="zh-CN">GitHub 下载</span></a
><a href="https://gitee.com/TNTcraftHIM/Piik/releases/download/latest/piik-app-darwin-arm64.zip"
><span lang="en">Download from Gitee</span><span lang="zh-CN">Gitee 国内镜像下载</span></a
>
<p><span lang="en">Native capture requires macOS 13+.</span><span lang="zh-CN">原生采集需 macOS 13 及以上。</span></p>
</article>
<article class="download-card" aria-labelledby="download-linux">
<div class="platform-mark" aria-hidden="true">
<svg
viewBox="0 0 32 32"
fill="none"
stroke="currentColor"
stroke-width="2.2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="3" y="5" width="26" height="22" rx="4" />
<path d="m9 12 5 4-5 4m9 0h5" />
</svg>
</div>
<h3 id="download-linux">Linux</h3>
<fieldset class="download-architecture" disabled>
<legend class="sr-only"><span lang="en">Linux architecture</span><span lang="zh-CN">Linux 架构</span></legend>
<label><input type="radio" name="linux-architecture" value="linux-amd64" checked /><span><span lang="en">64-bit (x64)</span><span lang="zh-CN">64 位(x64)</span></span></label>
<label><input type="radio" name="linux-architecture" value="linux-arm64" /><span>ARM64</span></label>
</fieldset>
<a
class="button download-button"
href="https://github.com/TNTcraftHIM/Piik/releases/latest/download/piik-app-linux-amd64.zip"
aria-describedby="download-status"
><svg aria-hidden="true"><use href="#download-mark" /></svg><span lang="en">Download from GitHub</span
><span lang="zh-CN">GitHub 下载</span></a
><a href="https://gitee.com/TNTcraftHIM/Piik/releases/download/latest/piik-app-linux-amd64.zip"
><span lang="en">Download from Gitee</span><span lang="zh-CN">Gitee 国内镜像下载</span></a
>
</article>
</div>
<div class="download-help">
<a class="button" href="https://github.com/TNTcraftHIM/Piik/releases"><span lang="en">More downloads</span><span lang="zh-CN">更多下载</span><span aria-hidden="true"> ↗</span></a>
<p><span lang="en">Physical-device coverage for the macOS and Linux apps is still limited. If you have a device, we'd welcome your <a href="https://github.com/TNTcraftHIM/Piik/issues">test results and feedback</a>.</span><span lang="zh-CN">macOS 和 Linux 版 Piik App 仍需更多实机测试,欢迎有设备的朋友试用并<a href="https://github.com/TNTcraftHIM/Piik/issues">反馈问题</a>。</span></p>
</div>
</section>
<section class="project-note wrap" id="docs" aria-labelledby="docs-title">
<svg class="project-tv" aria-hidden="true"><use href="#tv-mark" /></svg>
<div class="project-content">
<p class="eyebrow">
<span lang="en">Self-hosting · advanced</span><span lang="zh-CN">自托管 · 进阶使用</span>
</p>
<h2 id="docs-title">
<span lang="en">A site of your own.</span><span lang="zh-CN">给朋友们搭个站点。</span>
</h2>
<p>
<span lang="en"
>Run a Piik site on a Linux server or NAS with your own domain.
Server packages support x64 and ARM64; Docker selects the matching architecture automatically.</span
><span lang="zh-CN"
>在 Linux 服务器或 NAS 上,用自己的域名搭一个长期可用的 Piik 站点。
服务端程序支持 x64 和 ARM64,Docker 镜像会自动选择对应架构。</span
>
</p>
<a class="docs-index" href="./docs/self-hosting.html" lang="en">Server downloads and setup<span aria-hidden="true"> ↗</span></a>
<a class="docs-index" href="./docs/zh/self-hosting.html" lang="zh-CN">服务端下载与部署指南<span aria-hidden="true"> ↗</span></a>
<ul class="docs-links">
<li>
<a href="./docs/?lang=en" data-doc-page=""><span lang="en">Documentation</span><span lang="zh-CN">文档中心</span><span aria-hidden="true"> ↗</span></a>
<p>
<span lang="en">Usage guides, troubleshooting and development</span
><span lang="zh-CN">使用教程、故障排查与开发指南</span>
</p>
</li>
<li>
<a href="https://github.com/TNTcraftHIM/Piik/blob/main/docs/standards/configuration.md"
><span lang="en">Configuration</span><span lang="zh-CN">配置参考</span
><span aria-hidden="true"> ↗</span></a
>
<p>
<span lang="en">Access control, network ports and storage</span
><span lang="zh-CN">访问控制、网络端口与存储</span>
</p>
</li>
<li>
<a href="./docs/service-management.html" data-doc-page="service-management.html"
><span lang="en">Service management</span><span lang="zh-CN">长期运行与容器</span
><span aria-hidden="true"> ↗</span></a
>
<p>
<span lang="en">Automatic startup, Docker and server checks</span
><span lang="zh-CN">开机启动、Docker 与运行检查</span>
</p>
</li>
</ul>
<p class="docs-note">
<span lang="en"
>Guides are available here in English and Chinese, with links to their source on GitHub.
Detailed technical references are in English.</span
><span lang="zh-CN">使用和部署教程提供中英文版本,可直接在文档中心阅读,并前往 GitHub 参与修改。详细技术参考为英文。</span>
</p>
</div>
</section>
</main>
<footer class="site-footer wrap">
<div class="footer-identity">
<svg aria-hidden="true"><use href="#tv-mark" /></svg
><span>Piik<span class="identity-dot" aria-hidden="true">.</span></span>
<p><span lang="en">Share the good stuff.</span><span lang="zh-CN">来,看点好康的。</span></p>
</div>
<div class="footer-links">
<a href="./docs/?lang=en" data-doc-page=""
><span lang="en">Documentation</span><span lang="zh-CN">文档中心</span></a
><a href="./docs/troubleshooting.html?lang=en" data-doc-page="troubleshooting.html"
><span lang="en">Troubleshooting</span><span lang="zh-CN">问题排查</span></a
><a href="https://github.com/TNTcraftHIM/Piik"
><span lang="en">Source on GitHub</span><span lang="zh-CN">GitHub 源码</span
><span aria-hidden="true"> ↗</span></a
><a href="https://github.com/TNTcraftHIM/Piik/blob/main/LICENSE"
><span lang="en">MIT license</span><span lang="zh-CN">MIT 许可证</span></a
>
</div>
<details class="display-settings" id="display-settings" hidden>
<summary><span lang="en">Display settings</span><span lang="zh-CN">显示设置</span></summary>
<label>
<input id="reduce-motion" type="checkbox" aria-describedby="display-motion-help" />
<span lang="en">Reduce motion</span><span lang="zh-CN">减少动态</span>
</label>
<p id="display-motion-help">
<span lang="en">Keep illustrations still and stop rotating captions.</span
><span lang="zh-CN">插画保持静止,短句停止轮换。</span>
</p>
<p id="display-motion-system" hidden>
<span lang="en">Enabled by your system setting.</span><span lang="zh-CN">已跟随系统减少动态。</span>
</p>
</details>
<p class="footer-note">
<span lang="en">Piik’s own code is MIT-licensed. Contributions are welcome.</span
><span lang="zh-CN">Piik 自有代码采用 MIT 许可,欢迎参与贡献。</span>
</p>
</footer>
</body>
</html>