使用 HTML、CSS 和 JavaScript 建立簡單的螢幕錄影機

該項目演示了一個使用 HTML、CSS 和 JavaScript 構建的簡單屏幕錄像機，無需依賴外部庫。 它捕獲屏幕活動和音頻，為創建短屏幕錄製提供基本但實用的解決方案。讓我們探索一下它的功能和代碼結構。

功能：

錄音機允許用戶直接在瀏覽器中捕獲屏幕和音頻。 單擊錄製按鈕後，用戶可以選擇錄製區域（瀏覽器選項卡、應用程序窗口或整個屏幕）。 錄製前有倒計時，生成的 WebM 視頻可供下載。

代碼結構：

該項目由三個主要文件組成：

• index.html: 提供帶有視頻預覽區域、錄製按鈕和下載鏈接的用戶界面 (UI)。
• style.css： 設置 UI 元素的樣式，確保不同屏幕尺寸的響應能力。
• script.js: 包含用於屏幕捕獲、錄音和視頻處理的核心 JavaScript 邏輯。

HTML (index.html): HTML 設置基本結構，包括用於顯示錄製內容的視頻元素和用於控制的按鈕。

CSS (style.css): CSS 設置頁面元素的樣式，創建乾淨且響應式的佈局。主要風格包括：

• 全局重置以實現一致的樣式。
• 以主要內容為中心。
• 全屏倒計時疊加。
• 視頻元素的響應式縮放。
• 按鈕和鏈接的樣式。
• 移動響應能力的媒體查詢。 （例如：@media (max-width: 768px)）

JavaScript (script.js): JavaScript 代碼處理核心功能：

1. 事件監聽器： 錄製按鈕上的事件監聽器會觸發 startScreenCapturing 函數。
2. 媒體捕獲： startScreenCapturing 功能使用 navigator.mediaDevices.getDisplayMedia 捕獲屏幕，使用 navigator.mediaDevices.getUserMedia 進行音頻輸入。 如果音頻捕獲失敗，則包含錯誤處理。
3. 錄製： recordStream 函數使用 MediaRecorder 錄製組合的音頻和視頻流。 倒計時器是使用 setTimeout.
實現的
4. 下載：錄製停止後，將創建一個 Blob 對象，並更新下載鏈接以允許用戶保存錄製內容。

常見問題（FAQ）：

• 音訊擷取：系統音訊擷取取決於瀏覽器支援和安全策略。
• 疑難排解：如果螢幕錄製失敗，請檢查瀏覽器與navigator.mediaDevices.getDisplayMedia的相容性。
• 影片格式：影片以WebM格式儲存。
• 音訊品質：此腳本使用迴聲消除和噪音抑制，但外部麥克風可能會提高品質。
• 暫停功能：目前不支援暫停錄製。
• 檔案大小：檔案大小取決於錄製長度和品質。

優點和缺點：

Pros	Cons
Lightweight, no external libraries	Limited to modern browsers
Simple implementation	No advanced editing features
Video and audio recording	Audio may not work on all devices/browsers
WebM format download	May require format conversion for sharing
Responsive design	No real-time preview during recording

這個簡潔的概述讓您清楚地了解螢幕錄影機的功能和底層程式碼結構。 該專案是學習基於瀏覽器的螢幕錄製的良好起點。

以上是使用 HTML、CSS 和 JavaScript 建立簡單的螢幕錄影機的詳細內容。更多資訊請關注PHP中文網其他相關文章！