MediaRecorder API

最新推荐文章于 2024-05-11 10:19:02 发布

allway2

最新推荐文章于 2024-05-11 10:19:02 发布

阅读量375

点赞数

文章标签： java

本文链接：https://blog.csdn.net/allway2/article/details/120668780

版权

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

allway2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
MediaRecorder API

byYouenn FabletMediaRecorder API将实时音频/视频内容作为输入以生成压缩媒体。虽然直接用例是从摄像头和/或麦克风录制，但此 API 可以将任何 MediaStreamTrack 作为输入，无论是捕获轨道、来自使用 WebRTC 的网络，还是从 HTML（Canvas、WebAudio）生成，如图所示在下面的图表中。生成的输出显示为 blob，可以很容易地在视频元素中呈现，以预览内容、编辑内容和/或上传到服务器以与他人共享。这个 API 可以被特征检测...
复制链接

扫一扫