MediaRecorder構造函數會創建一個對指定的 MediaStream進行錄製的 MediaRecorder 對象,
接收兩個參數，一個是流，一個是可選對象，對象的mineType爲新構建的 MediaRecorder 指定錄製容器的MIME類型. 在應用中通過調用 MediaRecorder.isTypeSupported來檢查瀏覽器是否支持此種mimeType .，audioBitsPerSecond: 指定音頻的比特率.,videoBitsPerSecond: 指定視頻的比特率.,bitsPerSecond: 指定音頻和視頻的比特率. 此屬性可以用來指定上面兩個屬性. 如果上面兩個屬性只有其中之一和此屬性被指定, 則此屬性可以用於設定另外一個屬性.
下面這個例子實現了錄製播放視頻的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用WebRTC錄製視頻</title>
</head>
<body>
<video id="source" autoplay muted></video> <!-- 顯示攝像頭的源視頻 -->
<video id="recorded" loop controls></video> <!-- 顯示已錄製的視頻 -->
<div>
<button id="record" disabled>開始錄製</button> <!-- 播放按鈕 -->
</div>
<script>
var mediaRecorder, recordedBlobs// 聲明變量
var sourceVideo = document.getElementById('source'); // 源視頻
var recordedVideo = document.getElementById('recorded'); // 已錄製視頻
var recordButton = document.getElementById('record'); // 錄製按鈕
recordButton.onclick = toggleRecording; // 設置錄製按鈕點擊動作
// 設置媒體約束，接收聲音和視頻，視頻寬度爲320像素
var constraints = { audio: true, video: { width: 320 } };
// 成功獲取用戶媒體
function handleSuccess(stream) {
recordButton.disabled = false; // 設置錄製按鈕可用
window.stream = stream;
sourceVideo.srcObject = stream; // 將攝像頭畫面顯示在sourceVideo上
}
// 獲取用戶媒體異常
function handleError(error) {
console.log('獲取用戶媒體錯誤: ', error);
}
// 獲取用戶媒體
navigator.mediaDevices.getUserMedia(constraints).
then(handleSuccess).catch(handleError);
// 處理數據可用
function handleDataAvailable(event) {
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data); // 將數據追加到錄製記錄中
}
}
// 切換錄製
function toggleRecording() {
if (recordButton.textContent === '開始錄製') {
startRecording(); // 開始錄製
} else {
stopRecording(); // 停止錄製
recordButton.textContent = '開始錄製';
}
}
// 開始錄製
function startRecording() {
recordedBlobs = []; // 數據記錄初始化
var mimeTypes = ['video/webm;codecs=vp9', 'video/webm;codecs=vp8',
'video/webm'];
// 查找支持的視頻格式
var mimeType = mimeTypes.find(type=>MediaRecorder.isTypeSupported(type)) || '';
try {
// 創建媒體錄製器
mediaRecorder = new MediaRecorder(window.stream, { mimeType });
} catch (e) {
alert('創建媒體錄製器異常');
return;
}
recordButton.textContent = '停止錄製';
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start(10);
}
// 停止錄製
function stopRecording() {
mediaRecorder.stop();
var buf = new Blob(recordedBlobs, { type: 'video/webm' });
// 設置已錄製視頻的源爲錄製好的視頻
recordedVideo.src = window.URL.createObjectURL(buf);
}
</script>
</body>
</html>