-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
115 lines (94 loc) · 6.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<meta property="og:title" content="OBS Studio" />
<meta property="og:description" content="A quick introduction to OBS Studio that guides you towards creating your first stream or recording!" />
<meta property="og:url" content="https://siddarthakarri.github.io/OBS/" />
<meta property="og:image" content="https://siddarthakarri.github.io/OBS/ob.jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="300" />
<link rel="icon" href="obs.webp" type="image/x-icon">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OBS Studio</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #3f89ea;
color: white;
text-align: center;
padding: 1em;
}
section {
padding: 1em;
}
</style>
</head>
<body>
<header>
<h1>OBS Studio</h1>
</header>
<section id="home">
<h2>OBS Studio Tutorial</h2>
<p>how to download and install OBS Studio for recording.</p>
<p><strong>Download OBS Studio </strong></p>
<ul><li><p>For <strong>Windows</strong> Users,Click on Windows Icon and then Download Installer </p></li>
<li><p>For <strong>Mac</strong> Users,Click on Mac Icon and then Download Installer </p></li>
<a href="https://obsproject.com/download"><button>Download OBS Studio</button></a>
<li><p>Run the OBS Auto-Configuration Wizard to find optimal settings for your system</p></li>
<li><p>Manually adjust suggested settings if necessary</p></li>
<img src="wizard.png" width=80% alt="The Auto-Configuration Wizard window">
</section>
<section id="record">
<h2>How to record a video with OBS?</h2>
<h3>Follow these instructions to record a video with OBS:</h3>
<img src="main.png" width=80% alt="The OBS Studio interface">
<ol><li><p>Click the <strong>+</strong> icon at the bottom left of the <strong>Sources</strong> box. </p></li>
<li><p>Click <strong>Display Capture</strong>, then create a title, and click <strong>OK</strong>.</p></li>
<li><p>Choose your capture method and keystroke preferences and click <strong>OK</strong>.</p></li>
<li><p>Click <strong>Settings</strong> at the bottom right and then click the <strong>Output</strong> icon.</p></li>
<li><p>Choose your output folder under <strong>Recording Path</strong>.</p></li>
<li><p>Click the <strong>Start Recording</strong> button.</p></li></ol>
</section>
<section id="specific">
<h2>How to record a specific window with OBS?</h2>
<h3>Follow these instructions to record a specific window with OBS:</h3>
<ol><li><p>Click the <strong>+</strong> icon at the bottom left of the <strong>Sources</strong> box. </p></li>
<li><p>Click <strong>Window Capture</strong>, then create a title, and click <strong>OK</strong>.</p></li>
<img src="window capture.png" width=80% alt="Window Capture">
<li><p>Choose your desired Window and click <strong>OK</strong>.</p></li>
<li><p>Click the <strong>Start Recording</strong> button.</p></li></ol>
</section>
<section id="Interface">
<h2>OBS Studio Interface</h2>
<img src="interface.png" width=80% alt="The OBS Studio interface">
<h3>1. Scene and Sources:</h3>
<ul>
<li><strong>Scenes:</strong> OBS Studio organizes your content into scenes, which are like different sets or layouts. You can create multiple scenes to switch between them during your broadcast or recording.</li>
<li><strong>Sources:</strong> Within each scene, you add sources. Sources can include your display or specific windows, webcam feeds, images, text, and more. Each source represents an element in your scene.</li>
</ul>
<h3>2. Controls Toolbar:</h3>
<p>At the bottom of the interface, there's a toolbar with controls for starting and stopping your stream or recording. It includes buttons for Start Streaming, Start Recording, Studio Mode, and other essential functions.</p>
<h3>3. Preview and Program Windows (Studio Mode):</h3>
<p>OBS Studio features a Studio Mode that allows you to preview changes before making them live. The interface includes Preview and Program windows, where the Preview window shows changes you're making, and the Program window reflects what the audience sees.</p>
<h3>4. Audio Mixer:</h3>
<p>The Audio Mixer section allows you to control the audio levels of different sources. You can adjust the volume, mute, or solo specific audio sources.</p>
<h3>5. Scenes Transitions:</h3>
<p>OBS Studio provides various transition options for switching between scenes smoothly. Common transitions include Cut, Fade, and Swipe.</p>
<h3>6. Controls Panel:</h3>
<p>On the right side of the interface, there's a panel with controls for configuring scenes and sources. This panel includes options for adding new scenes, duplicating sources, and managing the order of sources.</p>
<h3>7. Settings:</h3>
<p>The Settings window allows you to configure OBS Studio's general settings, video and audio settings, and output settings. Here, you can also set up streaming platforms, adjust hotkeys, and more.</p>
<h3>8. Status Bar:</h3>
<p>At the bottom of the interface, there's a status bar providing information on the current status of your stream or recording, dropped frames, and encoding information.</p>
<h3>9. Controls for Studio Mode:</h3>
<p>In Studio Mode, you have additional controls for transitioning between scenes and managing the preview and program windows.</p>
<h3>10. Source Properties:</h3>
<p>When you select a source in the scene, the properties panel on the left allows you to configure specific settings for that source, such as resolution, position, and cropping.</p>
</section>
</body>
</html>