-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
64 lines (61 loc) · 2.74 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
<html>
<head>
<title>Poor Man's ScreenFlow</title>
<meta name="description" content="A demo page of MediaRecorder used to recorder your camera and screen to finally export the file to a webm file." />
<style>
body {
background: #fff;
color: #555;
font-family: Georgia,Times;
font-weight: 300;
font-style: normal;
font-size: 19px;
line-height: 1.725;
-webkit-font-smoothing: antialiased;
}
.page {
margin: 0 auto;
padding: 1em 2em;
max-width: 40em;
}
h1, h2, h3, h4, h5 {
color: #212121;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 600;
font-size: 1em;
line-height: 1.3;
margin-bottom: 1em;
padding-top: 1em;
}
h1 {
font-size: 1.7em;
}
</style>
</head>
<body>
<div class="page">
<h1>Poor Man's ScreenFlow</h1>
<p>This project uses the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder">MediaRecorder API</a> to record your screen, as well as your camera in a corner or in full page.</p>
<h2>How to make it work</h2>
<p>As of December 2016 this demo <strong>is only supported on Firefox</strong>. Chrome is not supported out of the box, needing an extension and lots of custom code (see <a href="https://www.webrtc-experiment.com/RecordRTC/">this WebRTC experiment</a> for more information. It will show your camera, but won't record anything.</p>
<p>These are <strong>the steps to make the demo work</strong>:
<ol>
<li>Open Firefox's about:config and add <code>jmperezperez.com</code> to the <code>media.getusermedia.screensharing.allowed_domains</code> list</li>
<li>Run this demo</li>
<li>Accept to share your camera</li>
<li>Finally, accept to share your screen. From this moment your screen is being recorded. Pressing <strong>escape</strong> finishes the recording and creates a .webm file.</li>
</ol>
<h2>Using it</h2>
<p>On your page, include https://jmperezperez.com/screenflow/lib/embed.js</p>. It will be used to display an iframe with your camera and bind the keyboard events.
<p>These are the keyboard bindings supported by this library. The focused element must be the hosting page for it to work, so if you click the camera image, press again on the host page.</p>
<ul>
<li>Escape: finishes the recording and saves the file</li>
<li>s: Switches the camera between full page and picture-in-picture</li>
<li>a: Toggles the visibility of the camera</li>
</ul>
<h2>References</h2>
<p>This project is based on <a href="https://twitter.com/supersole">Soledad Penadés</a>' <a href="https://soledadpenades.com/files/t/2016_rtalchemy/">Real time front-end alchemy</a> talk.
</div>
<script async src="lib/embed.js"></script>
</body>
</html>