Web端专业级H264/H265 直播流播放器实现-JessibucaPro播放器

最新推荐文章于 2024-04-24 09:34:58 发布
最新推荐文章于 2024-04-24 09:34:58 发布
阅读量1.8k 收藏 26
点赞数 16
文章标签： 前端 javascript webassembly web播放器 h.265 h.264 ffmpeg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wancheng815926/article/details/134705526
版权

概况

这个主要是参加“深圳 liveVideoStack” 的ppt的文字版的分享。

深圳 liveVideoStack

讲师介绍

关于Jessibuca

关于JessibucaPro

进入主题

大家好：今天我给大家带来的分享的题目是：Web端专业级H264/H265 直播流播放器实现 - jessibucaPro 播放器实现。

在这里插入图片描述

本次分享主要介绍‘背景’，‘架构，兼容性，性能’，还有”展望未来“三个部分。

在这里插入图片描述

第一部分(背景)

在这里插入图片描述

直播行业概况

我们看下现在的直播行业概况。

在这里插入图片描述

目前主要使用到直播的三个领域，分别是监控平台，直播平台，还有互动直播。其中监控平台，例如道路车辆监控，马路安全监控平台，主要是安防领域，比如海康，大华等。
然后就是直播平台，比较典型的是斗鱼，虎牙，抖音这种面向c端的平台。最后就是互动直播领域，主要有在线教育，音视频会议这种，像腾讯会议，zoom等。

web端直播协议

在这里插入图片描述

目前web端支持的直播格式有：

  • hls(m3u8+ts/mp4)
  • HDL(flv)
  • FMP4
  • Raw(H264,H255)

web端支持的直播的协议有：

  • HTTP
  • WebSokcet
  • WebTransport
  • Webrtc

H.264 vs H.265

在这里插入图片描述

对比H.264 格式和 H.265 格式,可以看出

  1. H.264优势在于兼容性高，pc和移动端都支持。H.265兼容性低，兼容依赖浏览器版本和底层硬件支持。
  2. H.265的压缩比、视频质量、性能要高于H.264。

压缩比：同等分辨率情况下，H.265 所需要的带宽要低于h264所需的带宽。

视频质量：H.264能够支持到最高2k，但是H.265可以支持到4k。

性能：H.264的性能要远低于H.265。

H.264对比H.265兼容性如图：

在这里插入图片描述

红的完全不支持，暗绿色是部分支持(需要一定条件才能支持)，绿色是完全支持。

对比可以发现：左边，H.264，一片绿，说明支持度非常高，对于pc端的chrome，edge，safari，firefox，opera，ie，移动端安卓的chrome，ios的safari都支持。

右边，H.265，只有小部分绿，大部分都是暗绿，依赖一定条件的支持，对于pc端，大部分浏览器（chrome，edge，opera，ie）需要底层硬件支持，firefox完全不支持，移动端安卓chrome也需要底层硬件支持，只有pc 端的safa和移动端的ios 上的safari支持。

Webassembly 兼容性

在这里插入图片描述

基本也是全绿，除了IE 。其他pc 和移动端都支持。

WebAssembly（缩写为 wasm）是一种使用非 JavaScript 代码，并使其在浏览器中运行的方法。这些代码可以是 C、C++ 或 Rust 等。它们会被编译进你的浏览器，在你的 CPU 上以接近原生的速度运行。这些代码的形式是二进制文件，你可以直接在 JavaScript 中将它们当作模块来用。

业务需求

在这里插入图片描述

业务所需：

  • 水印-用来版权保护防盗录，内容识别等。
  • 低延迟-安防监控，直播会议所需。
  • 视频流加密-主要是为了保护直播流的安全。
  • 电子放大-主要是安防安防领域所需。
  • 广角渲染-广角摄像头，主要是安防安防领域所需。
  • 音频g711a/u格式-摄像头支持的音频格式，主要是安防安防领域所需。
  • 实时框-主要是ai识别画识图。

低延迟直播流播放器

在这里插入图片描述

