[{"data":1,"prerenderedAt":628},["ShallowReactive",2],{"docs-en-\u002Fdocs\u002Fsdk\u002Fmulti-display":3},{"id":4,"title":5,"author":6,"body":7,"date":6,"description":620,"extension":621,"meta":622,"navigation":623,"path":624,"seo":625,"stem":626,"tags":6,"__hash__":627},"content_en\u002Fdocs\u002Fsdk\u002Fmulti-display.md","Multi-Display Video Walls",null,{"type":8,"value":9,"toc":607},"minimark",[10,14,18,23,35,46,49,53,58,67,71,90,94,115,119,125,134,302,308,369,373,376,391,397,401,499,503,546,553,557,603],[11,12,5],"h1",{"id":13},"multi-display-video-walls",[15,16,17],"p",{},"XiboPlayer supports synchronized multi-display playback. Multiple screens switch layouts simultaneously with \u003C8ms precision — coordinated over LAN with automatic discovery.",[19,20,22],"h2",{"id":21},"architecture","Architecture",[15,24,25,26,30,31,34],{},"One display is the ",[27,28,29],"strong",{},"lead",", the rest are ",[27,32,33],{},"followers",":",[36,37,42],"pre",{"className":38,"code":40,"language":41},[39],"language-text","Lead Player (Screen 1)\n  └── Proxy Server + WebSocket Sync Relay\n        ├── Follower 1 (Screen 2) via WebSocket\n        ├── Follower 2 (Screen 3) via WebSocket\n        └── Follower 3 (Screen 4) via WebSocket\n","text",[43,44,40],"code",{"__ignoreMap":45},"",[15,47,48],{},"The lead's proxy server includes a built-in WebSocket relay. Followers connect over LAN — no additional infrastructure needed.",[19,50,52],{"id":51},"setup-4-display-video-wall","Setup: 4-display video wall",[54,55,57],"h3",{"id":56},"_1-install-and-register-each-display","1. Install and register each display",[15,59,60,61,66],{},"Install the player on each machine and connect to the CMS. See ",[62,63,65],"a",{"href":64},"\u002Fdocs\u002Fgetting-started\u002Fconnect-display","Connect a Display",".",[54,68,70],{"id":69},"_2-create-a-sync-group-in-cms","2. Create a Sync Group in CMS",[72,73,74,81,87],"ol",{},[75,76,77,78],"li",{},"Go to ",[27,79,80],{},"Displays → Sync Groups → Add Sync Group",[75,82,83,84],{},"Set one display as ",[27,85,86],{},"Lead",[75,88,89],{},"Add all 4 displays as members",[54,91,93],{"id":92},"_3-schedule-synchronized-content","3. Schedule synchronized content",[72,95,96,101,112],{},[75,97,98],{},[27,99,100],{},"Schedule → Add Event",[75,102,103,104,107,108,111],{},"Set ",[27,105,106],{},"Event Type"," to ",[27,109,110],{},"Synchronised Event"," (not a regular event)",[75,113,114],{},"Assign to the display group matching your sync group",[54,116,118],{"id":117},"_4-configure-choreography-optional","4. Configure choreography (optional)",[15,120,121,122,34],{},"Set grid positions in each display's ",[43,123,124],{},"config.json",[15,126,127,129,130,133],{},[27,128,86],{}," (",[43,131,132],{},"~\u002F.config\u002Fxiboplayer\u002Felectron\u002Fconfig.json","):",[36,135,139],{"className":136,"code":137,"language":138,"meta":45,"style":45},"language-json shiki shiki-themes material-theme-lighter github-light github-dark","{\n  \"sync\": {\n    \"topology\": { \"x\": 0, \"y\": 0 },\n    \"choreography\": \"diagonal-tl\",\n    \"staggerMs\": 200,\n    \"gridCols\": 2,\n    \"gridRows\": 2\n  }\n}\n","json",[43,140,141,150,169,217,241,258,275,290,296],{"__ignoreMap":45},[142,143,146],"span",{"class":144,"line":145},"line",1,[142,147,149],{"class":148},"sP7_E","{\n",[142,151,153,157,161,164,166],{"class":144,"line":152},2,[142,154,156],{"class":155},"s39Yj","  \"",[142,158,160],{"class":159},"sseR_","sync",[142,162,163],{"class":155},"\"",[142,165,34],{"class":148},[142,167,168],{"class":148}," {\n",[142,170,172,175,179,181,183,186,189,193,195,197,200,203,205,208,210,212,214],{"class":144,"line":171},3,[142,173,174],{"class":155},"    \"",[142,176,178],{"class":177},"sZMiF","topology",[142,180,163],{"class":155},[142,182,34],{"class":148},[142,184,185],{"class":148}," {",[142,187,188],{"class":155}," \"",[142,190,192],{"class":191},"srdBf","x",[142,194,163],{"class":155},[142,196,34],{"class":148},[142,198,199],{"class":191}," 0",[142,201,202],{"class":148},",",[142,204,188],{"class":155},[142,206,207],{"class":191},"y",[142,209,163],{"class":155},[142,211,34],{"class":148},[142,213,199],{"class":191},[142,215,216],{"class":148}," },\n",[142,218,220,222,225,227,229,232,236,238],{"class":144,"line":219},4,[142,221,174],{"class":155},[142,223,224],{"class":177},"choreography",[142,226,163],{"class":155},[142,228,34],{"class":148},[142,230,188],{"class":231},"sjJ54",[142,233,235],{"class":234},"s_sjI","diagonal-tl",[142,237,163],{"class":231},[142,239,240],{"class":148},",\n",[142,242,244,246,249,251,253,256],{"class":144,"line":243},5,[142,245,174],{"class":155},[142,247,248],{"class":177},"staggerMs",[142,250,163],{"class":155},[142,252,34],{"class":148},[142,254,255],{"class":191}," 200",[142,257,240],{"class":148},[142,259,261,263,266,268,270,273],{"class":144,"line":260},6,[142,262,174],{"class":155},[142,264,265],{"class":177},"gridCols",[142,267,163],{"class":155},[142,269,34],{"class":148},[142,271,272],{"class":191}," 2",[142,274,240],{"class":148},[142,276,278,280,283,285,287],{"class":144,"line":277},7,[142,279,174],{"class":155},[142,281,282],{"class":177},"gridRows",[142,284,163],{"class":155},[142,286,34],{"class":148},[142,288,289],{"class":191}," 2\n",[142,291,293],{"class":144,"line":292},8,[142,294,295],{"class":148},"  }\n",[142,297,299],{"class":144,"line":298},9,[142,300,301],{"class":148},"}\n",[15,303,304,307],{},[27,305,306],{},"Followers"," only need their grid position:",[36,309,311],{"className":136,"code":310,"language":138,"meta":45,"style":45},"{ \"sync\": { \"topology\": { \"x\": 1, \"y\": 0 } } }\n",[43,312,313],{"__ignoreMap":45},[142,314,315,318,320,322,324,326,328,330,332,334,336,338,340,342,344,346,349,351,353,355,357,359,361,364,366],{"class":144,"line":145},[142,316,317],{"class":148},"{",[142,319,188],{"class":155},[142,321,160],{"class":159},[142,323,163],{"class":155},[142,325,34],{"class":148},[142,327,185],{"class":148},[142,329,188],{"class":155},[142,331,178],{"class":177},[142,333,163],{"class":155},[142,335,34],{"class":148},[142,337,185],{"class":148},[142,339,188],{"class":155},[142,341,192],{"class":191},[142,343,163],{"class":155},[142,345,34],{"class":148},[142,347,348],{"class":191}," 1",[142,350,202],{"class":148},[142,352,188],{"class":155},[142,354,207],{"class":191},[142,356,163],{"class":155},[142,358,34],{"class":148},[142,360,199],{"class":191},[142,362,363],{"class":148}," }",[142,365,363],{"class":148},[142,367,368],{"class":148}," }\n",[19,370,372],{"id":371},"auto-discovery-mdns","Auto-discovery (mDNS)",[15,374,375],{},"Followers discover the lead automatically via mDNS — no manual IP configuration:",[72,377,378,385,388],{},[75,379,380,381,384],{},"Lead publishes ",[43,382,383],{},"_xibo-sync._tcp"," via mDNS with the sync group ID",[75,386,387],{},"Followers browse for this service on each collection cycle",[75,389,390],{},"If mDNS times out (10s), falls back to CMS-provided IP",[15,392,393,396],{},[27,394,395],{},"Requirement",": all players on the same subnet (UDP 5353).",[19,398,400],{"id":399},"choreography-effects","Choreography effects",[402,403,404,417],"table",{},[405,406,407],"thead",{},[408,409,410,414],"tr",{},[411,412,413],"th",{},"Effect",[411,415,416],{},"Description",[418,419,420,431,445,458,476,489],"tbody",{},[408,421,422,428],{},[423,424,425],"td",{},[43,426,427],{},"simultaneous",[423,429,430],{},"All displays switch at once",[408,432,433,442],{},[423,434,435,438,439],{},[43,436,437],{},"wave-right"," \u002F ",[43,440,441],{},"wave-left",[423,443,444],{},"Horizontal sweep",[408,446,447,455],{},[423,448,449,438,452],{},[43,450,451],{},"wave-down",[43,453,454],{},"wave-up",[423,456,457],{},"Vertical sweep",[408,459,460,473],{},[423,461,462,438,464,438,467,438,470],{},[43,463,235],{},[43,465,466],{},"diagonal-tr",[43,468,469],{},"diagonal-bl",[43,471,472],{},"diagonal-br",[423,474,475],{},"Corner cascade",[408,477,478,486],{},[423,479,480,438,483],{},[43,481,482],{},"center-out",[43,484,485],{},"outside-in",[423,487,488],{},"Center or edge first",[408,490,491,496],{},[423,492,493],{},[43,494,495],{},"random",[423,497,498],{},"Random delay per display",[19,500,502],{"id":501},"transport-layers","Transport layers",[402,504,505,518],{},[405,506,507],{},[408,508,509,512,515],{},[411,510,511],{},"Transport",[411,513,514],{},"Scope",[411,516,517],{},"Use case",[418,519,520,533],{},[408,521,522,527,530],{},[423,523,524],{},[27,525,526],{},"BroadcastChannel",[423,528,529],{},"Same machine",[423,531,532],{},"Multiple tabs\u002Fwindows on one device",[408,534,535,540,543],{},[423,536,537],{},[27,538,539],{},"WebSocket relay",[423,541,542],{},"Cross-device LAN",[423,544,545],{},"Separate devices on the network",[15,547,548,549,552],{},"Selected automatically. BroadcastChannel for same-machine, WebSocket when ",[43,550,551],{},"relayUrl"," is set.",[19,554,556],{"id":555},"troubleshooting","Troubleshooting",[558,559,560,566,576,585],"ul",{},[75,561,562,565],{},[27,563,564],{},"Can't connect to relay",": Check firewall allows port 8765\u002F8766 between players",[75,567,568,571,572,575],{},[27,569,570],{},"mDNS not working",": Verify same subnet, check ",[43,573,574],{},"udp\u002F5353"," not blocked",[75,577,578,581,582,584],{},[27,579,580],{},"Layouts not syncing",": Must use ",[27,583,110],{}," type in CMS schedule",[75,586,587,590,591,593,594,593,596,593,598,593,600,602],{},[27,588,589],{},"No choreography",": Set ",[43,592,178],{},", ",[43,595,224],{},[43,597,248],{},[43,599,265],{},[43,601,282],{}," in lead config",[604,605,606],"style",{},"html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s39Yj, html code.shiki .s39Yj{--shiki-light:#39ADB5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sseR_, html code.shiki .sseR_{--shiki-light:#9C3EDA;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZMiF, html code.shiki .sZMiF{--shiki-light:#E2931D;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":45,"searchDepth":171,"depth":171,"links":608},[609,610,616,617,618,619],{"id":21,"depth":152,"text":22},{"id":51,"depth":152,"text":52,"children":611},[612,613,614,615],{"id":56,"depth":171,"text":57},{"id":69,"depth":171,"text":70},{"id":92,"depth":171,"text":93},{"id":117,"depth":171,"text":118},{"id":371,"depth":152,"text":372},{"id":399,"depth":152,"text":400},{"id":501,"depth":152,"text":502},{"id":555,"depth":152,"text":556},"Set up synchronized video walls with automatic discovery and choreography effects","md",{"order":171},true,"\u002Fdocs\u002Fsdk\u002Fmulti-display",{"title":5,"description":620},"docs\u002Fsdk\u002Fmulti-display","TKsN975yXJ1et29rJhNdgcobai5mW16DguumWqMXB7M",1775148109527]