音视频相关的知识点

本文主要是介绍音视频相关的知识点，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

video

• 如果需要用户自己手动播放的视频，最好指定 preload属性

preload=none

• MP4格式视频的编码方式有3种，mpg4(xdiv),mpg4(xvid)，avc(h264), html 5 的 video 只支持 avc(h264) 格式的视频编码方式。所以，不符合格式的视频，可能只显示音频而无画面。

WebRTC

• WebRTC 是一个可以在 Web 应用程序中实现音频，视频和数据的实时通信的开源项目
• 常用API

getUserMedia：获取音频和视频流（MediaStream）
RTCPeerConnection：点对点通信
RTCDataChannel：数据通信

getUserMedia

• 用户获取用户的音视频流
• 官方网址说明
• 使用

// 判断是否有 navigator.mediaDevices，没有赋成空对象
    if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
    }

    // 继续判断是否有 navigator.mediaDevices.getUserMedia，没有就采用 navigator.getUserMedia
    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia = function(prams) {
            let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
            // 兼容获取
            if (!getUserMedia) {
                return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
            }
            return new Promise(function(resolve, reject) {
                getUserMedia.call(navigator, prams, resolve, reject);
            });
        };
    }
navigator.mediaDevices.getUserMedia({ audio: true, video: true }) 
    // 参数表示需要同时获取到音频和视频
        .then(stream => {
          // 获取到优化后的媒体流
          let video = document.querySelector('#rtc');
          video.srcObject = stream;
        })
        .catch(err => {
          // 捕获错误
        });

RTCPeerConnection

RTCPeerConnection 接口代表一个由本地计算机到远端的 WebRTC 连接。该接口提供了创建，保持，监控，关闭连接的方法的实现。—— MDN

canvas

• 一些对于视频画面的调整、截屏、动画录制，通常借助于canvas

参考

• Html5 视频播放之video标签的使用(包含注意事项，例如视频无法正常展示，只显示音频等问题)
• 【从头到脚】撸一个多人视频聊天 — 前端 WebRTC 实战
• 示例：JS 播放视频流时调整 色度， 饱和度，亮度，对比度
• 知识：视频流媒体播放的一些知识
• 示例：在H5中使用video结合canvas来录制视频和上传
• [译] 网速敏感的视频延迟加载方案

这篇关于音视频相关的知识点的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！