2d:null 2e:["$","title",null,{"children":"OBS WebSocket | randName() | Observable"}] 33:T474,{ let ws, closed const connClosed = new Promise((resolve) => { closed = resolve }) const listen = (name, handler) => ws.addEventListener(name, (evt) => handler(evt.detail)) for await (const conn of obs) { if (conn.error) { yield md`\`Error: ${conn.error}. Retrying...\`` await Promises.delay(5000) } else { ws = conn.ws invalidation.then(() => conn.ws.close()) } } const ver = await obs.request('GetVersion') yield md`\`OBS Connected (OBS v${ver.obsStudioVersion}, WS v${ver.obsWebsocketVersion})\`` viewof currentScene.init(await obs.request('GetSceneList')) viewof sceneSources.init() listen('close', closed) listen('SwitchScenes', ({ sceneName }) => viewof currentScene.choose(sceneName)) listen('SceneItemVisibilityChanged', (d) => { const ss = mutable allSources.get(d.sceneName) ss.find((s) => s.id === d.itemId).render = d.itemVisible viewof sceneSources.update(d) }) // 'SourceMuteStateChanged' // 'SourceVolumeChanged' // ScenesChanged, SourceCreated, SourceDestroyed // 'SceneItemLockChanged' await connClosed yield md`\`Connection Closed\`` }34:T622,viewof sceneSources = { let sceneName const sel = html`` const list = html`

` const el = html`Scene Sources ${sel}${list}` function handleClick (e) { obs.request('SetSceneItemRender', { sceneName, source: this.name, render: this.checked }) } function init () { for (const s of allSources.keys()) { sel.add(html``) } } function show (name, native = false) { sceneName = name list.innerHTML = '' const sources = mutable allSources.get(name) sources.forEach((s) => { const n = s.name const id = `s-${name}-${s.id}` const c = s.render ? ' checked' : '' const check = html`` check.addEventListener('click', handleClick) list.appendChild(html`

${check} ${n}

`) }) if (!native) { const options = sel.options for (let i = 0; i < options.length; ++i) { if (options[i].value === name) { sel.selectedIndex = i break } } } el.value = sources el.dispatchEvent(new CustomEvent('input')) return name } function update (u) { if (u.sceneName !== sceneName) return list.querySelector(`#s-${sceneName}-${u.itemId}`).checked = u.itemVisible } sel.addEventListener('input', () => show(sel.options[sel.selectedIndex].value, true)) return Object.assign(el, { init, update, show }) }35:T1001,create = { class OBSError extends Error { constructor (message) { super(message) this.name = 'OBSError' } } const ONCE = { once: true, passive: true } const camel = ([k, v]) => [k.replace(/-./g, (c) => c[1].toUpperCase()), v] const encoder = new TextEncoder('utf8') const sha = (data) => crypto.subtle.digest('SHA-256', encoder.encode(data)) const hash = async (data) => btoa(String.fromCharCode(...new Uint8Array(await sha(data)))) const makeSet = (s) => new Set(s.split(',')) const TO_KEBAB = 'scName,recFolder,profileName,withTransition,filenameFormatting' const SN_KEBAB = 'ResetSceneItem,GetSceneItemProperties,SetSceneItemProperties,' + 'SetSceneItemRender,SetPreviewScene,SetCurrentScene' const SOME_KEBAB = new Map([ ['sceneName', makeSet(SN_KEBAB)], ['transitionName', makeSet('SetCurrentTransition')], ]) function makeRequest (conn, id = 0) { const cache = new Map() const createRequest = (name) => { const kb = makeSet(TO_KEBAB) for (const [k, reqs] of SOME_KEBAB) { if (reqs.has(name)) kb.add(k) } function * entries (msgID, params) { yield ['request-type', name] yield ['message-id', msgID] if (params) { for (const [k, v] of Object.entries(params)) { yield [ kb.has(k) ? k.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : k, v ] } } } return async (params, msgID = '' + (++id)) => { conn.send(JSON.stringify(Object.fromEntries(entries(msgID, params)))) const r = (await new Promise((resolve) => { conn.addEventListener('msg-id-' + msgID, resolve, ONCE) })).detail if (r instanceof OBSError) { throw r } else { return r } } } const make = (name) => (cache.set(name, createRequest(name)).get(name)) return (name, params) => (cache.get(name) || make(name))(params) } return function (opts = {}) { const server = opts.server || 'ws://localhost:4444' const password = opts.password || '' const state = {} let isOpen const open = () => new Promise((resolve, reject) => { const ws = new WebSocket(server) const request = makeRequest(ws) ws.onerror = () => reject('Connection Failed') ws.onmessage = (evt) => { const { status, error, 'update-type': t, 'message-id': msgID, ...d } = JSON.parse(evt.data) const name = msgID ? 'msg-id-' + msgID : t const detail = error ? new OBSError(error) : Object.fromEntries(Object.entries(d).map(camel)) ws.dispatchEvent(new CustomEvent(name, { detail })) } ws.addEventListener('open', async () => { const r = await request('GetAuthRequired') if (r?.authRequired) { const { challenge, salt } = r const auth = await hash(await hash(password + salt) + challenge) try { await request('Authenticate', { auth }) } catch (e) { reject(e) } } resolve({ ws, request }) }, ONCE) }) const request = async (name, p) => { while (!state.ws) await new Promise((resolve) => { isOpen = resolve }) if (!state.ws.readyState) { await new Promise((resolve) => state.ws.addEventListener('open', resolve, ONCE)) } return await state.request(name, p) } return { request, async connect (retryDelay = 1000) { for await (const info of this) { if (info.error) { await new Promise((resolve) => setTimeout(resolve, retryDelay)) continue } return info } }, async * [Symbol.asyncIterator] () { while (true) { try { yield Object.assign(state, await open()) break } catch (error) { if (error instanceof OBSError) throw error yield { error } } } isOpen && isOpen() }, } } }36:[] 31:{"id":"9e0dc21f65dbdf9d","slug":"obs-websocket","title":"OBS WebSocket","thumbnail":"bad16b0b53613c90df415fa87565db35a0d7f9d1a8b6d738e6451f89d5e30410","access_level":"public","create_time":"$D2020-09-15T00:43:06.143Z","update_time":"$D2021-09-19T06:06:26.521Z","view_time":null,"first_public_time":"$D2020-09-20T10:22:38.705Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"af680361d1ea8ba5","login":"randname","name":"randName()","avatar_url":"https://avatars-next.observableusercontent.com/f16c819c73deae04aebd89cd214320d2b848d288cea0ed4487f835cc1b3e9c04","tier":"starter_2024"},"version":525,"publish_version":525,"role":null,"authored":false,"authors":[{"type":"individual","id":"6af62fd51a9b60df","login":"randname","name":"randName()","avatar_url":"https://avatars-next.observableusercontent.com/f16c819c73deae04aebd89cd214320d2b848d288cea0ed4487f835cc1b3e9c04","tier":null}],"members":[{"type":"individual","id":"6af62fd51a9b60df","login":"randname","name":"randName()","avatar_url":"https://avatars-next.observableusercontent.com/f16c819c73deae04aebd89cd214320d2b848d288cea0ed4487f835cc1b3e9c04","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"OBS WebSocket","cells":[{"id":0,"value":"md`# OBS WebSocket`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"viewof password = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"viewof currentScene = {\n const sel = html``\n const el = html`Current Scene ${sel}`\n function init ({ currentScene: current, scenes }) {\n sel.options.length = 0\n scenes.forEach(({ name, sources }) => {\n mutable allSources.set(name, sources)\n const s = name === current ? ' selected' : ''\n sel.add(html``)\n })\n el.value = current\n el.dispatchEvent(new CustomEvent('input'))\n }\n function choose (name) {\n const options = sel.options\n for (let i = 0; i < options.length; ++i) {\n if (options[i].value === name) {\n sel.selectedIndex = i\n sel.dispatchEvent(new CustomEvent('input'))\n break\n }\n }\n }\n sel.addEventListener('input', () => { el.value = sel.options[sel.selectedIndex].value })\n return Object.assign(el, { init, choose })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"{\n obs.request('SetCurrentScene', { sceneName: currentScene })\n viewof sceneSources.show(currentScene)\n return md`\\`Showing: ${currentScene}\\``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"mutable allSources = new Map()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"obs = create({ password })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"import { checkbox } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"