前端音视频入门，读这一篇就够了【详解篇】

前言

随着互联网技术的发展，音视频内容已经成为我们日常生活中不可或缺的一部分。对于前端开发者来说，掌握音视频技术是很有必要的。本文将从基础知识入手，逐步深入到前端音视频技术的核心内容，帮助你构建音视频应用。

一：音视频基础概念

iphone16 发布时，说视频拍摄支持 4k/120fps 时什么意思？？？ 在深入技术之前， 我们首先需要了解一些音视频的基本概念，如采样率、比特率（码率）、帧率、分辨率等

1. 采样率（Sampling Rate）：

   • 音频：采样率是指每秒钟采集音频样本的次数，单位是赫兹（Hz）。常见的采样率有 44.1kHz（CD 标准）、48kHz（视频制作标准）、96kHz 或 192kHz（高保真音频）。采样率越高，音质也越好。
   • 视频：视频采样率通常指的是帧率（下面讲到），即每秒钟显示的静止画面（帧）的数量。

2. 比特率（码率，Bitrate）：

   • 音频：比特率是指每秒钟传输的比特数，单位是比特每秒（bps）,比特率越高，音频文件越大，音质也越好。
   • 视频：视频比特率是指每秒钟传输的数据量，它包括了视频画面和可能伴随的音频数据,比特率越高，视频质量越好。

3. 帧率（Frame Rate）：

   • 视频：帧率是指视频每秒钟显示的静止画面（帧）的数量，单位是帧每秒（fps）。帧率越高，视频看起来越流畅。常见的帧率有 24fps（电影）、30fps（电视）、60fps（高清视频游戏）,120fps（用做慢动作视频）。

4. 分辨率（Resolution）：

   • 视频：分辨率是指屏幕宽度和高度的像素数。分辨率越高，画面越清晰。常见的分辨率有 480p、720p、1080p（全高清）、4K（超高清）等。
   • PPI(Pixels Per Inch): 每英寸的显示区域内水平或垂直方向上有多少个像素点

5. 位深（Bit Depth）：

   • 音频：位深决定了每个采样点可以表示的声音强度级别数(Math.pow(2,16)= 65536)。常见的位深有 16 位、24 位等。位深越高，能够表示的声音细节越多。
   • 视频：位深是指每个颜色通道的比特数，它决定了颜色的精细程度（Math.pow(2,8)= 256）。常见的位深有 8 位、10 位、12 位等。

6. 压缩（Compression）：

   • 音频和视频：有两种压缩方式:有损压缩 MP3（音频）和 MP4（视频）和 无损压缩如 FLAC（音频）、FFV1（视频）。

7. 编解码器（Codec）：

   音视频的编解码器（Codec）是用于数字媒体压缩和解压缩的软件或硬件。以下是一些常见的音视频编解码器：

   视频编解码器：

   • H.264/AVC：广泛用于视频会议、视频流和移动视频，支持高清视频，是目前最流行的视频编码标准之一。
   • H.265/HEVC：是 H.264 的继承者，提供更好的压缩效率，用于 4K 视频流和广播。
   • VP9：由 Google 开发，用于网络视频流，支持 4K 视频。

   音频编解码器：

   • MP3：非常流行的音频编码格式，广泛用于音乐和音频流。
   • AAC：是 MPEG-4 标准的一部分，用于音乐、视频和广播。
   • FLAC：是一种无损音频编码格式，常用于音频发烧友。
   • ALAC：是 Apple 开发的无损音频编码格式。

