← QR 스튜디오 모션 QR 실험실프로토타입

0.0s

1.00×

① 움직이는 QR도 스캔되나요?

  • 완성된 프레임은 확실히 스캔됩니다. 10가지 스타일 × 5가지 점 모양 모두에서 ‘완성’ 표시가 켜진 프레임은 100% 디코딩되었고, 잘못 읽힌 프레임은 0개였습니다.
  • 오류정정 H 덕분에 거의 완성된 직전·직후 프레임도 일부 읽히지만, 이 덤에 기대지 말고 유지 구간을 1.5초 이상(권장 2초 이상) 두세요. 휴대폰 카메라는 초점·노출을 잡는 데 보통 0.5–1.5초가 걸립니다.
  • 모서리 마커(파인더)와 정렬 패턴은 어떤 점 모양·색에서도 항상 한 덩어리로 또렷하게 그립니다. 낱개 점으로 그리면 인식률이 크게 떨어지는 것을 확인했습니다.
  • 가운데 로고는 jsQR 기준 QR 폭의 38%까지 읽혔지만, 실제 카메라의 여유를 두고 최대 28%로 제한했습니다.

② 이미지 효과는 어디까지 되나요?

  • 사진 → QR: 사진은 변하는 과정에만 쓰이고, 완성 프레임은 고른 점 색으로 정리되므로 어떤 사진이든 스캔이 보장됩니다. 가장 안전하면서 눈에 띄는 방식입니다.
  • 사진 점묘: 완성 상태에서도 사진 색이 남기 때문에 명암 보정이 핵심입니다. 페이지가 직접 완성 프레임을 원본·축소·카메라처럼 흐리게 만든 사본으로 디코딩해 보고, 실패하면 보정 단계를 0→3으로 올립니다. 측정 결과 밝은 사진은 보정 없이, 컬러풀하거나 어두운 사진과 실제 일러스트는 2단계에서 통과했습니다.
  • 한계: 칸 하나에 색 하나라서 사진은 가로 25–57칸 정도의 모자이크로만 보입니다. 얼굴이나 글자는 알아보기 어렵고, 어두운 사진은 밝은 칸이 회색빛으로 바뀝니다. 색이 강한 사진일수록 결과가 예쁩니다.
  • 로고 폭발: 로고의 투명하지 않은 부분에서 점을 뽑아 QR 자리로 날려 보냅니다. 배경이 투명한 PNG나 SVG 로고가 가장 잘 어울립니다.

③ 영상 저장

  • MP4: WebCodecs VideoEncoder + mp4-muxer로 프레임을 하나씩 오프라인 인코딩합니다. 실시간 녹화가 아니라서 정확히 30fps이고 탭을 앞에 둘 필요도 없습니다. H.264 인코더가 있으면 H.264(Chrome·Edge·Safari 16.4+), 없으면 VP9를 MP4에 담고, WebCodecs가 아예 없으면 실시간 녹화로 저장합니다.
  • WebM: MediaRecorder로 실시간 녹화합니다. Safari는 WebM 대신 MP4로 녹화됩니다.
  • 1:1, 9:16(스토리·릴스), 16:9 비율과 아래 문구가 영상과 PNG에 그대로 들어갑니다. 무료 버전 영상에는 QR 여백 바깥 구석에 작은 워터마크가 들어가고, Pro에서는 빠집니다. PNG는 언제나 깨끗합니다.

④ “카메라로 비추면 모션이 나타나는” AR

  • 기본 카메라 앱만으로는 불가능합니다. 카메라 앱은 QR에서 링크만 읽을 뿐 그 위에 그래픽을 그리지 못합니다.
  • 그래서 QR 스캔 → 웹페이지 열림 → getUserMedia로 카메라 켜기 → 매 프레임 jsQR로 네 모서리 찾기 → CSS matrix3d 원근 변환으로 모션 덧씌우기 순서로 동작합니다. 위의 미리보기가 정확히 이 방식이며, 이미지 효과도 그대로 덧씌워집니다.
  • iOS Safari·Android Chrome 모두 HTTPS에서 동작합니다. 모서리 추정이 프레임마다 흔들려 스무딩을 넣었고, 빠르게 움직이거나 QR이 작거나 반사가 심하면 추적이 끊깁니다.

