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>
