MediaRecorder API

2020 年 11 月 23 日

作者：Youenn Fablet

Safari 技术预览版 105 和最新 iOS 14.3 测试版中的 Safari 默认启用了对 MediaRecorder API 的支持。该 API 接收实时音频/视频内容作为输入，以生成压缩媒体。虽然最直接的用例是从摄像头和/或麦克风录制，但该 API 可以将任何 MediaStreamTrack 作为输入，无论是捕获轨道、使用 WebRTC 从网络接收的轨道，还是从 HTML（Canvas、WebAudio）生成的轨道，如下表所示。

生成的输出以 blob 的形式暴露，可以直接在视频元素中渲染以预览内容、编辑内容，和/或上传到服务器与他人共享。

该 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);
}

以下示例展示了如何将摄像头和麦克风录制为 mp4 内容并在同一页面上进行本地预览。

<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>

未来的工作可能会扩展支持更多编解码器以及支持视频/音频比特率等选项。

WKWebView 中的 getUserMedia

说到最新 iOS 14.3 测试版中的 Safari 和本地捕获，navigator.mediaDevices.getUserMedia 现在可以暴露给 WKWebView 应用程序了。如果嵌入应用程序能够本地捕获音频或视频，则 navigator.mediaDevices.getUserMedia 会自动暴露。请参阅 Apple 文档以满足这些要求。对摄像头和麦克风的访问受用户提示的限制，类似于 Safari 和 SafariViewController 的提示。我们希望在未来版本中扩展 WKWebView API，允许应用程序进一步控制其摄像头和麦克风管理。

我们希望您喜欢这些新功能。一如既往，如果您遇到任何错误（或对未来增强功能有任何想法），请通过在 bugs.webkit.org 上提交错误报告来告知我们。