8. 流媒体协议

   流媒体协议用于控制和传输音视频数据

   • HLS (HTTP Live Streaming)：由苹果公司开发，是目前最常用的流媒体协议，支持自适应比特率流，与多种设备和平台兼容，包括 iOS、Android、智能电视等。
   • RTMP (Real-Time Messaging Protocol)：广泛用于直播领域，尤其是在 Flash Player 中，但现在逐渐被 HLS 和其他更现代的协议所取代。
   • WebRTC (Web Real-Time Communication)：支持网页浏览器之间的实时通信，适用于视频会议和直播，提供低延迟的流媒体体验。
   • MPEG-DASH (Dynamic Adaptive Streaming over HTTP)：作为一种开源标准，支持自适应比特率流，与多种设备和平台兼容，且不受特定公司控制。
   • RTSP (Real Time Streaming Protocol)：主要用于娱乐行业，与 RTP 和 RTCP 配合使用，但不如 HLS 和 MPEG-DASH 流行。
   • SRT (Secure Reliable Transport)：是一种开源协议，提供高安全性和可靠性，适用于专业视频流传输。

二：HTML5 Media APIs

HTML5 为我们提供了<audio>和<video>标签，以及相关的 JavaScript API，使得在网页中嵌入和控制音视频变得简单。

基本用法

<audio controls src="horse.mp3" id="audio"></audio>
<!-- or -->
<video controls id="audio">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  您的浏览器不支持 Video 标签。
</video>

audio 标签支持的属性：autoplay、controls、loop、muted、preload、src

audio不仅是一个标签，也是window下的一个对象，作为对象，具有一些对象属性和对象方法：
对象属性：

• currentTime：获取当前播放时间
• duration：获取歌曲的总时间
• pause：是否暂停，返回布尔值

对象方法：

• play()：播放
• pause()：暂停
• load()：重新加载

//        重新播放
function restart() {
    
    
  let audio = document.getElementById('audio')
  audio.currentTime = 0
  audio.play()
}
//播放
function start() {
    
    
  let audio = document.getElementById('audio')
  if (audio !== null) {
    
    
    if (audio.paused) {
    
    
      audio.play() //播放
    } else {
    
    
      audio.pause() // 暂停
    }
  }
}

三：Media Source Extensions (MSE)

媒体源扩展 API（MSE）提供了实现无插件且基于 Web 的流媒体的功能。使用 MSE，媒体串流能够通过 JavaScript 创建，并且能通过使用 和 元素进行播放。
Media Source Extensions

使用示例

// 获取视频元素
const video = document.querySelector('video')

// 检查浏览器是否支持MSE
if (MediaSource && MediaSource.isTypeSupported('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')) {
    
    
  const mediaSource = new MediaSource()
  video.src = URL.createObjectURL(mediaSource)

  // 当MediaSource对象准备好接收数据时触发
  mediaSource.addEventListener('sourceopen', function () {
    
    
    const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')

    // 假设你已经有了要播放的视频数据
    fetch('http://localhost:5500/static/video.mp4')
      .then(response => response.arrayBuffer())
      .then(data => {
    
    
        sourceBuffer.addEventListener('updateend', function () {
    
    
          // 当SourceBuffer准备好接收更多数据时开始播放
          if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
    
    
            mediaSource.endOfStream()
            video.play().catch(e => console.error('Error playing video:', e))
          }
        })
        sourceBuffer.appendBuffer(data)
      })
      .catch(e => console.error('fetch 错误：', e)):
  })
} else {
    
    
  console.error('当前浏览器 不支持  MediaSource API ')
}

四：WebRTC

WebRTC 允许在网页上进行点对点的音视频通信。

获取媒体流

// 获取视频元素
const video = document.querySelector('video')

navigator.mediaDevices
  .getUserMedia({
    
     video: true, audio: true })
  .then(stream => {
    
    
    const video = document.querySelector('video')
    video.srcObject = stream
  })
  .catch(error => {
    
    
    console.error('无法获取媒体流', error)
  })

五：Web Audio API

Web Audio API 提供了一个用于处理和操纵音频的高级接口，这个 API 可以用来实现各种音频效果，如混音、音效处理、音频可视化等。
Web Audio API 是一种用于处理和操纵音频的 Web 标准，它提供了一个强大的接口，允许开发者在网页应用中创建、控制和操作音频数据。这个 API 可以用来实现各种音频效果，如混音、音效处理、音频可视化等。

Web Audio API 的主要特点包括：

1. 音频节点（Audio Nodes）：Web Audio API 使用一个基于节点的架构，每个节点代表一个音频处理模块，例如音频源、过滤器、混音器等。

