-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (118 loc) · 6.3 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
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>螢幕錄影 YmlY Screen Recorder</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" type="image/png" href="media/favicon.png">
</head>
<body>
<div id="container">
<div id="preview" class="flex_item">
<video id="preview_video" autoplay muted></video>
<div id="recorder_time" class="hide_on_start"></div>
<div id="file_size" class="hide_on_start"></div>
<div id="has_system_audio" title="錄製系統聲音中..." class="hide_on_start">🔊</div>
<div id="no_system_audio" title="未錄製系統聲音" class="hide_on_start">🔇</div>
<div id="mic_volume" title="麥克風音量" class="hide_on_start">
<meter id="mic_volume_meter" max="0.3" high="0.2" low="0.1"></meter>
<span>🎙️</span>
</div>
<div id="no_mic" title="未使用麥克風" class="hide_on_start">
<img id="no_mic_icon" alt="no_mic" src="./media/no_mic_icon.png">
</div>
<div id="countdown_time" class="hide_on_start"></div>
<div id="preview_message" class="not_supported">螢幕錄影預覽畫面</div>
<div id="message" class="flex_item hide_on_start"></div>
</div>
<div id="buttons" class="flex_item not_supported">
<div id="start_recorder_button" class="control_button">開始錄影</div>
<div id="stop_recorder_button" class="control_button hide_on_start">停止錄影</div>
<br>
<div id="download" class="dev">
<div id="download_button" class="control_button">下載 ...</div>
<div id="download_option" class="dev">
<a id="download_direct">直接下載</a>
<a id="download_rename">重新命名後下載</a>
</div>
</div>
</div>
<div id="options" class="flex_item not_supported">
<div class="option_item">
<label for="audio_mode">錄音模式：</label>
<select id="audio_mode">
<option value="mic_system">🎙️麥克風+🖥️系統聲音</option>
<option value="only_mic">🎙️只有麥克風</option>
<option value="only_system">🖥️只有系統聲音</option>
<option value="no_sound">🔇無聲音</option>
</select>
</div>
<div class="option_item dev">
<label for="video_format">錄影格式：</label>
<select id="video_format">
<option value="vp8">.webm (VP8+Opus, Chrome && Firefox)</option>
<option value="vp9">.webm (VP9+Opus, Chrome)</option>
<option value="h264">.webm (H.264+Opus, Chrome)</option>
</select>
</div>
<div class="option_item">
<label for="recorder_countdown">錄影倒數：</label>
<select id="recorder_countdown">
<option value="3">3 秒</option>
<option value="5">5 秒</option>
<option value="no_countdown">無</option>
</select>
</div>
<div class="option_item">
<input type="checkbox" id="is_record_limit_time" name="is_record_limit_time">
<span id="record_limit_time" class="disabled">
<label for="record_limit_mins">時間限制：</label>
<input type="number" id="record_limit_mins" name="record_limit_time" value="60" min="1" max="120" disabled="disabled">
分鐘
</span>
</div>
</div>
<div id="instruction" class="flex_item not_supported">
<ul>
<li>至少錄影 10 秒以上，影片才能正常下載播放；檔案大小上限為 2GB，建議不要錄影超過 90 分鐘。</li>
<li class="only_firefox hide_on_start">要錄製系統聲音，請改用 Chrome 相容瀏覽器。</li>
<li class="only_chrome hide_on_start">若要在錄影整個螢幕畫面時錄製系統聲音，請在分享時勾選「<b id="share_audio_tutorial_show">一併分享系統音訊」</b>」。</li>
<li>錄影格式為 WebM 檔案，建議上傳至 <a href="https://www.youtube.com/" target="_blank">YouTube</a> 後分享。</li>
<li class="only_mac hide_on_start">MacOS 請到「設定：安全與隱私」中確認是否開啟螢幕錄影、麥克風權限。</li>
<li>
<button id="mic_test">🎙️測試麥克風</button>
<audio id="mic_test_audio" autoplay></audio>
<meter id="mic_test_meter" max="0.3" high="0.2" low="0.1"> </meter>
</li>
<li class="dev">
<button id="countdown_test">測試倒數計時</button>
</li>
</ul>
</div>
<dialog id="share_audio_tutorial">
<button id="share_audio_tutorial_close">❌</button>
<img id="share_audio_tutorial_picture" src="media/share_system_sound_tutorial.png" alt="Share system sound tutorial" />
</dialog>
<dialog id="download_rename_dialog">
下載檔名：<input id="download_filename" name="download_filename" size="15" tabindex="1">
<button id="download_rename_button">下載</button>
<button id="download_rename_cancel">取消</button>
<div id="download_filename_error_message"><span class="dev">錯誤</span></div>
</dialog>
</div>
<div id="version">
<a href="https://github.com/ottokang/SW-Screen-Recorder">GitHub 專案網站</a>
</div>
<script src="js/env.js"></script>
<script src="js/jquery-3.6.4.min.js"></script>
<script src="js/RecordRTC.min.js"></script>
<script src="js/EBML.js"></script>
<script src="js/utility.js"></script>
<script src="js/record_time_limit.js"></script>
<script src="js/share_audio_tutorial.js"></script>
<script src="js/recorder.js"></script>
<script src="js/browser_check.js"></script>
<script src="js/mouse.js"></script>
<script src="js/dev.js"></script>
</body>
</html>