) => {
9 | try {
10 | const obs = getOBS();
11 | const response = await obs.call(method, params);
12 | console.log(`OBS Call: ${method}`, response);
13 | } catch (error) {
14 | console.error(`Error calling ${method}:`, error);
15 | }
16 | };
17 |
18 | if (!isConnected) {
19 | return Not connected to OBS
;
20 | }
21 |
22 | return (
23 |
24 |
OBS Debugger
25 |
26 |
32 |
35 |
38 |
41 |
44 |
47 |
50 |
53 |
54 |
31 |
32 |
33 | {output.outputName}
34 | {output.outputActive && }
35 |
36 |
{output.outputType}
37 |
38 |
39 |
Dimensions: {output.outputWidth}x{output.outputHeight}
40 |
Flags: {renderFlags(output.outputFlags)}
41 |
42 |
55 |
OBS Outputs
56 |
57 | {outputs.map((output) => (
58 |
59 | ))}
60 |
61 |
23 |
24 |
41 |
42 |
How to Enable the WebSocket Server in OBS:
43 |
44 | - Open OBS.
45 | - Click "Tools" from the menu, then "WebSocket Server Settings".
46 | - Check "Enable WebSocket Server".
47 | - Optionally, set a custom port and password.
48 |
49 |
50 |
{error}
;
32 | }
33 |
34 | return (
35 |
36 |
37 |
38 |
39 |
40 | {type === 'source' && source && (
41 | 
46 | )}
47 | {name}
48 | [{type}]
49 |
50 |
51 | {sources && (
52 |
53 | {sources.map((sceneSource) => {
54 | const sourceWithKind = sceneSource as SourceWithInputKind;
55 | return (
56 | -
57 |
})
62 | {sceneSource.sourceName}
63 |
64 | );
65 | })}
66 |
67 | )}
68 |
69 |
70 |
71 |
72 |
73 |
74 | {type === 'scene' && outputs.map((output) => (
75 |
76 | ))}
77 |
78 |
49 |
50 |
51 |
OBS
52 |
53 |
54 |
58 |
59 |
60 |
Record
61 | {recordStatus?.outputActive && (
62 |
63 | {formatTimecode(recordStatus.outputTimecode)}
64 | {formatFileSize(recordStatus.outputBytes)}
65 |
66 | )}
67 |
68 |
69 |
70 |
Virtual Cam
71 |
72 |
73 |
74 |
75 |
26 | {!recordState?.outputState || recordState?.outputState === "OBS_WEBSOCKET_OUTPUT_STOPPED" ? (
27 |
65 | ) : (
66 |
84 | )}
85 |
86 | );
87 | }
88 |
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { useOBSStore } from './store/obsStore';
3 | import { StatusBar } from './components/StatusBar';
4 | import './App.css';
5 | import { ConnectionStringInput } from './components/ConnectionStringInput';
6 | import './components/ConnectionStringInput.css';
7 | import { OBSDebugger } from './components/OBSDebugger';
8 | import { MediaItem } from './components/MediaItem';
9 | import { uniqueSceneSources } from './utils/sources';
10 |
11 | export function App() {
12 | const [connectionString, setConnectionString] = useState(localStorage.getItem('obsConnectionString'));
13 | const [password, setPassword] = useState(localStorage.getItem('obsPassword'));
14 | const [isConnecting, setIsConnecting] = useState(false);
15 | const connect = useOBSStore(state => state.connect);
16 | const fetchScenes = useOBSStore(state => state.fetchScenes);
17 | const startPolling = useOBSStore(state => state.startPolling);
18 | const stopPolling = useOBSStore(state => state.stopPolling);
19 | const isConnected = useOBSStore(state => state.isConnected);
20 | const scenes = useOBSStore(state => state.scenes);
21 | const sceneSources = useOBSStore(state => state.sceneSources);
22 | const error = useOBSStore(state => state.error);
23 | const recordStatus = useOBSStore((state) => state.recordStatus);
24 | const recordState = useOBSStore((state) => state.recordState);
25 |
26 | useEffect(() => {
27 | const init = async () => {
28 | if (connectionString) {
29 | setIsConnecting(true);
30 | try {
31 | await connect(connectionString, password || undefined);
32 | await fetchScenes();
33 | startPolling();
34 | } catch (error) {
35 | console.error('Failed to initialize:', error);
36 | } finally {
37 | setIsConnecting(false);
38 | }
39 | }
40 | };
41 |
42 | init();
43 |
44 | return () => {
45 | stopPolling();
46 | };
47 | }, [connect, fetchScenes, startPolling, stopPolling, connectionString, password]);
48 |
49 | const handleConnect = (newConnectionString: string, newPassword?: string) => {
50 | localStorage.setItem('obsConnectionString', newConnectionString);
51 | if (newPassword) {
52 | localStorage.setItem('obsPassword', newPassword);
53 | }
54 | setConnectionString(newConnectionString);
55 | setPassword(newPassword || null);
56 | };
57 |
58 | if (isConnecting) {
59 | return Connecting to OBS...
;
60 | }
61 |
62 | if (!isConnected) {
63 | return ;
64 | }
65 |
66 | // Create combined list of scenes and sources
67 | const sources = uniqueSceneSources(sceneSources);
68 | const mediaItems = [
69 | // Add scenes first
70 | ...scenes.map(scene => ({
71 | type: 'scene' as const,
72 | key: `scene-${scene.sceneName}`,
73 | name: scene.sceneName,
74 | source: undefined
75 | })),
76 | // Add sources second
77 | ...sources.map(source => ({
78 | type: 'source' as const,
79 | key: `source-${source.sourceUuid}`,
80 | name: source.sourceName,
81 | source: source
82 | }))
83 | ];
84 |
85 |
86 |
87 | return (
88 |
89 |
90 | {/*
Record Status: {JSON.stringify(recordStatus)}
91 |
Record State: {JSON.stringify(recordState)}
92 |
*/}
93 |
94 | {mediaItems.map(item => (
95 |
101 | ))}
102 |
103 |
113 |