① Does a moving QR scan?

  • Fully-formed frames scan reliably. Across 10 styles × 5 dot shapes, 100% of frames flagged “fully formed” decoded, with zero mis-reads.
  • Error correction H also lets some nearly-formed frames decode, but don't rely on that bonus — keep the hold at 1.5 s or more (2 s+ recommended). Phone cameras typically need 0.5–1.5 s to focus and lock.
  • Corner markers (finders) and alignment patterns are always drawn as crisp solid units, whatever the dot shape or color; drawing them as loose dots badly hurt detection in testing.
  • A center logo still decoded with jsQR up to 38% of the code's width; the slider stops at 28% to leave headroom for real cameras.

② How far do the image effects go?

  • Photo → QR: the photo appears only during the transition, and the formed frame settles to your dot color — so it scans with any photo. The safest eye-catcher.
  • Photo dots: photo colors stay in the formed frame, so contrast is everything. The page decodes its own formed frame at full size, downscaled, and as a blurred camera-like copy, and raises the boost from 0 to 3 until all pass. In testing, the bright photo needed no boost; the colorful and dark photos and real illustrations passed at boost 2.
  • Limits: one color per module, so the photo becomes a 25–57-cell mosaic. Faces and text won't be recognizable, and dark photos turn light cells grayish. Bold, colorful images look best.
  • Logo burst: dots are sampled from the opaque parts of your logo and fly into place. Logos on a transparent background (PNG or SVG) work best.

③ Video export

  • MP4: frames are encoded one by one, offline, with WebCodecs VideoEncoder + mp4-muxer — exact 30 fps, no need to keep the tab in front. It uses H.264 where an encoder exists (Chrome, Edge, Safari 16.4+), otherwise VP9 inside MP4, and falls back to real-time recording without WebCodecs.
  • WebM: recorded in real time with MediaRecorder; Safari records MP4 instead.
  • The 1:1, 9:16 (Story / Reels) and 16:9 frames and the caption go into both video and PNG. Free videos carry a small watermark in a corner outside the quiet zone; Pro removes it. PNGs are always clean.

④ “Point the camera and the motion appears” (AR)

  • Not possible with the native camera app — it only reads the link from a QR and can't draw on top.
  • So the flow is: scan → a web page opens → it starts the camera with getUserMedia → jsQR finds the four corners every frame → the motion is drawn onto that quad with a CSS matrix3d perspective warp. The preview above does exactly this, image effects included.
  • Works in iOS Safari and Android Chrome over HTTPS. Corner estimates jitter frame to frame (smoothing is applied), and tracking drops with fast motion, small codes or glare.

① 動くQRコードでも読み取れる？

  • 完成したフレームは確実に読み取れます。10種類のスタイル × 5種類のドットの形すべてで、「完成」と判定されたフレームは100%デコードでき、誤読は0件でした。
  • 誤り訂正Hのおかげで完成直前・直後のフレームも一部読み取れますが、それに頼らず静止時間は1.5秒以上（おすすめは2秒以上）にしてください。スマホのカメラはピントと露出が合うまでに0.5〜1.5秒ほどかかります。
  • 角のマーカー（ファインダー）と位置合わせパターンは、どの形・色でも常にひとかたまりでくっきり描きます。ばらばらのドットで描くと認識率が大きく落ちることを確認しています。
  • 中央のロゴは jsQR ではQRの幅の38%まで読み取れましたが、実際のカメラに余裕を持たせて最大28%に制限しています。

② 画像エフェクトはどこまでできる？

  • 写真 → QR：写真は変化の途中だけに使い、完成フレームは選んだドットの色に落ち着くので、どんな写真でも読み取りが保証されます。いちばん安全で目を引く方法です。
  • フォトドット：完成状態にも写真の色が残るため、明暗の補正が鍵です。ページ自身が完成フレームを原寸・縮小・カメラのようにぼかしたコピーでデコードし、失敗すれば補正を0→3まで上げます。測定では明るい写真は補正なし、カラフルな写真・暗い写真・実際のイラストは補正2で合格しました。
  • 限界：1マスに1色なので、写真は横25〜57マスほどのモザイクになります。顔や文字は判別しにくく、暗い写真では明るいマスが灰色っぽくなります。色の鮮やかな画像ほどきれいに仕上がります。
  • ロゴバースト：ロゴの透明でない部分から点を取り出し、QRの位置へ飛ばします。背景が透明なPNGやSVGのロゴがいちばん映えます。

