前端必须理解知识点—HTML5音视频处理

天小编将分享前端开发中必学的知识点，HTML5中关于音视频处理

视频处理

基本内容：目前国内的视频网站 - Flash技术，HTML5的视频处理首先替换Flash技术，支持的视频格式有：

1.MP4 - .mp4 目前比较主流的视频格式。

2.OGG - .ogv 手机端的视频格式。

3.WebM - 目前唯一一个支持超高清视频格式，该视频格式出自Goggle公司。

问：如何处理视频？

答：<video>元素 - 引入单个格式视频文件，它由自己的属性组成。 src属性 - 指定视频文件的地址， width属性 - 设置视频宽度， height属性 - 设置视频高度。语法规范：<video src="视频文件路径" width=“100px”>

！！需要注意的是：视频的宽高比不会改变，在video元素内定义不支持的提示内容。

如果要想在<video>元素引入多个格式视频文件，那么就使用<source/>，使用这种方式能够实现各个浏览器的兼容性，语法规范：

<video>

</video>

<video>元素的属性

autoplay属性 - 自动播放

controls属性 - 提供控制面板

loop属性 - 循环播放

poster属性 - 播放之前显示一张图片

preload属性 - 预加载(视频)

none - 不加载

auto - (默认值)自动(尽快加载完毕)

metadata - 只加载除视频之外的信息(宽和高)

video的高级用法方法

play() - 播放视频

pause() - 暂停视频

load() - 加载视频

canPlayType() - 判断是否支持该格式

事件

play - 播放视频时触发

pause - 暂停视频时触发

ended - 结束播放时触发

error - 播放错误时触发

canplay - 可播放时触发(不考虑整体)

canplaythrough - 整体播放顺利时触发

progress - 下载进度

属性

paused - 判断视频当前是否暂停，如果暂停状态,返回true

ended - 判断视频当前是否结束播放，如果结束播放,返回true

duration - 当前视频的总时长

currentTime - 获取或设置当前视频播放的位置

音频处理

基本内容：目前HTML页面实现音频处理，将Windows Media Player播放器,内置页面中，使用Flash技术实现音频处理，HTML5实现音频处理支持的音频格式有：

1.mp3 - 感谢百度(MP3)

2.ogg

3.wav

问：如何使用音频？

答： audio元素 - 引入一种音频格式。

<audio>元素的属性

src属性 - 引入音频文件，作用 - 实现页面背景音乐播放

audio元素 - 引入多种音频格式

source元素

autoplay - 自动播放

controls - 提供控制面板

loop - 循环播放

preload - 预加载

audio的高级用法

事件

play - 播放音频时触发

方法

play() - 播放音频

pause() - 暂停音频

属性

paused - true,表示暂停状态

！！需要特别注意，IE 8及之前的版本都不支持

么是WebRTC?

WebRTC，网页即时通信（Web Real-Time Communication），实现了基于网页的视频会议。WebRTC具有免安装，方便接入的特点，它不需要安装任何插件，在浏览器上就可以实现网页端的实时通信。在浏览器之间快速地实现音视频通信。
WebRTC是一个开源项目，旨在使得浏览器能为实时通信（RTC）提供简单的JavaScript接口。说的简单明了一点就是让浏览器提供JS的即时通信接口。这个接口所创立的信道并不是像WebSocket一样，打通一个浏览器与WebSocket服务器之间的通信，而是通过一系列的信令，建立一个浏览器与浏览器之间（peer-to-peer）的信道，这个信道可以发送任何数据，而不需要经过服务器。并且WebRTC通过实现MediaStream，通过浏览器调用设备的摄像头、话筒，使得浏览器之间可以传递音频和视频。

音视频采集基本概念

在正式介绍 JavaScript 采集音视频数据的 API 之前，你还需要了解一些基本概念。这些概念虽然都不难理解，但在后面讲解 API 时都会用到它们，很是重要，所以在这里我还是给你着重汇总和强调下。

摄像头 ：用于捕捉（采集）图像和视频。

帧率：现在的摄像头功能已非常强大，一般情况下，一秒钟可以采集 30 张以上的图像，一些好的摄像头甚至可以采集 100 张以上。我们把摄像头一秒钟采集图像的次数称为帧率。帧率越高，视频就越平滑流畅。然而，在直播系统中一般不会设置太高的帧率，因为帧率越高，占的网络带宽就越多。

分辨率：摄像头除了可以设置帧率之外，还可以调整分辨率。我们常见的分辨率有 2K、1080P、720P、420P 等。分辨率越高图像就越清晰，但同时也带来一个问题，即占用的带宽也就越多。所以，在直播系统中，分辨率的高低与网络带宽有紧密的联系。也就是说，分辨率会跟据你的网络带宽进行动态调整。

宽高比：分辨率一般分为两种宽高比，即 16:9 或 4:3。4:3 的宽高比是从黑白电视而来，而 16:9 的宽高比是从显示器而来。现在一般情况下都采用 16:9 的比例。

麦克风：用于采集音频数据。它与视频一样，可以指定一秒内采样的次数，称为采样率。每个采样用几个 bit 表示，称为采样位深或采样大小。

