Java教程

音视频相关的知识点

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

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来录制视频和上传
  • [译] 网速敏感的视频延迟加载方案
这篇关于音视频相关的知识点的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!