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

概况

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

深圳 liveVideoStack

讲师介绍

关于Jessibuca

官网地址：jessibuca.com
Demo: Demo
Doc：Doc
Github地址：Github

关于JessibucaPro

地址：JessibucaPro
Demo: Demo
AI:AI
插件：插件

进入主题

大家好：今天我给大家带来的分享的题目是：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 格式,可以看出

H.264优势在于兼容性高，pc和移动端都支持。H.265兼容性低，兼容依赖浏览器版本和底层硬件支持。
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种格式：

ws(s)-raw 即ws://host-name:port/jessica/live/test (该协议只对接了monibuca服务器,其他服务器需要额外对接)
ws(s)-flv 即ws://host-name:port/jessica/live/test.flv（chrome下ip会报安全错误，建议域名形式访问，检查下端口范围chrome浏览器是否允许，chrome会默认禁用很多端口）
http(s)-flv 即http://host-name:port/hdl/live/test.flv
Hls 即http://host-name:port/hls/live/test.m3u8 (支持H264/H265)
WebTransport 即wt://host-name:port/play/live/test (该协议只对接了monibuca服务器,其他服务器需要额外对接)
Webrtc 即 webrtc://host-name:port/webrtc/play/live/test (支持H264/H265, 仅支持https://或者http://localhost环境)
Webrtc-zlmediakit 即 webrtc://host-name:port/index/api/webrtc?app=live&stream=stream-name&type=play (支持H264, 仅支持https://或者http://localhost环境)
Webrtc-srs 即 webrtc://host-name:port/rtc/v1/play/live/test (支持H264, 仅支持https://或者http://localhost环境)
Webrtc-others 即 webrtc://host-name:port/live/test (支持H264, 仅支持https://或者http://localhost环境)
http(s)-fmp4 即http://host-name:port/your-path/live/test.(f)mp4
ws(s)-fmp4 即ws://host-name:port/your-path/live/test.(f)mp4
http(s)-h264 即http://host-name:port/jessica/live/test.h264
ws(s)-h264 即ws://host-name:port/jessica/live/test.h264
http(s)-h265 即http://host-name:port/jessica/live/test.h265
ws(s)-h265 即ws://host-name:port/jessica/live/test.h265
ws(s)-mpeg4 即ws://host-name:port/your-path/live/test.mpeg4

从中可以小结下：