-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
311 lines (294 loc) · 20.8 KB
/
index.html
File metadata and controls
311 lines (294 loc) · 20.8 KB
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<title>Dual HD - Horizontal and Vertical Live Video Simultaneously</title>
<link rel="stylesheet" href="css/pico.min.css">
<link rel="icon" type="image/png" href="/img/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/img/favicon.svg" />
<link rel="shortcut icon" href="/img/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png" />
<link rel="manifest" href="/img/site.webmanifest" />
<style type="text/css">
h1 {
padding: 2em 0 0 0;
}
h2 {
margin-top: 1em;
font-size: 1.4em;
font-weight: normal;
}
h3 {
margin-top: 2em;
}
.container {
max-width: 1080px;
}
</style>
</head>
<body>
<main class="container">
<h1>
<svg width="44" height="44" style="margin-right: 10px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" enable-background="new 0 0 52 52" xml:space="preserve" fill="#000000" stroke="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g display="none"> <path display="inline" opacity="0.2" enable-background="new" d="M0,0v52h52V0H0z M49.9,49.9H2.1V2.1h47.8 C49.9,2.1,49.9,49.9,49.9,49.9z"></path> </g> <g display="none"> <rect x="2" y="2" display="inline" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="48"></rect> </g> <g display="none"> <g display="inline" opacity="0.5"> <line fill="none" stroke-width="0.25" stroke-miterlimit="10" x1="50" y1="2" x2="2" y2="50"></line> <line fill="none" stroke-width="0.25" stroke-miterlimit="10" x1="2" y1="2" x2="49.9" y2="50"></line> <rect x="2" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="4" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="6" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="8" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="10" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="12" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="14" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="16" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="18" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="20" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="22" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="24" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="26" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="28" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="30" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="32" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="34" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="36" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="38" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="40" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="42" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="44" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="46" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="48" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="2" height="48"></rect> <rect x="2" y="48" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="46" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="44" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="42" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="40" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="38" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="36" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="34" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="32" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="30" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="28" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="26" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="24" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="22" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="20" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="18" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="16" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="14" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="12" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="10" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="8" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="6" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="4" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> <rect x="2" y="2" fill="none" stroke-width="0.25" stroke-miterlimit="10" width="48" height="2"></rect> </g> </g> <path d="M50,20.5c0-1.2-1-2.2-2.2-2.2H33.7c-1.2,0-2.2,1-2.2,2.2v23.7c0,1.2,1,2.2,2.2,2.2h14.1c1.2,0,2.2-1,2.2-2.2 V20.5z"></path> <g> <path d="M27.7,29.4H8.4c-0.7,0-1.3-0.7-1.3-1.3V11.9c0-0.7,0.7-1.3,1.3-1.3h28.1c0.7,0,1.3,0.7,1.3,1.3v2.5h5.1V9 c0-1.8-1.6-3.4-3.4-3.4H5.4C3.6,5.6,2,7.2,2,9v22.2c0,1.8,1.6,3.4,3.4,3.4h22.3V29.4z"></path> <path d="M27.7,44.2v-3h-1.9c-0.5,0-0.9-0.4-0.9-0.9v-1.7c0-0.5-0.4-0.9-0.9-0.9h-3.4c-0.5,0-0.9,0.4-0.9,0.9v1.7 c0,0.5-0.4,0.9-0.9,0.9h-2.6c-1.8,0-3.4,1.6-3.4,3.4V45c0,0.7,0.7,1.3,1.3,1.3h14.1C27.8,45.7,27.7,45,27.7,44.2z"></path> </g> <circle cx="40.8" cy="43.8" r="1.6"></circle> <path d="M46.7,40.2c0,0.4-0.4,0.9-0.9,0.9H35.6c-0.4,0-0.9-0.4-0.9-0.9V23.5c0-0.4,0.4-0.9,0.9-0.9h10.2 c0.4,0,0.9,0.4,0.9,0.9V40.2z"></path> </g></svg>
Dual HD
</h1>
<h2>Dual Format Streaming: Simultaneous Horizontal and Vertical Live Video</h2>
<div class="grid">
<div>
<p>
Dual format streaming is a method for broadcasting horizontal and vertical video at the same time.
The Dual HD specification provides frame sizes that make this straightforward, so creators and broadcasters can deliver
content to platforms with different orientation needs in a single stream. For example, horizontal video works
best for Twitch and YouTube, while vertical video suits TikTok and Instagram. Dual format streaming is a fundamental shift
for platforms that need both: a horizontal player on desktop and a vertical player on mobile.
</p>
<h2>For Viewers</h2>
<p>
Dual format streaming improves the viewing experience across devices by matching the video orientation to the screen.
It removes the letterboxing that happens when horizontal video is shown on a vertical display, or the other way around.
</p>
<h2>For Streamers and Broadcasters</h2>
<p>
Dual HD is straightforward to use and does not require new broadcasting software. An intermediate server handles
the cropping and forwarding of streams to each destination, so both orientations are delivered correctly.
Any software that supports custom frame sizes, such as OBS Studio, can be used with Dual HD.
</p>
<h2>Scope of This Standard</h2>
<p>
Dual HD defines frame sizes only. It does not set limitations for codecs or other technical details. Modern codecs
like HEVC or AV1 are recommended for efficiency, since the combined frame size is larger.
To use Dual HD in practice, a transcoding service is needed to crop and forward the stream to each platform.
A reference server implementation is available on <a href="https://github.com/dualhd/server-demo" target="_blank">GitHub</a>.
</p>
</div>
<article><img src="img/dualhd2640-example.png" alt="Dual HD example"></article>
</div>
<h3>Specification v 1.0</h3>
<article>
<small>
<a href="DualHD-specification-v1.pdf" target="_blank">Dual HD Frame size specification v1.0 PDF</a>
</small>
</article>
<h3>Frame sizes and image templates</h3>
<article>
<details name="framesizes">
<summary>Dual HD 1760</summary>
<small>
<div class="grid">
<div>
<p>Video formats: 720p horizontal, 480p vertical.</p>
<ul>
<li>Frame size (w, h): 1760x854</li>
<li>Horizontal video
<ul>
<li>Size (w, h): 1280x720</li>
<li>Position (x, y): 0, 0</li>
</ul>
</li>
<li>Vertical video
<ul>
<li>Size (w, h): 480x854</li>
<li>Position (x, y): 1280, 0</li>
</ul>
</li>
</ul>
<a href="img/DualHD-1760.png" target="_blank">Download template</a>
</div>
<div>
<img src="img/DualHD-1760.png" alt="Dual HD 1760 template" />
</div>
</div>
</small>
</details>
<hr />
<details name="framesizes">
<summary>Dual HD 2000</summary>
<small>
<div class="grid">
<div>
<p>Video formats: 720p horizontal, 720p vertical.</p>
<ul>
<li>Frame size (w, h): 2000x1280</li>
<li>Horizontal video
<ul>
<li>Size (w, h): 1280x720</li>
<li>Position (x, y): 0, 0</li>
</ul>
</li>
<li>Vertical video
<ul>
<li>Size (w, h): 720x1280</li>
<li>Position (x, y): 1280, 0</li>
</ul>
</li>
</ul>
<a href="img/DualHD-2000.png" target="_blank">Download template</a>
</div>
<div>
<img src="img/DualHD-2000.png" alt="Dual HD 2000 template" />
</div>
</div>
</small>
</details>
<hr />
<details name="framesizes" open>
<summary>Dual HD 2640</summary>
<small>
<div class="grid">
<div>
<p>Video formats: 1080p horizontal, 720p vertical.</p>
<ul>
<li>Frame size (w, h): 2640x1280</li>
<li>Horizontal video
<ul>
<li>Size (w, h): 1920x1080</li>
<li>Position (x, y): 0, 0</li>
</ul>
</li>
<li>Vertical video
<ul>
<li>Size (w, h): 720x1280</li>
<li>Position (x, y): 1920, 0</li>
</ul>
</li>
</ul>
<a href="img/DualHD-2640.png" target="_blank">Download template</a>
</div>
<div>
<img src="img/DualHD-2640.png" alt="Dual HD 2640 template" />
</div>
</div>
</small>
</details>
<hr />
<details name="framesizes">
<summary>Dual HD 3000</summary>
<small>
<div class="grid">
<div>
<p>Video formats: 1080p horizontal, 1080p vertical.</p>
<ul>
<li>Frame size (w, h): 3000x1920</li>
<li>Horizontal video
<ul>
<li>Size (w, h): 1920x1080</li>
<li>Position (x, y): 0, 0</li>
</ul>
</li>
<li>Vertical video
<ul>
<li>Size (w, h): 1080x1920</li>
<li>Position (x, y): 1920, 0</li>
</ul>
</li>
</ul>
<a href="img/DualHD-3000.png" target="_blank">Download template</a>
</div>
<div>
<img src="img/DualHD-3000.png" alt="Dual HD 3000 template" />
</div>
</div>
</small>
</details>
<hr />
<details name="framesizes">
<summary>Dual HD 4920</summary>
<small>
<div class="grid">
<div>
<p>Video formats: 4k horizontal, 1080p vertical.</p>
<ul>
<li>Frame size (w, h): 4920x2160</li>
<li>Horizontal video
<ul>
<li>Size (w, h): 3840x2160</li>
<li>Position (x, y): 0, 0</li>
</ul>
</li>
<li>Vertical video
<ul>
<li>Size (w, h): 1080x1920</li>
<li>Position (x, y): 3840, 0</li>
</ul>
</li>
</ul>
<a href="img/DualHD-4920.png" target="_blank">Download template</a>
</div>
<div>
<img src="img/DualHD-4920.png" alt="Dual HD 4920 template" />
</div>
</div>
</small>
</details>
</article>
<h3>Broadcasting configuration example</h3>
<article>
<h5>OBS with Dual HD 2640</h5>
<small>1. Adjust OBS Settings
<ul>
<li>Video -> Base (Canvas) Resolution: <b>2640x1280</b></li>
<li>Video -> Output (Scaled) Resolution: <b>2640x1280</b></li>
<li>Output -> Rescale output: <b>Disabled</b></li>
</ul>
<p>
2. Add an <b>Image</b> source to your OBS canvas with the <a href="img/DualHD-2640.png" target="_blank">Dual HD 2640 template</a>.
Build your horizontal and vertical layouts directly on top of this template.
</p>
<p>
If your computer's processing power or bandwidth isn't sufficient for streaming at 2640x1280,
select a smaller Dual HD resolution or downscale the output, provided the receiving service supports scaled Dual HD.
For ecample, scaled resolution can be 1848x896, which retains 70% of the original width and height.
</p>
</small>
</article>
<h3>Paltform support</h3>
<article>
<p>
<a href="https://streamrun.com/">Streamrun</a> supports Dual HD for production use, making it possible to multistream in both landscape and portrait formats at the same time. With Dual Format Streaming, creators can reach a wider audience without compromising viewer experience.
<br />
<small>» For more information, visit the Streamrun help center article on <a href="https://streamrun.com/docs/dual-format-streaming" target="_blank">Dual Format Streaming</a>.</small>
</p>
<span>
<a href="https://www.twitch.tv/">Twitch</a> is testing Dual Format Streaming in a limited Technical Alpha with a group of streamers
broadcasting in both horizontal and vertical formats at the same time,
giving viewers an optimized experience on web and mobile.<br />
<small>» For more information, visit the Twitch help center article on <a href="https://help.twitch.tv/s/article/dual-format-vertical-video" target="_blank">Dual Format Streaming</a>.</small>
</p>
</article>
<h3>Example of Dual HD video processing</h3>
<article>
<h5>Transcoding with FFmpeg</h5>
<small>
<p>Dual HD 2640 video can be split into two destinations with the following command:</p>
</small>
<pre>
ffmpeg -i dualhd2640.mp4 \
-filter_complex "[0:v]crop=1920:1080:0:0[horizontal]; [0:v]crop=720:1280:1920:0[vertical]" \
-map "[horizontal]" -c:v libx264 -preset veryfast -c:a copy fullhd_horizontal_output.mp4 \
-map "[vertical]" -c:v libx264 -preset veryfast -c:a copy 720p_vertical_output.mp4
</pre>
<p>See example implementation of a Dual HD server on <a href="https://github.com/dualhd/server-demo" target="_blank">GitHub</a>.</p>
</article>
<h3>Dual HD buttons</h3>
<article>
<small>
<p>Download buttons and link back to <a href="https://dualhd.org/" target="_blank">dualhd.org</a> to support us - thank you!</p>
<img src="img/DualHD-button-black.png" alt="Dual HD button - black" width="200" style="margin: 0 20px 20px 0;" />
<img src="img/DualHD-button-blue.png" alt="Dual HD button - blue" width="200" style="margin: 0 0 20px 0;" />
</small>
</article>
<footer>
<small>
© Dual HD - <a href="mailto:dualhd@pobox.com" style="color: rgb(194, 199, 208)">Contact us</a> -
<a href="https://www.svgrepo.com/svg/374847/desktop-and-phone" target="_blank" style="color: rgb(194, 199, 208)">Icon CC BY</a>
-
<a href="https://github.com/dualhd/dualhd.github.io" target="_blank" title="Dual HD on GitHub" style="vertical-align: baseline;">
<svg width="20" height="20" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g> <title>Github icon</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-140.000000, -7559.000000)" fill="#000000"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M94,7399 C99.523,7399 104,7403.59 104,7409.253 C104,7413.782 101.138,7417.624 97.167,7418.981 C96.66,7419.082 96.48,7418.762 96.48,7418.489 C96.48,7418.151 96.492,7417.047 96.492,7415.675 C96.492,7414.719 96.172,7414.095 95.813,7413.777 C98.04,7413.523 100.38,7412.656 100.38,7408.718 C100.38,7407.598 99.992,7406.684 99.35,7405.966 C99.454,7405.707 99.797,7404.664 99.252,7403.252 C99.252,7403.252 98.414,7402.977 96.505,7404.303 C95.706,7404.076 94.85,7403.962 94,7403.958 C93.15,7403.962 92.295,7404.076 91.497,7404.303 C89.586,7402.977 88.746,7403.252 88.746,7403.252 C88.203,7404.664 88.546,7405.707 88.649,7405.966 C88.01,7406.684 87.619,7407.598 87.619,7408.718 C87.619,7412.646 89.954,7413.526 92.175,7413.785 C91.889,7414.041 91.63,7414.493 91.54,7415.156 C90.97,7415.418 89.522,7415.871 88.63,7414.304 C88.63,7414.304 88.101,7413.319 87.097,7413.247 C87.097,7413.247 86.122,7413.234 87.029,7413.87 C87.029,7413.87 87.684,7414.185 88.139,7415.37 C88.139,7415.37 88.726,7417.2 91.508,7416.58 C91.513,7417.437 91.522,7418.245 91.522,7418.489 C91.522,7418.76 91.338,7419.077 90.839,7418.982 C86.865,7417.627 84,7413.783 84,7409.253 C84,7403.59 88.478,7399 94,7399" id="github-[#000000]"> </path> </g> </g> </g> </g></svg>
</a>
</small>
</footer>
</main>
</body>
</html>