在这些web端的需求和背景下，我们需要一款能够支持各种直播协议（http、websocket、webtransport等），支持H.264、H.265硬解码+软解码，支持丰富功能（水印、低延迟、视频流加密等）的直播流播放器。

在这里插入图片描述

第二部分(架构、兼容性、性能)

在这里插入图片描述

介绍完背景部分，第二部分，我们来看下播放器的架构，在浏览器兼容性兼容性的解决方案，以及一些性能优化部分。

架构

在这里插入图片描述

首先我们看下播放器的架构部分，整个播放器主要由7大模块组成。

左边是核心模块，从上到下，分别是Stream模块、Demux模块、Decoder模块、Render模块。右边扩展模块，从上到下，分别是UI模块、Crypto模块、Recorder模块。

Stream模块

主要是网络请求模块：支持http、websocket、webtransport、webrtc协议。借助web端提供的fetch、websocket、xmlhttprequest等方法请求到流数据。

在这里插入图片描述

目前播放器支持的请求协议有 15种格式：

从中可以小结下：

  • 协议同时支持https、wss
  • 同时支持H264和H265编码格式
  • 支持webcodecs硬解码(H264+H265)和MSE硬解码(H264+H265)
  • 支持HLS(H264+H265)软解码、硬解码
  • 支持m7s webrtc(H264+H265(软解码、硬解码))，
  • 支持zlmediakit webrtc(H264)
  • 支持srs webrtc(H264)
  • 支持others webrtc(H264)
  • 支持加密流(国标SM4、m7s加密流)
  • 支持裸流(H264+H265)
  • 支持Fmp4格式(H264+H265)
  • 支持mpeg4格式(H264)
Demux模块

在这里插入图片描述

这个模块主要的工作是：将流数据进行解封装出一帧一帧H264、H265数据。

目前播放器支持的封装格式有：

  • hls (http) (m3u8+ts/mp4) 视频(H264、H265) 音频(AAC、MP3)
  • Flv (http+ws) 视频(H264、H265) 音频(AAC、MP3、G711A、G711U)
  • M7S (ws) 视频(H264、H265) 音频(AAC、MP3、G711A、G711U)
  • FMP4 (http) 视频(H264、H265) 音频(AAC、MP3)
  • MPEG4 (ws) 视频(H264)
  • Raw (ws) 视频(H264、H265)
Decoder模块

在这里插入图片描述

decoder模块主要是负责解码，默认播放器支持三种解码模式(两种硬解码，一种软解码)

  • MediaSource 硬解码
  • Webcodec 硬解码
  • ffmpeg(Webassembly) 软解码
MediaSource 硬解码

主要是将一帧一帧H264、H265数据再次封装成Fmp4片段，然后喂给MediaSource来通过播放器底层硬解码音视频数据。渲染在video标签上面。

Webcodec 硬解码

主要是将一帧一帧H264、H265数据解码成videoFrame对象，可以通过canvas 或者 video 渲染。

ffmpeg(Webassembly) 软解码

主要是将一帧一帧H264、H265数据解码成YUV数据,可以通过canvas 或者 video 渲染。

Render模块

在这里插入图片描述

主要是渲染模块，目前播放支持video标签+canvas标签渲染。

对于各个解码模块后续的渲染模块，支持程度：

解码器video渲染canvas渲染
MediaSource✅✅
Webcodec✅✅
ffmpeg(Webassembly)✅✅
UI模块

在这里插入图片描述

目前播放器支持的UI模块有：

Crypto模块

在这里插入图片描述

目前播放器支持的加密模式有

Recorder模块

在这里插入图片描述

目前播放器支持的录制格式有

兼容性

在这里插入图片描述

介绍完播放器的整体架构，接下来我们看下播放器在web端兼容性上面的解决方案。

主要分享6个业务场景，分别是：

  • 电脑硬件不支持H265硬解码
  • IOS不支持MediaSource硬解码
  • 音频格式是G711a/G711u
  • Webrtc如何播放H265的流
  • 兼容国产系统/国产浏览器
  • MediaRecorder不支持录制mp4(MPEG-4)格式