2. 音频上下文（AudioContext）：这是处理音频的起点，所有音频操作都需要在一个 AudioContext 实例中进行。

3. 音频源（Audio Sources）：如音频文件、振荡器、噪声源等，它们可以被用来生成音频数据。

4. 音频处理：包括混音器（GainNode）、均衡器（BiquadFilterNode）、混响（ConvolverNode）、动态处理器（DynamicsCompressorNode）等。

5. 音频路由：可以将不同的音频节点连接起来，形成音频处理的流程。

6. 实时处理：可以在用户与音频交互时实时处理音频，例如实时调整音量或应用音效。

7. 离线渲染：可以在不与文档的其余部分交互的情况下处理和渲染音频。

8. 脚本控制：可以通过 JavaScript 脚本控制音频的播放、暂停、循环等。

使用示例

// 创建 AudioContext
const audioContext = new (window.AudioContext || window.webkitAudioContext)()

// 加载和解码音频文件：
fetch('sound.mp3')
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
  .then(audioBuffer => {
    
    
    // 使用audioBuffer进行音频处理
    const source = audioContext.createBufferSource()
    source.buffer = audioBuffer // 之前解码得到的音频数据
    source.connect(audioContext.destination) // 连接到输出（扬声器）
    source.start() // 播放音频
  })

六：自适应比特率流

**工作原理: ** 将视频编码成多个比特率的版本，然后通过网络流式传输。播放器会根据当前的网络状况和设备性能，自动选择最合适的比特率进行播放。如果检测到网络带宽增加，播放器会切换到更高比特率的视频流以提高清晰度；相反，如果带宽减少，则会选择较低比特率的视频流以避免缓冲和卡顿

HLS 工作流程大致如下：

• 视频分段：视频编码器将输入的视频流转码为一系列较小的视频文件（通常是 TS 或 MP4 格式），每个文件包含视频的一小部分。

• 创建播放列表：生成一个 M3U8 文件，这是一个基于 UTF-8 编码的文本文件，它作为播放列表，列出了所有视频段的顺序和元数据。

• 流式传输：播放器请求播放列表，然后顺序下载和播放视频段。播放器会根据用户的网络条件和播放器的缓冲情况，动态选择不同质量的视频流。

HLS.js 库使用示例：

<video id="video" controls></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  if (Hls.isSupported()) {
      
      
    const video = document.getElementById('video')
    const hls = new Hls()
    hls.loadSource('playlist.m3u8')
    hls.attachMedia(video)
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
      
      
      video.play()
    })
  }
</script>

七：工具和库

熟悉常用的音视频处理工具和库，如 FFmpeg、video.js 等。

使用 FFmpeg 进行格式转换

# 使用 H.264 编码器进行转码，输出的视频质量设置为 CRF 25（质量较好），编码速度选择为 fast
ffmpeg -i input.mp4 -c:v libx264 -crf 25 -preset fast output.mp4

使用 video.js 播放视频

• 官方文档

<link href="//vjs.zencdn.net/8.17.3/video-js.min.css" rel="stylesheet" />
<script src="//vjs.zencdn.net/8.17.3/video.min.js"></script>

<video id="my-video" class="video-js">
  <source src="movie.mp4" type="video/mp4" />
  您的浏览器不支持 HTML5 视频。
</video>

<script>
  var player = videojs('my-video')
  var options = {
      
      
    preload: 'auto',
    muted: true,
  }

  var player = videojs('my-player', options, function onPlayerReady() {
      
      
    videojs.log('Your player is ready!')

    // In this context, `this` is the player that was created by Video.js.
    this.play()

    // How about an event listener?
    this.on('ended', function () {
      
      
      videojs.log('Awww...over so soon?!')
    })
  })
</script>

结语

前端音视频技术是一个不断发展的领域，它为创造丰富、交互性强的网络应用提供了可能。通过掌握上述技术和工具，你可以构建出更加动态和吸引人的网页应用。记住，技术在不断进步，持续学习和实践是关键。