webRTC-01本地媒体采集

采集本地媒体

1. navigator.mediaDevices.getUserMedia 使用摄像头和音频
2. navigator.mediaDevices.getDisplayMedia 共享屏幕
3. navigator.mediaDevices.enumerateDevices 列出可用的媒体
4. [HTMLMediaElement|HTMLCanvasElement].captureStream 捕获媒体流

播放媒体流

<video id="myMedia" width="500" height="500" autoplay controls></video>
<script>
    const myMedia = document.querySelector("#myMedia");
    function getUserMedia() {
        navigator.mediaDevices
                .getUserMedia({ video: true })
                .then(mediaSteam => {
                        myMedia.srcObject = mediaSteam;
                })
                .catch(err => {
                        console.log(err);
                });
    }
    getUserMedia();
</script>

录制媒体流

1. 通过MediaRecorder APi对获取到的媒体流进行处理
2. 实例👇

// 视频录制
function getRecorder(stream) {
    let chunk = [];
    const recorder = new MediaRecorder(stream);
    // 每一次的记录（可以是全部也可以是分时间段记录的） Blob{}
    recorder.ondataavailable = ({ data }) => {
            chunk.push(data);
            // download下载
    };
    recorder.start();
    setTimeout(() => {
            recorder.stop();
    }, 5 * 1000);
}

理解媒体流 MediaStream

1. 媒体流是采用流式传输的方式，使得流式媒体在Internet上播放的技术。通过网络传输的音频、视频或多媒体文件在播放前并不下载整个文件，数据流随时传送随时播放，只是在开始时有一些延迟
2. 媒体流可以被采集、传输和播放，通常一个媒体路包含多个媒体轨道MediaStreamTrack（如音频轨道 视频轨道）
3. 媒体流通过MediaStream接口管理
4. MDN介绍

媒体约束和媒体能力

1. 媒体约束：限制媒体的特性（分辨率 帧率 等等）
2. 媒体能力：当前设备能够支持哪些约束
3. 处理媒体特性的方法

• MediaDevices.getSupportedConstraints()：获取当前浏览器支持的约束数组。
• MediaStreamTrack.getCapabilities()：有了支持的约束数组，使用该方法获取这些约束的取值范围。
• MediaStreamTrack.applyConstraints()：根据应用程序的需要，调用该方法为约束指定自定义的值。
• MediaStreamTrack.getConstraints()：获取上述applyConstraints方法传入的值。
• MediaStreamTrack.getSettings()：获取当前轨道上所有约束的实际值。

4. 具体约束

参考文献

1. MDN
2. webRTC技术详解 - 栗伟