轨（Track）：WebRTC 中的“轨”借鉴了多媒体的概念。火车轨道的特性你应该非常清楚，两条轨永远不会相交。“轨”在多媒体中表达的就是每条轨数据都是独立的，不会与其他轨相交，如 MP4 中的音频轨、视频轨，它们在 MP4 文件中是被分别存储的。
流（Stream）：可以理解为容器。在 WebRTC 中，“流”可以分为媒体流（MediaStream）和数据流（DataStream）。其中，媒体流可以存放 0 个或多个音频轨或视频轨；数据流可以存 0 个或多个数据轨。

音视频采集

相关学习资料推荐，点击下方链接免费报名，先码住不迷路~】

音视频免费学习地址：https://xxetb.xet.tech/s/2cGd0

【免费分享】音视频学习资料包、大厂面试题、技术视频和学习路线图，资料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以点击788280672加群免费领取~

1. getUserMedia 方法

在浏览器中访问音视频设备非常简单，只要调用 getUserMedia 这个 API 即可。该 API 的基本格式如下：

// 参数对于音视频的描述
const constraints={
    video: {
        frameRate: {min: 20},  //视频的帧率最小 20 帧每秒
        width: {min: 640, ideal: 1280}, //最小宽度640，理想宽度1280
        height: {min: 360, ideal: 720},//最小高度640，理想高度1280
        aspectRatio: 16/9 //宽高比是 16:9
    },
    audio: {
        echoCancellation: true, //音频开启回音消除
        noiseSuppression: true, // 开启降噪
        autoGainControl: true // 开启自动增益功能
    }
};

let promise=navigator.mediaDevices.getUserMedia(constraints);

它返回一个 Promise 对象。

如果 getUserMedia 调用成功，则可以通过 Promise 获得 MediaStream 对象，也就是说现在我们已经从音视频设备中获取到音视频数据了。
如果调用失败，比如用户拒绝该 API 访问媒体设备（音频设备、视频设备），或者要访问的媒体设备不可用，则返回的 Promise 会得到 PermissionDeniedError 或 NotFoundError 等错误对象。

如何使用 getUserMedia API

1.创建html文件

<!DOCTYPE html>
<html>
    <head>
        <title>Realtime communication with WebRTC</title>
        <link rel="stylesheet", href="css/client.css" />
    </head>
    <body>
        <h1>Realtime communication with WebRTC </h1>
        <video autoplay playsinline></video>
        <script src="js/client.js"></script>
    </body>
</html>

 <video autoplay playsinline></video>

autoplay，表示当页面加载时可以自动播放视频；
playsinline，表示在 HTML5 页面内播放视频，而不是使用系统播放器播放视频

2.创建client.js在html中引入

const mediaStreamContrains={
    video: true
};
const localVideo=document.querySelector('video');
function gotLocalMediaStream(mediaStream){
    localVideo.srcObject=mediaStream;
}
function handleLocalMediaStreamError(error){
    console.log('navigator.getUserMedia error: ', error);
}
navigator.mediaDevices.getUserMedia(mediaStreamContrains).then(
    gotLocalMediaStream
).catch(
    handleLocalMediaStreamError
);

JavaScript 代码中首先执行 getUserMedia() 方法，该方法会请求访问 Camera。如果是第一次请求 Camera（摄像头），浏览器会向用户弹出提示窗口，让用户决定是否可以访问摄像头。如果用户允许访问，且设备可用，则调用 gotLocalMediaStream 方法。

在 gotLocalMediaStream 方法中，其输入参数为 MediaStream 对象，该对象中存放着 getUserMedia 方法采集到的音视频轨。我们将它作为视频源赋值给 HTML5 的 video 标签的 srcObject 属性。这样在 HTML 页面加载之后，就可以在该页面中看到摄像头采集到的视频数据了。

getUserMedia API 控制设备的参数及其含义如下：

原文 WebRTC（一）getUserMedia 使用

责制定Web标准的World Wide Web Consortium (W3C)正式发表了HTML5.1推荐规格，规格定义了HTML语言第五大版本的第一个小版本。W3C已在着手制定下个版本HTML5.2。大部分浏览器已经实现或即将实现HTML5.1引入的新特性和变化。根据HTML5.1实现报告，Edge/IE在实现进展上要落在Chrome和Firefox后面。

下面给大家介绍下新功能。

1.HTMLFormElement.reportValidity()

如果元素的子控件满足其验证约束，HTMLFormElement.reportValidity（）方法将返回true。返回Whenfalse时，对每个无效子项触发可取消的无效事件，并将验证问题报告给用户。

句法（syntax）

HTMLFormElement.reportValidity()

例子：

document.forms["myform"].addEventListener('invalid', function() {
//Optional response here.
}, false);
document.forms["myform"].addEventListener('submit', function() {
document.forms["myform"].reportValidity();
}, false);

今天笔记本没有电了，只能到这了，还有更多的看大家兴趣了，大概列下：HTMLMediaElement.fastseek()

HTMLElement.forceSpellcheck()

ImageBitmap interface

registerProtocolHandler()

XMLDocument interface

Restore <a rev="">

在线咨询

上一篇：前端CSS-3D交互，跟随鼠标3D旋转
下一篇：WebBrowser控件网页数据抓取（I） - EX

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。