-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
92 lines (84 loc) · 3.92 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
<!doctype html>
<html>
<head>
<title>How to make a screencast online</title>
<meta name="description" content="Free screencast app">
<style type='text/css'>
body{
font-family: sans-serif;
line-height: 2rem;
width: 80%;
margin: 0 auto;
background-color: #f7f7f7;
}
body > div{
background-color: white;
padding: 2rem;
text-align: center;
}
body > div > div{
text-align: center;
}
p, ol{
text-align: left;
}
h1{
text-align: center;
}
span{
text-decoration: underline;
}
img{
max-width: 100%;
}
</style>
</head>
<body>
<div>
<img src='img/architecture.jpg'/>
<br><br>
<h1>How to make a free screencast video online?</h1>
<p>With online tools like Microsoft Teams or Zoom, you can simply share your computer screen
with group members who joined the meeting, but what if you want to make a video to share
with Youtube or your website? Do you need a paid license for software?</p>
<p>Fortunately, the possibility to make a screencast video is <span>built into most browsers for PCs</span>. It
is called WebRTC, Real-Time Communication over the web, so you don't need to buy a
license because you already have all the features ready to use for a video of your computer
screen. So you can show how to use certain software you are good at or to explain a task
visually to other people who are offline when making the video simply by using a browser
and a (built-in) microphone.</p>
<div><img src='img/webcam.png'/></div>
<h1>Where to start?</h1>
<p>Here you find <a href='app.html'>a webpage to make a screencast video</a>. The resulting video file is in the
WebM-format and if you want to share it with <span>YouTube</span> you are all set because <span>YouTube</span>
allows you to upload videos in this format. On a webpage, you can use the video in
<span>WordPress</span> for example. If you have downloaded the video you can drag it inside a tab of the
browser, Chrome for instance, which will start playing the video. If you want to share the
video with Facebook you need to convert the video to the MP4 format. You can do this with
FFmpeg which is free and open source. Visit the <a href='https://ffmpeg.org/' target='_blank'>FFmpeg page</a> to see how to do this.
</p>
<div><img src='img/microphone.png'/> </div>
<h1>Step by step</h1>
<p>The steps to take are the following:</p>
<ol>
<li>Prepare thoroughly the task you want to explain. Think about it and prepare the
actions and the text you what to say along with them.</li>
<li>It can be helpful to write down the keywords of the video and what you want the
viewer to understand.</li>
<li>Test your audio and, possibly, webcam input. Check out the settings with the
hamburger icon if you miss the audio stream. On Windows it can be helpfull to install Stereo-mix of the sound card:
<span>Right click the loudspeaker icon in the system tray</span> -> <span>Open sound settings</span> -> <span>Administer input devices</span> -> <span>Enable Stereo-mix</span></li>
<li>If you are well prepared <a href='app.html'>make the video</a>.</li>
<li>During the recording, you can use the Pause button. Click it again to continue
recording.</li>
<li>If you make a screencast longer than a couple of minutes there could be a problem downloading the video because it is too large. For longer screencasts I recommend to make it in parts and stich them together with ffmpeg after downloading.</li>
</ol>
</p>
<br><br>
<h1>Conclusion</h1>
<p>Instead of making numerous screen dumps and crayons to illustrate how to do a task, or to
get a broad audience for your talent, simply make a screencast video. It is free of charge
because you probably already have the potential in the browser you use! <a href='app.html'>Check it out!</a></p>
</div>
</body>
</html>