电脑硬件不支持H265硬解码

在这里插入图片描述

目前的现状是：

  1. chrome 107版本以上外加需要硬件支持才能够支持硬解码H265。
  2. edge 79版本以上外加需要硬件支持才能够支持硬解码H265。
  3. FireFox 直接就不支持。

播放器的解决方案是：

  1. 使用ffmpeg+webassembly,通过软解码来支持H265解码。
  2. 使用sharedArrayBuffer，来提升软解码性能。
  3. 使用SIMD指令集加速解码，来提升硬解码性能。

效果如下：

在这里插入图片描述

另外测试地址： 测试地址

IOS不支持MediaSource硬解码

在这里插入图片描述

目前的现状是：

  1. iPadOS 13+ 才支持。
  2. ios 完全不支持。

播放器的解决方案是：

  1. 使用ffmpeg+webassembly。
  2. IOS16.3+使用webcodec解码。

效果如下：

在这里插入图片描述

音频格式是G711a/G711u

在这里插入图片描述

目前的现状是：

  1. Fmp4只支持aac/mp3格式的音频，不支持G711a/G711u格式的音频。

播放器的解决方案是：

1.使用FFmpeg+Webassembly进行软解码，然后借助AudioContext进行播放。

在这里插入图片描述

Webrtc如何播放H265的流

在这里插入图片描述

目前的现状是：

  1. WebRTC本身只支持VP8、VP9、H264、AV1格式。

播放器的解决方案是：

  1. 流媒体服务器（monibuca）通过DataChannel传输音视频数据，借助MediaSource/Webcodec/Webassembly解码播放。

在这里插入图片描述

兼容国产系统/国产浏览器

在这里插入图片描述

目前的现状是：

  1. 国产操作系统（麒麟等）/浏览器（统信等），对于H264/H265硬解码支持度不够，使用的Chromium内核版本都比价低。

播放器的解决方案是：

  1. 当不支持硬解码的时候，使用ffmpeg+WebAssembly进行软解码播放。
MediaRecorder不支持录制mp4(MPEG-4)格式

在这里插入图片描述

目前的现状是：

  1. MediaRecorder只支持录制成webm格式文件。

播放器的解决方案是：

  1. 使用ffmpeg+WebAssembly录制成mp4格式文件。

测试地址：测试地址

性能

介绍完了播放器在web兼容性上面的解决方案，我们再看下播放器在性能优化上面的一些方案。

在这里插入图片描述

主要介绍四种优化方案：

  1. 低延迟优化
  2. Worker线程降低主线程压力
  3. 多线程软解码提升软解码性能
  4. OffscreenCanvas优化渲染
低延迟优化

在这里插入图片描述

为了保证低延迟，播放器设计实现了缓冲区JitterBuffer，添加延迟丢帧机制，添加网络延迟检测机制。

达到的效果：

在这里插入图片描述

通过尽可能的优化，播放器做到了，

  1. 首屏时间小于1s
  2. 公网环境网络稳定的情况下延迟小于1s
  3. 内网环境下可以通过配置使得延迟低于0.8s
Worker线程降低主线程压力

在这里插入图片描述

通过worker线程，播放器可以通过配置支持将网络请求模块stream，解封装模块demux，和解码模块decoder全部放在worker线程里面进行，然后将解码之后的数据传输到主线程进行渲染和播放。

达到的效果

在这里插入图片描述

多线程软解码提升软解码性能

开启多线程解码，借助多核来进行软解码，来提升解码性能。

在这里插入图片描述

首先需要再编译ffmpeg的时候添加多线程参数。然后在将ffmpeg编译打包成webassembly的时候，也需要配置多线程参数。在编写c的业务代码的时候也需要配置使用的多核数量，最后播放器在浏览器上面运行的时候，需在网站的相应头上面添加两个相应参数。这样播放器就使用多线程来软解码音视频了。

达到的效果

在这里插入图片描述

