2台の端末で遊びます
QRを映す画面(PCやタブレット)と、読み取るスマホを用意してください。アプリのインストールやアカウント登録は要りません。
QRを映す画面
スマホ
01
デモを開く画面
ピクセル調のQRだけが表示されます。開くたびに新しいセッションになります。
02
標準カメラで読み取るスマホ
出てきたURLをタップすると、入力ページが開きます。
03
QRが崩れ出す画面
読み取りを検知した瞬間、QRのピクセルが散らばってノイズに変わります。
04
キーワードを送るスマホ
デモ画面の [ 使い方 ] に出ているキーワードを入れて [ send ] を押します。
05
文字に収束する画面
ノイズが集まって、合っていれば complete、違えば Error の文字になります。
仕組み
読み取りの検知もキーワードの受け渡しも、ブラウザだけで完結しています。
-
画面ごとのセッション
デモを開くたびに推測しにくいIDを作り、QRのURLに埋め込みます。複数の画面で同時に遊んでも混ざりません。
-
ntfy.shで中継
スマホがページを開くと、そのIDの宛先に通知を送ります。画面側はその通知を待ち受けて演出を始めます。
-
静的HTMLだけ
サーバー側の処理もビルドも使わず、Cloudflare Workers で静的ファイルとして配信しています。Android Chrome と iOS Safari で確認しています。