假設您厭倦了螢幕錄影機的付費專區和限制，並想繼續編寫自己的程式碼 - 事實證明您已經可以透過幾行程式碼獲得基本功能。
原文出處：https://dev.to/ninofiliu/simple-screen-recorder-in-20-lines-of-javascript-4ina
我們可以要求瀏覽器使用螢幕擷取API為我們取得擷取視訊串流，但出於安全原因我們必須確保使用者手勢觸發捕獲，例如點擊按鈕：
const button = document.createElement("button");
button.innerHTML = "capture";
document.body.append(button);
button.addEventListener("click", async () => {
// TODO
});
點擊後，獲取視訊串流並進行錄製
const stream = await navigator.mediaDevices.getDisplayMedia();
const recoder = new MediaRecorder(stream);
recoder.start();
當使用者停止分享螢幕時停止錄製
const [video] = stream.getVideoTracks();
video.addEventListener("ended", () => {
recoder.stop();
});
取得錄音檔案並下載
recoder.addEventListener("dataavailable", (evt) => {
const a = document.createElement("a");
a.href = URL.createObjectURL(evt.data);
a.download = "capture.webm";
a.click();
});
瞧，你就有了一個簡單的螢幕錄影機！
它有很多解決起來很有趣的限制- 音頻錄製、網絡攝像頭集成、長時間執行的流等- 但我剛剛發現用這麼少的程式碼行就可以完成如此強大的事情，這太棒了，無法不分享。
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章
