WebRTC学习（四）WebRTC音视频录制

（一）MediaRecoder类基本格式

（二）options限制选项

WebRTC学习（四）WebRTC音视频录制

mimeType:用来指定要录制的是视频还是音频，即录制的格式是什么，上面的列表中是webm格式的多媒体类型，也可以设置为其他格式，比如mp4。也可以指定编码方式

（三）MediaRecorder常用API

WebRTC学习（四）WebRTC音视频录制

如果不选择timeslice，则所有的数据会存储到一个大的buffer中，设置了timeslice，则会按timeslice分块存储数据，存为小块的数据

stop不会丢弃最后一块数据，会使得生效存储下来

WebRTC学习（四）WebRTC音视频录制

isTypeSupported:用来检查是否支持对应的格式类型

（四）MediaRecorder事件

WebRTC学习（四）WebRTC音视频录制

对于ondataavailable事件：如果指定了timeslice，则会每隔一段时间触发这个事件，然后对数据进行处理。如果没有指定timeslice，则会在视频录制完成，调用stop结束录制时去出发这个事件

（五）javascript存储方式

WebRTC学习（四）WebRTC音视频录制

Blob是一块高效的存储区域（无类型的数据缓冲区），可以将整个缓冲区写入文件中。Blob是ArrayBuffer的封装，更加高效的处理ArrayBuffer。ArrayBufferView是带有类型的ArrayBuffer

二：使用MediaRecoder实现录制和播放

（一）代码实现

<html>
    <head>
        <title>    WebRTC get audio and video devices </title>
        <style>
            .none {
                -webkit-filter: none;
            }

            .blue {
                -webkit-filter: blur(3px); 
            }

            .grayscale {
                -webkit-filter: grayscale(1);
            }

            .invert {
                -webkit-filter: invert(1);
            }

            .sepia {
                -webkit-filter: sepia(1);
            }
        </style>
    </head>
    <body>
        <h1>Index5.html</h1>
        <div>
            <table>
                <tr>
                    <td>
                        <video autoplay playsinline id="player"></video>
                    </td>
                    <td>
                        <video playsinline id="recplayer"></video>
                    </td>
                    <td>
                        <div id="constraints"></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button id="record">Start Record</button>
                    </td>
                    <td>
                        <button id="recplay" disabled>Start Play</button>
                    </td>
                    <td>
                        <button id="download" disabled>download</button>
                    </td>
                </tr>
            </table>
        </div>
    </body>
    <script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script type="text/javascript" src="./js/client5.js"></script>
    
</html>

index5.html