[使用案例](https://openscreenshot.app/zh-tw/use-cases/)

# 如何在 Chrome 中錄製產品示範影片

錄製瀏覽器分頁並加入視訊鏡頭和語音，在每次點選處加上縮放，修剪錄影並匯出 MP4，全部在你電腦上的 Chrome 中完成。

作者 [OpenScreenShot](https://github.com/pghqdev/OpenScreenShot)

要從瀏覽器分頁錄製簡短的產品示範，請使用 OpenScreenShot Chrome 擴充功能中的**錄影**。選擇整個分頁或其中一部分，開啟麥克風、分頁音訊或視訊鏡頭，然後錄製示範。編輯器接著會在每次點選處加上縮放，讓你修剪錄影，並匯出 MP4。Firefox 版只支援截圖，沒有錄影功能。

## 逐步錄製示範

1. 在一般瀏覽器分頁中準備示範：登入、載入範例資料，並關閉通知。瀏覽器內部頁面無法錄製。
2. 在預設設定下，點一下工具列圖示會擷取截圖。在圖示上按右鍵，取消勾選**一鍵 Express 模式**，下次點選就會開啟彈出式視窗。
3. 在彈出式視窗中點**錄影**。錄影分頁會在你的網頁旁開啟。第一次使用時，Chrome 會詢問一次是否允許擷取分頁。
4. 視需要開啟**麥克風**、**分頁音訊**或**視訊鏡頭**，並允許瀏覽器的權限提示。
5. 保留**整個分頁**，或在網頁的畫面上拖曳，只錄製其中一部分。
6. 點**開始錄製**。OpenScreenShot 會切換到你的網頁。以穩定的速度進行示範，點選要明確。
7. 按 `Alt+Shift+X` 停止，或回到錄影分頁點**停止**。錄影編輯器會在同一個分頁中開啟。
8. 調整縮放，修剪開頭和結尾，再點**匯出 MP4**。

錄影分頁也有暫停/繼續和取消按鈕。你錄製的網頁上不會加入任何東西，所以影片中不會出現控制項。

## 在點選處縮放

編輯器會在游標的每次點選處加上平滑的 2 倍縮放。在時間軸上，你可以調整或刪除每個縮放區塊。點**新增縮放**即可自行放置 1.5 倍、2 倍或 3 倍的區塊，例如放在不經點選就會變動的數字上。

點擊漣漪會標出你點選的位置。游標設定可以顯示沿著錄下的路徑移動的平滑指標、只顯示點選，或隱藏指標。

如果示範移到其他網站，點選追蹤需要**設定**中選用的**跨網站錄影**權限。沒有這個權限時，工具列徽章會變成琥珀色，影片其餘部分的縮放和點選效果都會停止。影片本身會繼續錄製。

## 視訊鏡頭、語音和分頁音訊

視訊鏡頭會以圓形泡泡加入匯出的影片。在編輯器中，你可以把它放在任一角落、改變大小或隱藏。麥克風音量和分頁音量各有獨立的滑桿，所以你可以讓自己的聲音蓋過產品本身的音效。

先錄一段簡短的測試，檢查音量和泡泡的位置。

## 修剪錄影並加外框

拖曳片段開頭或結尾的控點即可修剪。時間軸支援復原和重做。側邊面板中的「**Beautify（美化）**」面板會在影片周圍加上邊距、圓角、陰影和背景，與截圖編輯器提供的外框相同。

## 匯出影片

**匯出 MP4** 會把你的縮放、音軌、視訊鏡頭泡泡和外框一起算繪進錄影，並下載 H.264 視訊和 AAC 音訊的 MP4 檔案。要取得 WebM 檔案，請從按鈕旁的選擇器中選擇 WebM。算繪期間請讓編輯器分頁保持可見，因為分頁被隱藏時算繪會暫停。

MP4 的上限是 4096×2304 像素，所以較大的分頁會縮小以符合上限。不支援 MP4 錄製的瀏覽器只能匯出 WebM。檔案會依**設定**中的**檔名範本**命名。

## 限制與儲存

錄影功能擷取一個瀏覽器分頁。它不會錄製其他視窗、其他應用程式或你的桌面。瀏覽器內部頁面或受保護的網頁無法錄製。

錄影、游標紀錄，以及視訊鏡頭和麥克風串流，都會留在你裝置上的瀏覽器儲存空間中，直到你刪除為止。開啟**匯出後刪除錄影**，即可在檔案儲存後移除錄影。除非你分享匯出的檔案，否則不會上傳任何內容。

[錄影參考](https://openscreenshot.app/zh-tw/docs/#record)列出所有控制項。要擷取同一個錯誤或功能的靜態圖片，請參閱[用於錯誤回報的截圖](https://openscreenshot.app/zh-tw/use-cases/bug-reports/)。

## 繼續閱讀

[閱讀說明文件](https://openscreenshot.app/zh-tw/docs/)、[瀏覽所有指南](https://openscreenshot.app/zh-tw/blog/)，或[取得擷取方面的協助](https://openscreenshot.app/zh-tw/support/)。

---

Canonical page: https://openscreenshot.app/zh-tw/use-cases/product-demos/
