优秀网站建设报价,可信网站认证申请,天河公司网站建设公司,珠海网站策划前言
浏览器中已经能直接播放视频#xff0c;为什么还需要手动写代码解析#xff1f;
因为#xff0c;某些场景需要对视频进行更细致的处理#xff0c;比如截取关键帧、提取视频中的文字、人物打码、极低延时播放视频等等。
总之#xff0c;除了最单纯的视频播放外为什么还需要手动写代码解析
因为某些场景需要对视频进行更细致的处理比如截取关键帧、提取视频中的文字、人物打码、极低延时播放视频等等。
总之除了最单纯的视频播放外对视频数据的一切处理都需要从解析开始。
MP4 简单介绍
MP4 是最流行兼容性最好的视频封装格式之一在各种浏览器中也得到了良好支持 本系列后续都以 MP4 视频作为示例所以先简单介绍 MP4 的基本概念。 其它格式的视频文件需使用对应的解封装 SDK
MP4 可以分为普通 MP4 和 Fragment MP4 普通 MP4 的元数据可在音视频数据前面利于网络播放也可在后面 Fragment MP4 把音视频数据切成一个个小片段管理非常方便直播场景也是 MSE 唯一支持的格式。 MP4 使用 Box 的抽象概念来描述管理数据不同的数据抽象成不同的 Box允许多层嵌套 Box 下图是一个普通 MP4 文件的可视化该文件视频分辨率存储在 moov box - trak box - ... - avc1 box 中已编码压缩的音视频数据则存储在 mdata box 中 你可以访问 mp4box.js filereader 来可视化 MP4 文件
MP4 解封装
我们使用 mp4box.js 在浏览器中解封装demuxMP4 文件 解封装demux可以理解为提取 MP4 文件的元数据以及将音视频数据解析成一个个包Sample方便处理。 而 MP4 Sample 可转换为 EncodedVideoChunk 或 EncodedAudioChunk。 WebAV 项目中的 SampleTransform 可将 MP4 文件流转换成 Sample 流(ReadableStream) mp4FileStream.pipeThrough(new SampleTransform())即可得到 Sample 流。
解封装伪代码
mp4box.js API 文档
const file mp4box.createFile()
file.onReady info {file.setExtractionOptions(info.videoTracks[0]?.id, video)file.setExtractionOptions(info.audioTracks[0]?.id, audio)file.start()
}file.onSamples (id, type, samples) {// EncodedVideoChunk 或 EncodedAudioChunkconst chunks samples.map(s new EncodedVideoChunk({type: (s.is_sync ? key : delta)timestamp: (1e6 * s.cts) / s.timescale,duration: (1e6 * s.duration) / s.timescale,data: s.data}))
}const mp4stream await fetch(mp4 url).body
let inputBufOffset 0
while (read ui8ArrBuf for mp4stream) {const inputBuf ui8ArrBuf.bufferinputBuf.fileStart inputBufOffsetinputBufOffset inputBuf.byteLengthfile.appendBuffer(inputBuf)
}解封装过程不会消耗过多的计算资源一般使用 js 处理也不会碰到性能瓶颈该过程不在 WebCodecs 的覆盖范围内。
视频解码
不同的视频需要对应的解封装程序解封装得到的数据如 MP4 Sample可转换为 WebCodecs 中提供的 EncodedVideoChunk 或 EncodedAudioChunk然后分别由 VideoDecoder 或 AudioDecoder 进行解码解压。 使用解码器之前需要初始化配置decoder.configure必填参数 codec 可以在解封装时拿到onReady。 const videoDecoder new VideoDecoder({output: (videoFrame) {// videoFrame 可绘制到 Canvas 进行额外处理},error: console.error,
});
videoDecoder.configure({ codec: 视频数据对应的编码格式 });解码视频数据得到多个 VideoFrame, AudioData 对象这两个对象包含了对应帧视频、音频的原始数据可通过其实例的 copyTo 方法将原始数据 copy 到 ArrayBuffer 中。 TIP VideoFrame 可能占用大量显存及时 close 避免影响性能 VideoFrame.copyTo 会将帧的原始数据从显存复制到内存像素处理请优先使用 WebGL VideoDecoder 输出output的 VideoFrame 需要及时 close 否则它将暂停解码 ::: 视频帧处理
在浏览器中一般配合使用 Canvas 对 VideoFrame 进行处理如 降低视频分辨率 绘制 VideoFrame 到 Canvas ctx.draw(videoFrame, 0, 0) 创建新的 VideoFrame new VideoFrame(canvas, {...}) 裁剪视频使用 ctx.draw 后面的定位参数绘制 VideoFrame 指定区域 叠加视频、图片、文字等先绘制 VideoFrame 再绘制其他元素 降低帧率平均抽取丢掉多余帧如 60FPS - 30FPS大概每两帧丢掉一帧不绘制 滤镜、抠图、特效等复杂图形处理使用 WebGL 或 WebGPU WebAV 视频解析示例
mp4box.js 解封装配合 WebCodecs 解码原理上很简单但需要阅读大量文档、API 以及编写很多细节逻辑汇总起来就相对繁琐了。 webav/av-cliper 提供了 MP4Clip 可以将视频流转换成视频帧VideoFrame 屏蔽许多繁琐过程
import { MP4Clip } from webav/av-cliper;// 传入一个 mp4 文件流即可初始化
const clip new MP4Clip((await fetch(mp4 url)).body);
await clip.ready;let time 0;
// 最快速度渲染视频所有帧
while (true) {const { state, video: videoFrame } await clip.tick(time);if (state done) break;if (videoFrame ! null state success) {ctx.clearRect(0, 0, cvs.width, cvs.height);// 绘制到 Canvasctx.drawImage(videoFrame,0,0,videoFrame.codedWidth,videoFrame.codedHeight);// 注意用完立即 closevideoFrame.close();}// 时间单位是 微秒所以差不多每秒取 30 帧丢掉多余的帧time 33000;
}
clip.destroy();
关于优联前端 武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办是一家致力于H5前端技术研究的科技创新型公司为合作伙伴提供专业高效的前端解决方案合作伙伴遍布中国及东南亚地区行业涵盖广告教育 医疗餐饮等。有效的解决了合作伙伴的前端技术难题节约了成本实现合作共赢。开发Web前端微信小程序、小游戏2D/3D游戏动画交互与UI广告设计等各种技术研发。
