在現(xiàn)代 Web 開發(fā)環(huán)境中，隨著各種瀏覽器 API 的出現(xiàn)，與使用者硬體（如相機(jī)和麥克風(fēng)）的互動(dòng)變得更加容易。 MediaRecorder API 就是這樣一個(gè)有用的 API，它允許開發(fā)人員直接從瀏覽器錄製音訊和視訊。
在這篇文章中，我們將介紹如何使用JavaScript 錄製視頻，方法是訪問用戶的網(wǎng)絡(luò)攝像頭、錄製視頻流並提供錄製的視頻供下載- 所有這些都通過瀏覽器API進(jìn)行！
為什麼要使用 MediaRecorder API？
傳統(tǒng)上，記錄使用者的媒體內(nèi)容需要外部工具或外掛程式（例如 Flash）。但是，借助 WebRTC 堆疊，您可以輕鬆錄製視訊、創(chuàng)建點(diǎn)對(duì)點(diǎn)連接以及與相機(jī)、麥克風(fēng)和螢?zāi)坏让襟w設(shè)備交互，而無需任何第三方工具。
MediaRecorder API 是該堆疊的一部分，使瀏覽器中的視訊錄製成為一個(gè)無縫過程。
在瀏覽器中錄製影片的步驟
要錄製視頻，我們將：
- 使用 navigator.mediaDevices 介面中的 getUserMedia() 方法存取網(wǎng)路攝影機(jī)。
- 使用 MediaRecorder API 錄製串流。
- 提供下載連結(jié)以便使用者可以儲(chǔ)存錄製的影片。
我們看一下程式碼實(shí)作。
範(fàn)例：在瀏覽器中錄製視頻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Recorder</title>
</head>
<body>
<h1>Video Recorder using JavaScript</h1>
<video id="video" autoplay></video>
<button id="start-btn">Start Recording</button>
<button id="stop-btn" disabled>Stop Recording</button>
<video id="recorded-video" controls></video>
<a id="download-link" download="recorded-video.webm">Download Recorded Video</a>
<script>
const videoElement = document.getElementById('video');
const startButton = document.getElementById('start-btn');
const stopButton = document.getElementById('stop-btn');
const recordedVideoElement = document.getElementById('recorded-video');
const downloadLink = document.getElementById('download-link');
let mediaRecorder;
let recordedChunks = [];
// Access webcam
async function startVideoStream() {
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
videoElement.srcObject = stream;
// Set up MediaRecorder to record the stream
mediaRecorder = new MediaRecorder(stream);
// When data becomes available, store it
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
// When recording stops, create a video blob and show it
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const videoURL = URL.createObjectURL(blob);
recordedVideoElement.src = videoURL;
downloadLink.href = videoURL;
};
}
// Start recording
startButton.addEventListener('click', () => {
recordedChunks = [];
mediaRecorder.start();
startButton.disabled = true;
stopButton.disabled = false;
});
// Stop recording
stopButton.addEventListener('click', () => {
mediaRecorder.stop();
startButton.disabled = false;
stopButton.disabled = true;
});
// Initialize the video stream
startVideoStream();
</script>
</body>
</html>
分解代碼：
1. 存取使用者的網(wǎng)路攝影機(jī)
我們使用 navigator.mediaDevices.getUserMedia() 方法來要求存取使用者的攝影機(jī)和麥克風(fēng)。
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
videoElement.srcObject = stream;
此方法傳回解析為 MediaStream 物件的 Promise，其中包含來自使用者相機(jī)的即時(shí)視訊和音訊。然後使用
2. 錄影串流
一旦我們有了直播，我們就可以建立一個(gè) MediaRecorder 實(shí)例來錄製影片。
mediaRecorder = new MediaRecorder(stream);
MediaRecorder 將以區(qū)塊的形式擷取流，每次資料可用時(shí)，都會(huì)觸發(fā) ondataavailable 事件。我們將這些區(qū)塊儲(chǔ)存在名為 RecordChunks 的陣列中。
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
3. 停止錄製並儲(chǔ)存影片
當(dāng)錄製停止時(shí)，我們將這些區(qū)塊組合成一個(gè) Blob，並建立一個(gè)用於下載影片的 URL。
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const videoURL = URL.createObjectURL(blob);
recordedVideoElement.src = videoURL;
downloadLink.href = videoURL;
};
現(xiàn)在可以在中播放影片了元素或使用 下載元素。
按鈕和使用者交互
我們新增了兩個(gè)按鈕來控制錄製：
- 開始按鈕：透過呼叫mediaRecorder.start()開始錄製。
- 停止按鈕：透過呼叫mediaRecorder.stop()來停止錄製。
按鈕也會(huì)相應(yīng)地停用或啟用，以防止在此過程中不必要的互動(dòng)。
您可以新增的附加功能
- 暫停/恢復(fù)錄製：您可以使用 mediaRecorder.pause() 和 mediaRecorder.resume() 方法新增暫停和恢復(fù)按鈕。
- 影片格式：預(yù)設(shè)情況下，錄製內(nèi)容儲(chǔ)存為.webm文件，但您可以根據(jù)瀏覽器的支援更改MIME類型，例如video/mp4。
- 上傳影片：您可以擴(kuò)展功能，將錄製的影片上傳到伺服器進(jìn)行進(jìn)一步處理或分析。
結(jié)論
使用 MediaRecorder API 和 getUserMedia() 方法，使用 JavaScript 直接在瀏覽器中錄製影片變得非常簡(jiǎn)單。這些工具使您能夠在瀏覽器內(nèi)建立功能強(qiáng)大、媒體豐富的應(yīng)用程序，而無需外部軟體。
按照上面的範(fàn)例，您可以輕鬆地在 Web 應(yīng)用程式中實(shí)現(xiàn)視訊錄製功能，使用戶能夠直接從瀏覽器錄製、預(yù)覽和下載影片。
快樂編碼！
以上是使用 JavaScript 和瀏覽器 API 錄製影片的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁(yè)開發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
熱門話題
Java vs. JavaScript：清除混亂
Jun 20, 2025 am 12:27 AM
Java和JavaScript是不同的編程語言，各自適用於不同的應(yīng)用場(chǎng)景。 Java用於大型企業(yè)和移動(dòng)應(yīng)用開發(fā)，而JavaScript主要用於網(wǎng)頁(yè)開發(fā)。
JavaScript評(píng)論：簡(jiǎn)短說明
Jun 19, 2025 am 12:40 AM
JavascriptconcommentsenceenceEncorenceEnterential gransimenting，reading and guidingCodeeXecution.1）單inecommentsareusedforquickexplanations.2）多l(xiāng)inecommentsexplaincomplexlogicorprovideDocumentation.3）
如何在JS中與日期和時(shí)間合作？
Jul 01, 2025 am 01:27 AM
JavaScript中的日期和時(shí)間處理需注意以下幾點(diǎn)：1.創(chuàng)建Date對(duì)像有多種方式，推薦使用ISO格式字符串以保證兼容性；2.獲取和設(shè)置時(shí)間信息可用get和set方法，注意月份從0開始；3.手動(dòng)格式化日期需拼接字符串，也可使用第三方庫(kù)；4.處理時(shí)區(qū)問題建議使用支持時(shí)區(qū)的庫(kù)，如Luxon。掌握這些要點(diǎn)能有效避免常見錯(cuò)誤。
為什麼要將標(biāo)籤放在的底部？
Jul 02, 2025 am 01:22 AM
PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
JavaScript與Java：開發(fā)人員的全面比較
Jun 20, 2025 am 12:21 AM
JavaScriptIspreferredforredforwebdevelverment，而Javaisbetterforlarge-ScalebackendsystystemsandSandAndRoidApps.1）JavascriptexcelcelsincreatingInteractiveWebexperienceswebexperienceswithitswithitsdynamicnnamicnnamicnnamicnnamicnemicnemicnemicnemicnemicnemicnemicnemicnddommanipulation.2）
什麼是在DOM中冒泡和捕獲的事件？
Jul 02, 2025 am 01:19 AM
事件捕獲和冒泡是DOM中事件傳播的兩個(gè)階段，捕獲是從頂層向下到目標(biāo)元素，冒泡是從目標(biāo)元素向上傳播到頂層。 1.事件捕獲通過addEventListener的useCapture參數(shù)設(shè)為true實(shí)現(xiàn)；2.事件冒泡是默認(rèn)行為，useCapture設(shè)為false或省略；3.可使用event.stopPropagation()阻止事件傳播；4.冒泡支持事件委託，提高動(dòng)態(tài)內(nèi)容處理效率；5.捕獲可用於提前攔截事件，如日誌記錄或錯(cuò)誤處理。了解這兩個(gè)階段有助於精確控制JavaScript響應(yīng)用戶操作的時(shí)機(jī)和方式。
JavaScript：探索用於高效編碼的數(shù)據(jù)類型
Jun 20, 2025 am 12:46 AM
javascripthassevenfundaMentalDatatypes：數(shù)字，弦，布爾值，未定義，null，object和symbol.1）numberSeadUble-eaduble-ecisionFormat，forwidevaluerangesbutbecautious.2）
如何減少JavaScript應(yīng)用程序的有效載荷大?。?/a>
