okooooooo/Piik
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d76e94eb715cdeb89e4bb742d9174bf776b2f3ae
Piik/site/index.html
T
AAA cdd503a98d feat: improve feedback and App lifecycle reliability (#404) 
Waiting feedback and tooltips now share consistent presentation lifecycles, while App shutdown and native-media operation failures stay within their owning session or output. This phase also consolidates the project standards and publishes searchable English/Chinese reader documentation alongside the homepage.

Validation: repository hygiene and Markdown links; TypeScript, 971 Web tests and production build; website/documentation build; Go tests, vet and Windows/Linux builds with Windows capture checks; desktop/mobile UI and documentation review. Linux race, container and three-platform packaging checks run in the release pipeline. Physical macOS/Linux capture and broader network coverage remain outside this acceptance.

The owner approved v1.4.0 publication. Existing empty-source, Windows URL-handler and public-invitation timeout reports remain tracked; this release makes no claim to resolve those device/network reports. The Windows capture-border request is next-phase work.

## Release notes

### 中文

这是一次以稳定性和交互一致性为重点的功能更新。等待与提示更有反馈，App 启动、原生分享和连接恢复的边界处理得到改善，使用与部署指南也有了统一的文档中心。

#### 新增与改进

- 欢迎语、等待短句和六类可轮换的标签页标题共用一致的显示规则。等待短句从一开始就出现，并在停留时轮换；明确的错误与操作提示保持固定。
- 房间准入等漫画采用更克制的小人物与循环动效。改进 tooltip 的定位与指向，减少对播放器的遮挡；状态、图标和文案保持相同含义。
- 新增中英文文档中心，提供搜索、手机目录、使用教程、问题排查与自部署指南。官网 FAQ 聚焦开始使用前的问题，详细排查统一进入文档中心。

#### 修复

- 使用 `--local` 启动不再清空已保存的 Piik 站点地址。
- 打开系统浏览器不再阻塞 App 的退出流程；改进临时公网邀请、终端和诊断导出在关闭时的清理及错误反馈。
- 单条原生媒体连接的操作失败不再被误判为整个会话的协议错误；重复停止分享保持幂等。
- 修复连接替换、转发停止和异常退出时的部分资源清理问题，避免迟到结果影响当前连接。
- Windows 原生采集中，单个输出的编码错误只结束对应输出；共享采集源本身的错误仍会结束分享。

#### 升级与已知边界

本次保持现有协议版本与配置格式。更新 App 或自托管 Server 后，重新打开页面即可使用对应的新界面。

个别设备的空窗口列表、Windows 浏览器启动异常，以及 Linux 编码输出的故障隔离仍在跟进。macOS/Linux 的物理采集和更广泛的公网网络场景仍需实机验证；本次不宣称这些问题已经解决，也不承诺所有网络都能直连。

### English

This feature update focuses on stability and consistent feedback. Waiting states are easier to follow, App startup and native sharing handle several failure cases more reliably, and the new documentation center brings usage and deployment guides together.

#### New and improved

- Welcome lines, waiting captions and six groups of rotating tab titles follow one presentation lifecycle. Waiting captions appear immediately and rotate while visible; actionable errors and instructions remain fixed.
- Room-admission comics use restrained characters and looping motion. Tooltips point more accurately to their controls and interfere less with the player, with consistent meanings across illustrations, icons and copy.
- A new English/Chinese documentation center includes search, mobile navigation, usage guides, troubleshooting and self-hosting. The homepage FAQ covers questions before getting started and links to the documentation for detailed help.

#### Fixes

- Starting with `--local` no longer clears a saved Piik site address.
- Opening the system browser no longer blocks App shutdown. Temporary public invitations, the terminal and diagnostic exports handle cleanup and exit errors more consistently.
- An operation failure on one native media connection no longer becomes a protocol failure for the entire session. Repeated stop-sharing requests are safe.
- Fixed cleanup cases during connection replacement, relay shutdown and unexpected exits, preventing late results from affecting the current connection.
- On Windows, an encoder failure for one native output stops that output only. A failure of the shared capture source still ends sharing.

#### Updating and known limits

Protocol versions and configuration formats are unchanged. After updating the App or your self-hosted Server, reopen the page to use its updated interface.

Empty source lists on some devices, Windows browser-launch failures and Linux output-failure isolation remain under investigation. Physical macOS/Linux capture and broader public-network coverage still need device testing; this update does not claim to resolve those cases or guarantee a direct connection on every network.
2026-09-16 13:13:06 +08:00

917 lines
52 KiB
HTML
Raw 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="#faq">FAQ</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">Friends join from a phone or computer.<br />No installation needed to watch.</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 on a computer.</span
><span lang="zh-CN">在电脑上打开在线版。</span></strong
>
<p>
<span lang="en"
>Visit <a href="https://demo.piik.tv">demo.piik.tv</a> in a desktop browser that supports screen sharing.
</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>, choose a window, then select
<strong>Copy invite link</strong>.</span
><span lang="zh-CN"
>点击<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>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>，再选择具体画面和声音。</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"
>The macOS and Linux apps have not yet been tested on physical devices. Test reports are welcome on
<a href="https://github.com/TNTcraftHIM/Piik/issues">GitHub Issues</a>.
On macOS, native capture requires Apple silicon and 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 原生采集需要 Apple 芯片和 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.
The macOS and Linux apps have not yet been tested on physical devices; 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 an existing Piik site, 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. Browser and operating-system support varies; viewers may need to press Play and turn on
the video’s sound.</span
><span lang="zh-CN"
>可以，前提是选择的画面来源和采集方式支持声音。选择分享内容时，检查声音选项。浏览器和系统支持有所不同；观众可能需要先点播放，再打开视频声音。</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">More questions?</span><span lang="zh-CN">还有其他问题？</span></p>
<a class="text-link" href="./docs/?lang=en" data-doc-page="">
<span lang="en">Browse guides and 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>
<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>
<a href="https://github.com/TNTcraftHIM/Piik/releases/latest"><span lang="en">Release notes</span><span lang="zh-CN">版本说明</span></a>
</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>
<p>
<span lang="en">For x64 PCs.</span><span lang="zh-CN">适用于 x64 电脑。</span>
</p>
<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>
<p>
<span lang="en">Apple silicon. Native capture needs macOS 13+.</span
><span lang="zh-CN">适用于 Apple 芯片。原生采集需 macOS 13 及以上。</span>
</p>
<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
>
</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>
<p>
<span lang="en">For x64 PCs.</span><span lang="zh-CN">适用于 x64 电脑。</span>
</p>
<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">
<div class="download-links">
<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>
<a class="text-link" href="#guide-app"><span lang="en">Piik App setup guide</span><span lang="zh-CN">Piik App 使用教程</span><span aria-hidden="true"> →</span></a>
</div>
<p><span lang="en">The macOS and Linux apps have not yet been tested on physical devices. 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 x64 server with your own domain. The deployment guide covers
Docker Compose, server packages, HTTPS and network setup.</span
><span lang="zh-CN"
>用 Linux x64 服务器和自己的域名，搭一个长期可用的 Piik 站点。
部署指南包含 Docker Compose、服务端程序、HTTPS 与网络配置。</span
>
</p>
<a class="docs-index" href="./docs/self-hosting.html" lang="en">Start self-hosting<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="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>
Reference in new issue View Git Blame Copy Permalink