③ 動画の保存

  • MP4：WebCodecs の VideoEncoder と mp4-muxer で、1フレームずつオフラインでエンコードします。リアルタイム録画ではないので正確に30fpsになり、タブを前面に出しておく必要もありません。H.264 エンコーダーがあれば H.264（Chrome・Edge・Safari 16.4以降）、なければ VP9 を MP4 に格納し、WebCodecs がない環境ではリアルタイム録画で保存します。
  • WebM：MediaRecorder でリアルタイムに録画します。Safari では WebM の代わりに MP4 で録画されます。
  • 1:1、9:16（ストーリー・リール）、16:9 の比率と下のテキストは、動画にもPNGにもそのまま入ります。無料版の動画にはQRの余白の外側、隅に小さなウォーターマークが入り、Proでは入りません。PNGはいつでもウォーターマークなしです。

④ 「カメラを向けるとモーションが現れる」AR

  • 標準のカメラアプリだけではできません。カメラアプリはQRからリンクを読むだけで、その上に描画はできないからです。
  • そのため、QRを読み取る → ウェブページが開く → getUserMedia でカメラを起動 → 毎フレーム jsQR で四隅を検出 → CSS の matrix3d で遠近変形してモーションを重ねる、という流れになります。上のプレビューはまさにこの方式で、画像エフェクトもそのまま重なります。
  • iOS の Safari、Android の Chrome とも HTTPS で動作します。四隅の推定はフレームごとに揺れるため平滑化を入れていますが、速く動かしたり、QRが小さかったり、反射が強いと追跡が途切れます。

① 动态二维码也能扫描吗？

  • 完整成形的画面可以稳定扫描。在 10 种风格 × 5 种点形状下，被标记为“成形”的帧全部成功解码，误读为 0。
  • 得益于 H 级纠错，接近成形的前后几帧也有一部分能读出，但不要依赖这一点——停留时长请设为 1.5 秒以上（建议 2 秒以上）。手机摄像头对焦和测光通常需要 0.5–1.5 秒。
  • 无论点的形状和颜色如何，定位角和校正图形始终以完整的实心整体绘制。测试发现，把它们拆成零散的点会大幅降低识别率。
  • 用 jsQR 测试时，中心标志最大到二维码宽度的 38% 仍可识别；为给真实摄像头留出余量，滑块上限设为 28%。

② 图片特效能做到什么程度？

  • 照片 → 二维码：照片只出现在变化过程中，成形画面会统一为所选的点颜色，因此任何照片都能保证扫描。这是最稳妥又最吸睛的方式。
  • 照片点阵：成形后仍保留照片颜色，所以明暗对比是关键。页面会用原尺寸、缩小版和模拟摄像头的模糊版本对成形画面自行解码，若失败就把增强等级从 0 逐级提高到 3。测试中，明亮照片无需增强，多彩照片、暗色照片和真实插画在 2 级通过。
  • 局限：每个格子只有一种颜色，照片只能呈现为横向约 25–57 格的马赛克。人脸和文字难以辨认，暗色照片中的浅色格会偏灰。颜色越鲜明的图片效果越好。
  • 标志迸发：从标志的不透明部分取点，再飞向二维码的位置。透明背景的 PNG 或 SVG 标志效果最好。

③ 保存视频

  • MP4：用 WebCodecs 的 VideoEncoder 加 mp4-muxer 逐帧离线编码。不是实时录制，所以帧率精确为 30fps，也不必让标签页保持在前台。有 H.264 编码器时使用 H.264（Chrome、Edge、Safari 16.4 及以上），没有时把 VP9 封装进 MP4；完全不支持 WebCodecs 的环境则改为实时录制。
  • WebM：用 MediaRecorder 实时录制；Safari 会以 MP4 代替 WebM。
  • 1:1、9:16（快拍·短视频）、16:9 比例和底部文字会原样放进视频和 PNG。免费版视频会在二维码留白区之外的角落加一个小水印，Pro 版则没有。PNG 始终没有水印。

④ “用摄像头对准就出现动画”的 AR

  • 仅靠系统相机做不到。相机只会从二维码读出链接，无法在上面绘制图形。
  • 因此流程是：扫码 → 打开网页 → 用 getUserMedia 打开摄像头 → 每帧用 jsQR 找到四个角 → 通过 CSS matrix3d 透视变换叠加动画。上面的预览正是这种方式，图片特效也会一并叠加。
  • iOS Safari 和 Android Chrome 都可在 HTTPS 下运行。四角的估计每帧都会抖动，因此做了平滑处理；快速移动、二维码太小或反光严重时会跟丢。