-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
47 lines (46 loc) · 1.98 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Client-side Examples on the ways to send a video file over WebRTC</title>
<link rel="stylesheet" href="style.css">
<style>
li {
margin-bottom: 24px;
}
</style>
</head>
<body>
<p>
Examples of how to convert a video file to a <code>MediaStream</code> where it can be sent via WebRTC.
See the <a href="https://webrtchacks.com/all-the-ways-to-…file-over-webrtc">webrtcHacks post</a> for full details, commentary, and comparisons.
</p>
<ul>
<li>
<a href="screenshare/screenshareVideoPC.html">getDisplayMedia of pop-out video file</a> - load a video file into a pop-up
and use the <code>getDisplayMedia</code> for capture.
</li>
<li>
<a href="screenshare/elementCapture.html">getDisplayMedia of an in-page video player</a> -
play the video file using <code>preferOwnTab</code> constraint is used limit the screen share picker with <code>RestrictionTarget</code>
to limit capture to only the source Video.
</li>
<li>
<a href="captureStream/captureStream.html">VideoElement Capture Stream</a> - capture the video and audio directly from a
<code>video</code> element. The audio is captured using the Web Audio API and combined with the video stream
to create a <code>MediaStream</code>.
</li>
<li>
<a href="captureStream/captureStreamWebAudio.html">VideoElement Capture Stream with WebAudio</a> - same as above, but experimenting
with using WebAudio for local audio control.
</li>
<li>
<a href="canvas/canvasCapture.html">Canvas Capture + Web Audio</a> - write a source video to a canvas and then use
<code>canvas.captureStream()</code> to capture the video with Web Audio API to capture the audio.
</li>
<li>
<a href="WebCodecs/decodeToVideo.html">WebCodecs</a> - load a video file and use WebCodecs to convert it to a MediaStream
</li>
</ul>
</body>
</html>