{"id":920004,"date":"2026-06-22T03:00:00","date_gmt":"2026-06-21T18:00:00","guid":{"rendered":"https:\/\/yuaworks.com\/?page_id=920004"},"modified":"2026-06-22T03:11:12","modified_gmt":"2026-06-21T18:11:12","slug":"yuaworks-play","status":"publish","type":"page","link":"https:\/\/yuaworks.com\/en\/yuaworks-play\/","title":{"rendered":"Streaming Web Apps"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   YuaWorks Play Page\n   Fixed Page Scoped CSS\n   Scope: .ywtool-page-play\n========================================================= *\/\n\n.ywtool-page-play {\n  --play-line: rgba(180,200,230,.18);\n  --play-line-strong: rgba(79,195,255,.34);\n  --play-text: #e8edf5;\n  --play-muted: #a9b4c3;\n  --play-dim: #7f8b9a;\n  --play-accent: #4fc3ff;\n  --play-accent-2: #7a6cff;\n  --play-warm: #dfcfaa;\n  --play-radius: 14px;\n\n  width: min(980px, calc(100% - 32px));\n  margin: 0 auto;\n  padding: 120px 0 90px;\n  color: var(--play-text);\n  font-family: \"Noto Sans JP\", \"Hiragino Sans\", \"Yu Gothic\", \"Meiryo\", sans-serif;\n  line-height: 1.9;\n}\n\n.ywtool-page-play * {\n  box-sizing: border-box;\n}\n\n.ywtool-page-play a {\n  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease, opacity .2s ease;\n}\n\n.ywtool-page-play .ywtool-doc-head {\n  margin-bottom: 54px;\n  padding-bottom: 30px;\n  border-bottom: 1px solid var(--play-line);\n}\n\n.ywtool-page-play .ywtool-kicker {\n  margin: 0 0 12px;\n  color: var(--play-accent);\n  font-family: \"SFMono-Regular\", \"Consolas\", \"Menlo\", monospace;\n  font-size: 11px;\n  letter-spacing: .16em;\n  line-height: 1.6;\n}\n\n.ywtool-page-play h1,\n.ywtool-page-play h2,\n.ywtool-page-play h3 {\n  color: #fff;\n  letter-spacing: .04em;\n}\n\n.ywtool-page-play h1 {\n  margin: 0 0 20px;\n  font-size: clamp(34px, 5vw, 54px);\n  line-height: 1.3;\n  font-weight: 700;\n}\n\n.ywtool-page-play h2 {\n  margin: 0 0 14px;\n  font-size: clamp(22px, 3.2vw, 30px);\n  line-height: 1.45;\n  font-weight: 700;\n}\n\n.ywtool-page-play h3 {\n  margin: 0 0 8px;\n  font-size: 17px;\n  line-height: 1.6;\n  font-weight: 700;\n}\n\n.ywtool-page-play p {\n  margin: 0 0 18px;\n  color: var(--play-muted);\n  font-size: 15px;\n  line-height: 2;\n}\n\n.ywtool-page-play p:last-child {\n  margin-bottom: 0;\n}\n\n.ywtool-page-play .ywtool-head-actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 14px;\n  margin-top: 28px;\n}\n\n.ywtool-page-play .ywtool-section {\n  margin-top: 58px;\n}\n\n.ywtool-page-play .ywtool-section-head {\n  margin-bottom: 24px;\n}\n\n.ywtool-page-play .ywtool-tool-list {\n  display: grid;\n  gap: 18px;\n}\n\n.ywtool-page-play .ywtool-tool-row {\n  display: grid;\n  grid-template-columns: 64px 1fr;\n  gap: 22px;\n  padding: 28px;\n  border: 1px solid var(--play-line);\n  border-radius: var(--play-radius);\n  background:\n    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018)),\n    rgba(8,10,15,.42);\n}\n\n.ywtool-page-play .ywtool-tool-row:hover {\n  border-color: var(--play-line-strong);\n}\n\n.ywtool-page-play .ywtool-row-number {\n  color: rgba(255,255,255,.28);\n  font-family: \"SFMono-Regular\", \"Consolas\", \"Menlo\", monospace;\n  font-size: 22px;\n  font-weight: 700;\n  line-height: 1.2;\n}\n\n.ywtool-page-play .ywtool-row-body {\n  min-width: 0;\n}\n\n.ywtool-page-play .ywtool-tool-label {\n  margin-bottom: 8px;\n  color: var(--play-accent);\n  font-family: \"SFMono-Regular\", \"Consolas\", \"Menlo\", monospace;\n  font-size: 11px;\n  letter-spacing: .14em;\n}\n\n.ywtool-page-play .ywtool-check-list {\n  display: grid;\n  gap: 12px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.ywtool-page-play .ywtool-check-list li {\n  position: relative;\n  padding: 16px 18px 16px 42px;\n  border: 1px solid var(--play-line);\n  border-radius: 12px;\n  background: rgba(255,255,255,.025);\n  color: var(--play-muted);\n  font-size: 14px;\n  line-height: 1.9;\n}\n\n.ywtool-page-play .ywtool-check-list li::before {\n  content: \"\u2713\";\n  position: absolute;\n  left: 18px;\n  top: 16px;\n  color: var(--play-accent);\n  font-weight: 700;\n}\n\n.ywtool-page-play .ywtool-note-section {\n  padding: 28px;\n  border: 1px solid var(--play-line-strong);\n  border-radius: var(--play-radius);\n  background:\n    linear-gradient(180deg, rgba(79,195,255,.07), rgba(255,255,255,.018)),\n    rgba(8,10,15,.48);\n}\n\n.ywtool-page-play .ywtool-note-section + .ywtool-note-section {\n  border-color: rgba(183,160,106,.28);\n  background:\n    linear-gradient(180deg, rgba(183,160,106,.07), rgba(255,255,255,.018)),\n    rgba(8,10,15,.48);\n}\n\n.ywtool-page-play .ywtool-btn,\n.ywtool-page-play a.ywtool-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 42px;\n  padding: 9px 18px;\n  border-radius: 6px;\n  border: 1px solid rgba(79,195,255,.42);\n  background: rgba(79,195,255,.08);\n  color: #eaf7ff !important;\n  text-decoration: none;\n  font-size: 13px;\n  font-weight: 700;\n  letter-spacing: .06em;\n}\n\n.ywtool-page-play .ywtool-btn:hover,\n.ywtool-page-play a.ywtool-btn:hover {\n  transform: translateY(-1px);\n  background: rgba(79,195,255,.13);\n  border-color: rgba(79,195,255,.62);\n}\n\n.ywtool-page-play .ywtool-btn.secondary,\n.ywtool-page-play a.ywtool-btn.secondary {\n  border-color: rgba(180,200,230,.24);\n  background: rgba(255,255,255,.035);\n  color: var(--play-text) !important;\n}\n\n.ywtool-page-play .ywtool-link,\n.ywtool-page-play a.ywtool-link {\n  color: var(--play-accent) !important;\n  text-decoration: none;\n  border-bottom: 1px solid rgba(79,195,255,.34);\n  font-size: 13px;\n  line-height: 1.8;\n}\n\n.ywtool-page-play .ywtool-link:hover,\n.ywtool-page-play a.ywtool-link:hover {\n  color: #fff !important;\n  border-color: rgba(255,255,255,.55);\n}\n\n@media (max-width: 768px) {\n  .ywtool-page-play {\n    width: min(100% - 26px, 560px);\n    padding: 90px 0 70px;\n  }\n\n  .ywtool-page-play .ywtool-doc-head {\n    margin-bottom: 40px;\n  }\n\n  .ywtool-page-play .ywtool-section {\n    margin-top: 46px;\n  }\n\n  .ywtool-page-play .ywtool-head-actions {\n    align-items: stretch;\n    flex-direction: column;\n  }\n\n  .ywtool-page-play .ywtool-btn,\n  .ywtool-page-play a.ywtool-btn {\n    width: 100%;\n  }\n\n  .ywtool-page-play .ywtool-link,\n  .ywtool-page-play a.ywtool-link {\n    width: fit-content;\n  }\n\n  .ywtool-page-play .ywtool-tool-row {\n    grid-template-columns: 1fr;\n    gap: 14px;\n    padding: 24px 20px;\n  }\n\n  .ywtool-page-play .ywtool-row-number {\n    font-size: 15px;\n    color: var(--play-accent);\n  }\n\n  .ywtool-page-play .ywtool-note-section {\n    padding: 24px 20px;\n  }\n}\n<\/style>\n\n<div class=\"ywtool-page-play\">\n  <section class=\"ywtool-doc-head\">\n    <p class=\"ywtool-kicker\">YUAWORKS PLAY<\/p>\n    <h1>Streaming Web Apps<\/h1>\n    <p>YuaWorks Play provides browser-based web apps for stream events and viewer participation, such as bingo, quizzes, and participation lobbies.<\/p>\n    <p>Tool descriptions are provided on play.yuaworks.com, and the actual apps are provided on app.play.yuaworks.com.<\/p>\n\n    <div class=\"ywtool-head-actions\">\n      <a class=\"ywtool-btn\" href=\"https:\/\/play.yuaworks.com\/\" target=\"_blank\" rel=\"noopener\">Open YuaWorks Play<\/a>\n      <a class=\"ywtool-link\" href=\"https:\/\/app.play.yuaworks.com\/\" target=\"_blank\" rel=\"noopener\">Open app<\/a>\n      <a class=\"ywtool-link\" href=\"\/en\/stream-tools\/\">Back to Streaming Tools<\/a>\n    <\/div>\n  <\/section>\n\n  <section class=\"ywtool-section\">\n    <div class=\"ywtool-section-head\">\n      <p class=\"ywtool-kicker\">TOOLS<\/p>\n      <h2>Available tools<\/h2>\n      <p>These web apps can be used for viewer participation events and for showing progress on your stream screen.<\/p>\n    <\/div>\n\n    <div class=\"ywtool-tool-list small\">\n      <article class=\"ywtool-tool-row\">\n        <div class=\"ywtool-row-number\">01<\/div>\n        <div class=\"ywtool-row-body\">\n          <p class=\"ywtool-tool-label\">BINGO<\/p>\n          <h2>Streaming Bingo<\/h2>\n          <p>A bingo tool for streams that supports participant registration, number drawing, reach and bingo status, prize claiming, and OBS display.<\/p>\n        <\/div>\n      <\/article>\n\n      <article class=\"ywtool-tool-row\">\n        <div class=\"ywtool-row-number\">02<\/div>\n        <div class=\"ywtool-row-body\">\n          <p class=\"ywtool-tool-label\">QUIZ<\/p>\n          <h2>Streaming Quiz<\/h2>\n          <p>A quiz tool for streams that supports question creation, participant intake, answer submission, answer aggregation, correct answer display, ranking display, and OBS display.<\/p>\n        <\/div>\n      <\/article>\n\n      <article class=\"ywtool-tool-row\">\n        <div class=\"ywtool-row-number\">03<\/div>\n        <div class=\"ywtool-row-body\">\n          <p class=\"ywtool-tool-label\">LOBBY<\/p>\n          <h2>Participation Lobby<\/h2>\n          <p>A lobby management tool that can show an in-game password only to selected participants during participation-based streams.<\/p>\n        <\/div>\n      <\/article>\n    <\/div>\n  <\/section>\n\n  <section class=\"ywtool-section\">\n    <div class=\"ywtool-section-head\">\n      <p class=\"ywtool-kicker\">USE CASE<\/p>\n      <h2>When to use<\/h2>\n    <\/div>\n\n    <ul class=\"ywtool-check-list\">\n      <li>You want to run viewer-participation bingo or quiz events on stream<\/li>\n      <li>You want to use OBS display URLs to show progress on the stream screen<\/li>\n      <li>You want to show a game password only to selected participants instead of making it public<\/li>\n      <li>You want to create and manage stream event rooms from a browser<\/li>\n    <\/ul>\n  <\/section>\n\n  <section class=\"ywtool-section ywtool-note-section\">\n    <p class=\"ywtool-kicker\">YUALIVELOG LINK<\/p>\n    <h2>YuaLiveLog integration<\/h2>\n    <p>YuaLiveLog can retrieve room information from bingo, quiz, and participation lobby rooms created in YuaWorks Play, then associate that information with a stream session.<\/p>\n    <p>The basic flow is to create the event room in YuaWorks Play, then use YuaLiveLog to keep the room information and URLs as part of the stream record.<\/p>\n    <p>Event operation is handled on the YuaWorks Play side, while overall stream records and management are handled on the YuaLiveLog side.<\/p>\n\n    <div class=\"ywtool-head-actions\">\n      <a class=\"ywtool-btn secondary\" href=\"\/en\/yualivelog\/\">View YuaLiveLog<\/a>\n      <a class=\"ywtool-link\" href=\"https:\/\/play.yuaworks.com\/\" target=\"_blank\" rel=\"noopener\">Open YuaWorks Play<\/a>\n    <\/div>\n  <\/section>\n\n  <section class=\"ywtool-section ywtool-note-section\">\n    <p class=\"ywtool-kicker\">NOTICE<\/p>\n    <h2>Before use<\/h2>\n    <p>Before using these apps in an actual stream, create a test room and check participation, answer submission, number drawing, OBS display, and other functions.<\/p>\n    <p>Management URLs are for the streamer. Please do not share them with third parties.<\/p>\n  <\/section>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>YUAWORKS PLAY Streaming Web Apps YuaWorks Play provides browser-based web apps for stream events and viewer participation, such as bingo, quizzes, and participation lobbies. Tool descriptions are provided on play.yuaworks.com, and the actual apps are provided on app.play.yuaworks.com. Open YuaWorks Play Open app Back to Streaming Tools TOOLS Available tools These web apps can be used for viewer participation events and for showing progress on your stream screen. 01 BINGO Streaming Bingo A bingo tool for streams that supports participant&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_locale":"en_US","_original_post":"https:\/\/yuaworks.com\/?page_id=910004","footnotes":""},"class_list":["post-920004","page","type-page","status-publish","hentry","en-US"],"_links":{"self":[{"href":"https:\/\/yuaworks.com\/wp-json\/wp\/v2\/pages\/920004","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yuaworks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yuaworks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yuaworks.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yuaworks.com\/wp-json\/wp\/v2\/comments?post=920004"}],"version-history":[{"count":2,"href":"https:\/\/yuaworks.com\/wp-json\/wp\/v2\/pages\/920004\/revisions"}],"predecessor-version":[{"id":920012,"href":"https:\/\/yuaworks.com\/wp-json\/wp\/v2\/pages\/920004\/revisions\/920012"}],"wp:attachment":[{"href":"https:\/\/yuaworks.com\/wp-json\/wp\/v2\/media?parent=920004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}