Safari 技术预览版以及Safari在最新的iOS 14.3 beta版中默认支持MediaRecorder API。此API将实时音频/视频内容作为输入，以生成压缩媒体。虽然直接的用例是从相机和/或麦克风录制，但此API可以将任何MediaStream媒体流作为输入，无论是使用WebRTC从网络获取的，还是从HTML（Canvas、WebAudio）生成的，如下图所示。
生成的流媒体，可以很容易地呈现在视频元素中，以预览内容、编辑内容和/或上载到服务器以与其他人共享。
可以检测此API以及支持的文件/容器格式和音频/视频编解码器集。Safari目前支持MP4文件格式，H.264作为视频编解码器，AAC作为音频编解码器。MediaRecorder检查如下：
function supportsRecording(mimeType)
{
if (!window.MediaRecorder)
return false;
if (!MediaRecorder.isTypeSupported)
return mimeType.startsWith("audio/mp4") || mimeType.startsWith("video/mp4");
return MediaRecorder.isTypeSupported(mimeType);
}
下面的demo 告诉你如何使用这个API
<html>
<body>
<button onclick="startRecording()">start</button><br>
<button onclick="endRecording()">end</button>
<video id="video" autoplay playsInline muted></video>
<script>
let blobs = [];
let stream;
let mediaRecorder;
async function startRecording()
{
stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = (event) => {
// Let's append blobs for now, we could also upload them to the network.
if (event.data)
blobs.push(event.data);
}
mediaRecorder.onstop = doPreview;
// Let's receive 1 second blobs
mediaRecorder.start(1000);
}
function endRecording()
{
// Let's stop capture and recording
mediaRecorder.stop();
stream.getTracks().forEach(track => track.stop());
}
function doPreview()
{
if (!blobs.length)
return;
// Let's concatenate blobs to preview the recorded content
video.src = URL.createObjectURL(new Blob(blobs, { type: mediaRecorder.mimeType }));
}
</script>
</body>
</html>
webkit团队未来的工作可能会扩展对其他编解码器的支持
