OBS studio很酷，但 JavaScript 更酷，現在，我們用 JavaScript 創建自己的錄屏功能。

首先，創建一個HTML文件，包含記錄按鈕和一個播放標簽，內容如下：

然后在創建 index.js，監聽按鈕的點擊：

1. let btn = document.querySelector(".record-btn");
2.  
3. btn.addEventListener("click", function () {
4. console.log("hello");
5. });

在瀏覽器中打開 html文件，點擊按鈕，我們可以在控制臺看到打印的 hello。

現在把打印去掉，換成如下的內容：

1. let btn = document.querySelector(".record-btn");
2.  
3. btn.addEventListener("click", async function () {
4. let stream = await navigator.mediaDevices.getDisplayMedia({
5. video: true
6. });
7. });

現在點擊按鈕，會彈出屏幕選擇框：

因為，我現在用的是兩個屏幕，所以會出現兩個選擇。

現在你可能認為選擇一個屏幕，然后點擊分享，就開始錄制了。非也，這個比我們想象中的復雜點。我們要使用 MediaRecorder 來錄制我們的視頻。

1. let btn = document.querySelector(".record-btn")
2.  
3. btn.addEventListener("click", async function () {
4. let stream = await navigator.mediaDevices.getDisplayMedia({
5. video: true
6. })
7.  
8. // 需要更好的瀏覽器支持
9. const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
10. ? "video/webm; codecs=vp9"
11. : "video/webm"
12. let mediaRecorder = new MediaRecorder(stream, {
13. mimeType: mime
14. })
15. // 必須手動啟動
16. mediaRecorder.start()
17. })

當我們的屏幕被錄制下來時，mediaRecorder 會給我們提供分塊的數據，我們需要將這些數據存儲在一個變量中。

1. let btn = document.querySelector(".record-btn")
2.  
3. btn.addEventListener("click", async function () {
4. let stream = await navigator.mediaDevices.getDisplayMedia({
5. video: true
6. })
7.  
8. // 需要更好的瀏覽器支持
9. const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
10. ? "video/webm; codecs=vp9"
11. : "video/webm"
12. let mediaRecorder = new MediaRecorder(stream, {
13. mimeType: mime
14. })
15.  
16. let chunks = []
17. mediaRecorder.addEventListener('dataavailable', function(e) {
18. chunks.push(e.data)
19. })
20.  
21. // 必須手動啟動
22. mediaRecorder.start()
23. })

現在，當我們點擊停止共享按鈕時，希望在我們的 video元素中播放錄制的視頻，可以這么做：

1. let btn = document.querySelector(".record-btn")
2.  
3. btn.addEventListener("click", async function () {
4. let stream = await navigator.mediaDevices.getDisplayMedia({
5. video: true
6. })
7.  
8. // 需要更好的瀏覽器支持
9. const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
10. ? "video/webm; codecs=vp9"
11. : "video/webm"
12. let mediaRecorder = new MediaRecorder(stream, {
13. mimeType: mime
14. })
15.  
16. let chunks = []
17. mediaRecorder.addEventListener('dataavailable', function(e) {
18. chunks.push(e.data)
19. })
20.  
21. mediaRecorder.addEventListener('stop', function(){
22. let blob = new Blob(chunks, {
23. type: chunks[0].type
24. })
25.  
26. let video = document.querySelector(".video")
27. video.src = URL.createObjectURL(blob)
28. })
29.  
30.  
31. // 必須手動啟動
32. mediaRecorder.start()
33. })

現在基本就可以完成了，可以在潤色下，如自動下載錄制的視頻，可以這么做：

1. let btn = document.querySelector(".record-btn")
2.  
3. btn.addEventListener("click", async function () {
4. let stream = await navigator.mediaDevices.getDisplayMedia({
5. video: true
6. })
7.  
8. // 需要更好的瀏覽器支持
9. const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
10. ? "video/webm; codecs=vp9"
11. : "video/webm"
12. let mediaRecorder = new MediaRecorder(stream, {
13. mimeType: mime
14. })
15.  
16. let chunks = []
17. mediaRecorder.addEventListener('dataavailable', function(e) {
18. chunks.push(e.data)
19. })
20.  
21. mediaRecorder.addEventListener('stop', function(){
22. let blob = new Blob(chunks, {
23. type: chunks[0].type
24. })
25. let url = URL.createObjectURL(blob)
26.  
27. let video = document.querySelector("video")
28. video.src = url
29.  
30. let a = document.createElement('a')
31. a.href = url
32. a.download = 'video.webm'
33. a.click()
34. })
35.  
36.  
37. // 必須手動啟動
38. mediaRecorder.start()
39. })

現在，最基本的一個錄制功能就完善了，動手來試試吧!!

作者：Lokender Singh 譯者：前端小智

來源：dev 原文：https://dev.to/0shuvo0/lets-create-a-screen-recorder-with-js-3leb

原文鏈接：https://mp.weixin.qq.com/s/k2OcbUfqw3jz0s1w66cx0w