左边图是没有开启多线程的，右边的开启了多线程的。对比我们可以发现，例如同样是webassembly软解码265的1080p 在机器是cpu i7_8700k 显卡是rtx2080的机器上面可以支持同时4路流播放，但是如果开启了多线程，那就可以支持到8路流同时播放。性能翻倍了。

OffscreenCanvas优化渲染

在这里插入图片描述

最后，我们看下offscreen canvas 离屏画布。

支持两种模式：

transfer

worker 线程创建OffscreenCanvas，使用webgl进行绘制，然后将生成的ImageBitmap ，通过postmessage到主线程，然后借助canvas 进行渲染

commit

主线程创建OffscreenCanvas，然后通过postmesage将canvas句柄传递到worker线程，然后worker 线程使用webgl进行绘制渲染。

区别

区别就是transfer需要一直postmessage 传递数据，而commit模式只需要主线程一次将canvas句柄传递到worker线程。 根据业务情况采用不同的模式。

达到的效果

在这里插入图片描述

展望未来

在这里插入图片描述

介绍完了播放器在web端的一些性能优化，我们再看下展望未来。

在这里插入图片描述

播放器可以支持人脸识别，物品识别，让播放器端提供ai能力。可以支持马赛克检查，视频遮挡检查，黑屏、 绿屏检查。 来提升播放效果。

人脸识别、物品识别

在这里插入图片描述

对于人脸识别，物品识别，我们可以采用的方案有：opencv 、 mediapipe

  1. opencv 是一个跨平台的计算机视觉库，可以支持增强现实，人脸识别，动作识别等领域。底层库。
  2. mediapipe：谷歌基于opencv开发出来的功能强大的机器学习框架。 两个都可以借助webassembly 在web端跑运行。
人脸识别

在这里插入图片描述

人脸识别测试地址 测试地址

物品识别

在这里插入图片描述

物品识别测试地址 测试地址

马赛克检查，视频遮挡检查，黑屏、 绿屏检查

在这里插入图片描述

黑屏、绿屏、花屏、马赛克检查 测试地址 测试地址

遮挡物检查测试地址测试地址

最后

在这里插入图片描述

关于Jessibuca

关于JessibucaPro

在这里插入图片描述

谢谢大家。

