WebRtc07: 音视频录制实战

原创

于 2025-02-09 13:31:05 发布 · 583 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#音视频

录制基础知识

MediaRecorder

// stream通过getUserMedia获取
var mediaRecorder = new MediaRecorder(stream[,option]);

option参数说明

在这里插入图片描述

API和事件

// API
// 开始录制媒体，timeslice是可选的，如果设置了会按时间切片存储数据
MediaRecorder.start(timeslice)
// 停止录制，此时会触发包括最终Blob数据的dataavailable事件
MediaRecorder.stop()
// 暂停录制
MediaRecorder.pause()
// 恢复录制
MediaRecorder.resume()
// 类型支持
MediaRecorder.isTypeSupported()

// 事件
// 数据有效时触发, 每次记录一定时间的数据时（如果没有指定时间切片，则记录整个数据）会定期触发
MediaRecorder.ondataavailable
// 当有错误发生时，录制会被停止
MediaRecorder.onerror

JavaScript几种数据存储方式

字符串
Blob：类似一块搞笑的存储区域，方便将整个缓冲区写入文件
ArrayBuffer
ArrayBufferView

实战

录制音视频

实测使用firefox浏览器不支持webm
index.html

<html>
    <head>
            <title>WebRtc capture video and audio</title>
            <style>
                .none {
     
     
                        -webkit-filter: none;
                }
                .blur {
     
     
                        -webkit-filter: blur(3px);
                }
                .grayscale {
     
     
                        -webkit-filter:grayscale(1);
                }
                .invert {
     
     
                        -webkit-filter: invert(1);
                }
                .sepia {
     
     
                        -webkit-filter:sepia(1);
                }
            </style>
    </head>
    <body>
                <div>
                        <label>audioSource:</label>
                        <select id="audioSource"></select>
                </div>
                <div>
                        <label>audioOutput:</label>
                        <select id="audioOutput"></select>
                </div>
                <div>
                        <label>videoSource:</label>
                        <select id="videoSource"></select>
                </div>
                <div>
                        <label>filter:</label>
                        <select id="filter">