浏览器支持H.265解码总结

浏览器支持H.265解码总结文章目录引言问题解决方案3.1方案1:开发自己的浏览器3.2方案2:前端JS解码+canvas显示3.3方案3:前端WebAssembly转码+video显示3.4方案4:前端W

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

文章目录

  1. 引言
  2. 问题
  3. 解决方案
    3.1 方案1:开发自己的浏览器
    3.2 方案2:前端JS解码+canvas显示
    3.3 方案3:前端WebAssembly转码+video显示
    3.4 方案4:前端WebAssembly解码+canvas显示
    3.5 总结
  4. 相关资料
  5. 参考资料
  6. 引言
    项目要求在浏览器上支持H265视频,但即使当前最新的Chrome 85.0.4183.121版本也还不支持H265的解码。

那么,在浏览器上能不能解决H265的解码及显示呢?答案是肯定的。

  1. 问题
    浏览器上支持H265,需要在浏览器上解决两个问题:

解码H265视频流
显示H265视频流
3. 解决方案
经过一番网络搜索和研究,大致有以下4种方案:

3.1 方案1:开发自己的浏览器
开发自己的浏览器

在底层实现支持H265解码
在 video 标签支持H265视频流的显示
目前公司已开发了自己的浏览器,基于Chrome 83进行开发,并增加了FFmpeg对HEVC的编解码,经测试能完美解决H265的编解码及显示。但由于存在版权风险,目前只能内部使用。

该方案可行,在测试机(i7-9700/32G)上播放16路的H265视频,整体比较流畅,但其它主流浏览器还是不支持H265,还需要研究不支持H265浏览器的解决方案。

3.2 方案2:前端JS解码+canvas显示
相关文档:Web端H.265播放器研发解密
https://blog.csdn.net/weixin_34379433/article/details/89535511

示例
https://sparkmorry.github.io/mse-learning/h265/
https://github.com/sparkmorry/mse-learning

该方案测试下来,JS解码相比较WebAssembly的解码方案,从性能来看会比较差,放弃。

3.3 方案3:前端WebAssembly转码+video显示
从ffmpegwasm上看到的一个转码示例,由于video标签不能播放H265的视频,所以先将H265视频转出H264,然后就可以通过video标签播放了

示例
https://github.com/ffmpegwasm/ffmpeg.wasm/blob/master/examples/browser/transcode.html

该方案测试下来,几秒的视频转码为H264需要近1分钟的时间,性能达不到要求,放弃。

3.4 方案4:前端WebAssembly解码+canvas显示
相关文档:Web端H.265播放器研发解密
https://blog.csdn.net/weixin_34379433/article/details/89535511

相关示例:H265播放器
(1)https://g.alicdn.com/videox/mp4-h265/1.0.2/index.html

(2)https://static-assets.cyt-rain.cn/h265/index.html

一个比较好的h265播放器
https://github.com/goldvideo/h265player

基于WASM的H265 Web播放器

文档 https://www.pianshen.com/article/3192218495/
源码 https://github.com/sonysuqin/WasmVideoPlayer
示例 https://roblin.cn/wasm/
该方案测试下来,该方案个人觉得是性能比较好的方案,在测试机(i7-9700/32G)上播放6路的H265视频,整体比较流畅。

3.5 总结
浏览器支持H265解码,初定方案:

支持H265的浏览器,如:科达浏览器,则直接使用浏览器自带的解码方案进行解码(硬解码或软解码),然后通过video标签显示出来;

不支持H265的浏览器,则采用WebAssembly技术,将FFmpeg编译为wasm,收到H265码流时,调用FFmpeg进行解码,然后通过canvas来显示视频画面;

  1. 相关资料
    janus-gateway 关于AV1和H265的协商
    https://github.com/meetecho/janus-gateway/pull/2120

How to enable HEVC/H265 and AV1 in #webrtc in your browser
https://webrtcbydralex.com/index.php/2020/04/28/how-to-enable-hevc-h265-and-av1-in-webrtc-in-your-browser/

  1. 参考资料
    Chromium媒体元素源码
    https://github.com/chromium/chromium/tree/master/media

WebAssembly
https://webassembly.org/

优秀的开源视音频处理框架FFmpeg
https://www.ffmpeg.org/
https://github.com/FFmpeg/FFmpeg
https://github.com/ffmpegwasm/ffmpeg.wasm

基于LLVM编译的WebAssembly打包工具集Emscripten
https://emscripten.org/index.html

基于WebAssembly的ogg播放器
https://github.com/brion/ogv.js

基于FFmpeg的简单播放器
https://github.com/leixiaohua1020/simplest_ffmpeg_player
from:https://blog.csdn.net/cgs1999/article/details/108847894

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/167493.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • java debug调试怎么用?[通俗易懂]

    java debug调试怎么用?[通俗易懂]我的qq2038373094在做项目的时候,尤其是涉及多个页面的传值的时候,debug调试十分有用,可以迅速帮你找到错误的原因!用debug的好处:1.跟踪变量,可以查看变量的值的变化2.迅速找到错误的原因,节省时间,找错小帮手那么debug调试助手怎么用,用在什么地方?debug用在java程序上,.class文件上面不适合jsp页面,不适合镶嵌在jsp页面…

    2022年10月16日
    1
  • MySQL中JOIN的用法

    MySQL中JOIN的用法JOIN 用于连表查询 主要有 5 种用法 下面分别演示这 5 种用法随便建 2 张表 结构如下字段 col1 用来使两张表有一个同名字段的 但其实没什么用 一 笛卡尔积 CROSSJOINCRO 使两张表的所有字段直接进行笛卡尔积 假设表 1 有 m 条数据 表 2 有 n 条数据 则结果数量为 m n 条 SELECT FROMtab1CROS 结果二 内连接 INNERJOIN 内连接需要用 ON 来指定两张表需要比较的字段 最终结果只显示满足条件的数据

    2025年9月16日
    0
  • CSS鼠标悬浮及其样式

    CSS鼠标悬浮及其样式hover鼠标悬浮的使用和定义用法示例选择鼠标指针浮动在其上的元素,并设置其样式:.box:hover{background-color:red;}定义和用法:hover选择器用于选择鼠标指针浮动在上面的元素。提示:hover选择器可用于所有元素:link选择器设置指向未被访问页面的链接的样式,:visited选择器用于设置指向已被访问的页面…

    2022年5月31日
    32
  • python3安装win32api

    python3安装win32apipython3安装win32api

    2022年10月11日
    3
  • 一维数组二分法查找_二分查找算法c语言

    一维数组二分法查找_二分查找算法c语言在一个 n * m 的二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个高效的函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数。示例:现有矩阵 matrix 如下:[ [1, 4, 7, 11, 15], [2, 5, 8, 12, 19], [3, 6, 9, 16, 22], [10, 13, 14, 17, 24], [18, 21, 23, 26, 30]]给定 target = 5,返回

    2022年8月9日
    3
  • 三. ASP NET MVC

    三. ASP NET MVC1.使用Partial视图模板可以消除重复的视图逻辑,简化代码。1)Createapartialview(.ascx)文件,把要重复使用的代码拷贝到里面。2)在主页面里面,修改为Html.RenderPartial(“DinnerForm”).  2.修改Master页面(Site.master)//View/Shared提供了一个非常有效的方法在

    2022年7月22日
    14

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号