码迷,mamicode.com
首页 > Web开发 > 详细

基于Web Assembly的H265播放器实现

时间:2020-02-05 18:21:11      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:控制   ali   h265   hls   简介   图像   mp4   效率   加载完成   

项目概述

随着视频编码技术的发展,相比H.264,H.265具有同等画质体积一半、画质更清晰细腻、编码效率更高等诸多优势。 但因版权等因素主流浏览器还不支持H.265的解码,因此需要专门的插件实现解码。本项目基于Web Assembly(封装FFmpeg库)、JS解封装、Canvas投影以及AudioContext,是Web端的H265播放器的完整解决方案。

播放器显示效果如下:

 技术图片

功能简介

播放器主要分为UI、Loader、数据处理、数据渲染四个部分和3个线程。一个是主线程,负责界面控制、下载控制、数据流控制、音视频控制等功能;另一个是数据加载线程,负责meta数据和视频分片数据的请求;还有一个是数据处理线程,即负责视频数据的解封装和视频解码。

数据处理流程如下:

 技术图片

播放器的实现主要分为以下四个部分:

  • UI:播放器显示,包括screen和controlbar两部分,screen包括视频图像展示、弹窗、海报图等。controlbar包括进度条、播放按钮、音量控制等组件。
  • Loader:负责媒体数据的加载和解析,目前仅支持HLS协议。通过worker实现数据的请求,加载完成后,根据设置缓存大小,存储请求的ts数据,当达到缓存上限后停止加载。解码器从ts数据队列获取ts后,Hls Loader会把请求过的ts释放,继续加载下一个ts,达到最大缓存限制后停止加载
  • 数据处理:主要包括数据解封装和H265解码,解封装通过demuxe.js这个类库实现,H265解码通过ffmpeg打包生成的wasm软解来实现,cpu使用率较高。
  • 数据渲染:包括视屏渲染和音频渲染,视频渲染通过ImagePlayer把解码后的yuv数据直接渲染到canvas,音频通过AudioPlayer把AAC数据解码后进行音频播放,最后通过pts实现音视频的同步。同步策略是以音频为参考,判断当前视频pts与获取到的音频pts的差值来调整视频显示时间来达到音视频同步。

项目地址

本项目是一个公开的基础可用版本,并不含有具体的业务代码。业务可基于此项目进行具体业务实现。本项目代码:https://github.com/goldvideo

包含三个相关项目:

  • demuxer: JS解封装TS/MP4工具,负责TS码流的解封装与转封装
  • decoder_wasm: 基于开源ffmpeg的H.265解码器,结合WebAssembly技术,实现前端视频解码
  • h265player: H265播放器界面,包括数据加载、控制器、播放流程与画面同步渲染等

基于Web Assembly的H265播放器实现

标签:控制   ali   h265   hls   简介   图像   mp4   效率   加载完成   

原文地址:https://www.cnblogs.com/goldvideo/p/12264706.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!