wancheng1990
关注
  • 16
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jessibuca:Jessibuca是一款开源的纯H5直播流播放器
04-28
home heroImage heroText tagline actionText actionLink sidebarDepth sidebar features footer true /logo.png Jessibuca 纯H5直播流播放器 打开播放器 /player.md 2 auto title details 无插件 基于ASM.js/WebAssembly(wasm)实现的纯JavaScript直播播放器 title details 低延时 能够在 PC\Android\iOS 浏览器Webview 内实现2秒以内低延迟直播播放 title details 支持H265 软解码H.264/H.265+AAC/MP3/Speex流，WebGL视频渲染，WebAudio音频播放。 GPL Licensed | Copyright :copyright: 2020-present dexter 简
h265web.js-wasm-decoder::fire:WebAssemblyAPI H.265HEVC解码器，返回YUV帧
05-08
h265web.js-wasm-decoder 底层解码API 可以直接用于自定义开发H.265播放器 Demo 媒资信息 Input #0, hevc, from 'res/video40_265_moov.hevc': Duration: N/A, bitrate: N/A Stream #0:0: Video: hevc (Main), ...
jessibucaPlayer 使用教程
coldriversnow的专栏
08-15 4143
Jessibuca是一款开源的纯H5直播流播放器，通过Emscripten将音视频解码库编译成Js（ams.js/wasm)运行于浏览器之中。兼容几乎所有浏览器，可以运行在PC、手机、微信中，无需额外安装插件。
EPlayer：一款现代化的Web音乐播放器框架
最新发布
gitblog_00050的博客
04-24 229
EPlayer：一款现代化的Web音乐播放器框架 项目地址:https://gitcode.com/epengao/EPlayer EPlayer 是一个基于Web技术构建的强大且可自定义的音乐播放器框架。该项目利用现代前端技术和Web Audio API，为开发者提供了一个轻量级、响应式且高度可定制的解决方案，用于创建个性化音乐平台或者嵌入到个人网站中。 技术分析 EPlayer 主要采用以下技...
H264编码器的一种率失真优化(1)
dongkun152的专栏
09-03 1357
H264编码器的一种率失真优化(1)
Vue中Jessibuca播放器的使用
qq_43730272的博客
04-08 1068
Jessibuca的使用
web音乐播放器(PC端)
小宝的博客
08-23 706
本文主要介绍一个基于vue+vue-cli+vue利用技术html+css+js、和visual studio Code编辑工具对网页版音乐播放器(PC)进行编写和设计。并对开发中涉及到的关键技术作了探讨，同时给出了详细的系统设计过程、部分界面图及主要功能运行流程图,最后说明实现的功能。本文还对开发过程中遇到的问题和解决方法进行了详细的讨论,该音乐播放器集播放、暂停、停止、快进、快退、下一曲、上一曲、音量调节等功能与一体,性能良好。第一阶段首先对项目进行全面、仔细的需求分析,并准确做出项目进度安排,明确每个
H.265编码视频在web网页实现无插件播放，应该通过软解码还是硬解码
liveweb视频汇聚平台
08-08 378
目前摄像头存在H.265和H.264两种编码格式，我们的摄像头已经支持H265编码视频的传输。H.264编码格式可以直接在web浏览器通过H5来进行视频解码来完成播放，但是对于H.265编码的视频，无法通过H5直接解码来进行视频播放，当前的方案是通过H5调用编解码组件来进行web直播。但当前播放的痛点在于：只能使用软解和单线程来进行视频播放处理。我们来测试一下H.265直播流解码播放。
web端播放h264解决方案
08-03
web端播放h264解决方案，websocket 服务器，拉取rtsp地址流，web-client播放websocket传输的h264码流
h265web.js::fire:已开源 - H.265Hevc Web端播放器，支持H.265编码的mp4hlsm3u8flvmpegts 的媒体播放，支持点播、直播。A Hevc Web Player , support file type
07-24
h265web.js |一个可支持HEVC/H.265编码播放360P、480P、540P、720P、1080P的HEVC播放器DEMO:h265web.jsmpeg.js (解析ts)h265web.js 底层265解码器SDKLICENSERemind!因为使用软解码能力（浏览器上无法做硬解码加速 与...
基于Web Assembly(封装FFmpeg)、JS解封装、Canvas投影以及AudioContext实现Web端的H265
07-27
一套完整的Web版H.265播放器解决方案，非常适合学习交流和实际应用。基于JS码流解封装、WebAssembly(FFmpeg)视频解码，利用Canvas画布投影、AudioContext播放音频。 播放器主要分为UI、Loader、数据处理、数据渲染四...
Jessibuca H5直播流播放器源代码
03-18
Jessibuca是一款开源的纯H5直播流播放器，通过Emscripten将音视频解码库编译成Js（ams.js/wasm)运行于浏览器之中。兼容几乎所有浏览器，可以运行在PC、手机、微信中，无需额外安装插件。 Jessibuca功能： 1、支持解码H.264视频(Baseline, Main, High Profile
JessibucaH5直播流播放器 v1.0
08-14
Jessibuca是一款开源的纯H5直播流播放器，通过Emscripten将音视频解码库编译成Js（ams.js/wasm)运行于浏览器之中。兼容几乎所有浏览器，可以运行在PC、手机、微信中，无需额外安装插件。Jessibuca功能：1、支持解码H.264视频(Baseline, Main, High Profile全支持，支持解码B帧视频)2、支持解码H.265视频（flv id == 12）3
h265player:一套完整的Web版H.265播放器解决方案，非常适合学习交流和实际应用。基于JS码流解封装、WebAssembly(FFmpeg)视频解码，利用Canvas画布投影、AudioContext播放音频
04-23
简介 随着视频编码技术的发展，相比H.264, H.265同等画质体积仅为一半、带宽占用省一半、画质更细腻等诸多优势。 但Web浏览器还不支持H.265的解码播放，因此基于Web Assembly(封装FFmpeg)、JS解封装、Canvas投影以及AudioContext实现Web端的H265播放。 支持主要浏览器及其版本如下： Chrome（>57） Safari (>11) Firefox (>52) 本项目是一个公开的基础可用版本，并不含有具体的业务代码。业务可基于此项目进行具体业务实现。 安装与测试 下载源码 # 创建根目录 * mkdir goldvideo * cd goldvideo # 下载h265player源码, 创建h265player目录 * git clone https://github.com/goldvideo/h265player.git * cd h2
websocket发送裸H264到Html5解码
05-19
通过websocket传输裸H264到网页通过html5 video标签解码 参考博客https://blog.csdn.net/g0415shenw/article/details/80372580
Web视频播放器XPlayer.zip
07-19
xPlayer v1.0 特性: 文件大小 9.78kb; 可以自定义皮肤; 3.支持 http 和 rtmp 视频; 4.音量调节,全屏播放,拖拽播放; 作者:胡俊 邮箱:whuthj@163.com; Code license:GNU Lesser GPL; 说明: 由于 Flex 自带视频播放器体积过于笨重, 所以自己开发了一个轻量级的视频播放器 xPlayer 希望对大家有用, 本源码可以随意传播或者修改完善,旨在方便开发者使用.同时也宣传一下公司的业务素质体育:http://www.cssrc.org   标签：XPlayer
新手使用wvp-pro和ZLMediaKit的菜鸟说明（手把手教）
热门推荐
houge101的博客
12-09 2万+
新手使用wvp-pro和zlm的菜鸟说明（手把手教）
VUE直播流播放器 使用jessibuca插件-支持H264，H265格式播放。
m0_63183059的博客
09-14 2490
1.基于MediaSource/Webcodec/ WebAssembly(wasm)实现的纯JavaScript直播播放器。 2.支持ws-raw、http(ws)-flv、hls、webTransport、webrtc、http(ws)-fmp4、http(ws)-h264、http(ws)-h265多种播放格式。
React中Jessibuca播放器的使用
weixin_43843572的博客
05-23 2375
Jessibuca播放器
分割cd /root cp hadoop-huaweicloud-2.8.3-hw-39.jar /home/modules/hadoop- 2.8.3/share/hadoop/common/lib/ cp hadoop-huaweicloud-2.8.3-hw-39.jar /home/modules/hadoop-2.8.3/share/hadoop/tools/lib cp hadoop-huaweicloud-2.8.3-hw-39.jar /home/modules/hadoop2.8.3/share/hadoop/hƩ pfs/tomcat/webapps/webhdfs/WEB-INF/lib/ cp hadoop-huaweicloud-2.8.3-hw-39.jar /home/modules/hadoop-2.8.3/share/hadoop/hdfs/lib/
06-05
1. cd /root 2. cp hadoop-huaweicloud-2.8.3-hw-39.jar /home/modules/hadoop-2.8.3/share/hadoop/common/lib/ 3. cp hadoop-huaweicloud-2.8.3-hw-39.jar /home/modules/hadoop-2.8.3/share/hadoop/tools/lib 4. cp hadoop-huaweicloud-2.8.3-hw-39.jar /home/modules/hadoop2.8.3/share/hadoop/hdfs/tomcat/webapps/webhdfs/WEB-INF/lib/ 5. cp hadoop-huaweicloud-2.8.3-hw-39.jar /home/modules/hadoop-2.8.3/share/hadoop/hdfs/lib/ 这里将这段代码分割成了5行，每行代表一个命令。第一行是定位到根目录 /root；接下来四行是复制 hadoop-huaweicloud-2.8.3-hw-39.jar 文件到不同的目录下，分别是 common/lib、tools/lib、webhdfs/WEB-INF/lib 和 hdfs/lib。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值