Jessibuca 2.0 发布，H5 直播流播放器
- - 开源中国-软件更新资讯同时支持H264和H265解码，无需重新加载解码器. 音频支持AAC、PCMA、PCMU格式（也可以通过编译FFmpeg来支持更多格式）. 代码大幅度精简，删去无用代码，C++代码减少了80%，网络通讯和协议解包部分移入js端实现，方便二次开发. 实现OffscreenCanvas性能优化，CPU和内存消耗显著减少.
Jessibuca 2.0 发布，H5 直播流播放器
标签：
jessibuca
h5
直播
| 发表时间：2021-05-19 21:22 | 作者：
出处：https://www.oschina.net/news/project
2.0更新内容：
- 同时支持H264和H265解码，无需重新加载解码器
- 音频支持AAC、PCMA、PCMU格式（也可以通过编译FFmpeg来支持更多格式）
- 代码大幅度精简，删去无用代码，C++代码减少了80%，网络通讯和协议解包部分移入js端实现，方便二次开发
- 实现OffscreenCanvas性能优化，CPU和内存消耗显著减少
- 音频解码实现了连续播放，解决了原来分段播放带来的瑕疵
- 采用最新的emscripten（2.0.20）和ffmpeg（4.4）版本编译，实现极限wasm压缩体积(1.2m)
- clone项目后运行vuepress dev . （提前安装好vuepress，注意命令后面有个点）即可看到效果
软件介绍：
Jessibuca是一款开源的纯H5直播流播放器，通过Emscripten将音视频解码库编译成Js（ams.js/wasm)运行于浏览器之中。兼容几乎所有浏览器，可以运行在PC、手机、微信中，无需额外安装插件。
- 支持解码H.264视频(Baseline, Main, High Profile全支持，支持解码B帧视频)
- 支持解码H.265视频（flv id == 12）
- 支持解码AAC音频(LC,HE,HEv2 Profile全支持)
- 支持解码PCMA音频以及PCMU音频格式
- 可设置播放缓冲区时长，可设置0缓冲极限低延迟（网络抖动会造成卡顿现象）
- 支持智能不花屏丢帧，长时间播放绝不累积延迟。
- 可创建多个播放实例
- 程序精简，经CDN加速，GZIP压缩（实际下载500k），加载速度更快
- 同时支持http-flv和websocket-flv协议以及websocket-raw私有协议（裸数据，传输量更小，需要搭配Monibuca服务器） 注：以http-flv请求时，存在跨域请求的问题，需要设置access-control-allow-origin, websocket-flv默认不存在此问题
- 支持HTTPS/WSS加密视频传输，保证视频内容传输安全
- 手机浏览器内打开视频不会变成全屏播放
相关 [jessibuca h5 直播] 推荐：
H5视频直播扫盲 | 吕小鸣前端博客
- -视频直播这么火，再不学就out了. 为了紧跟潮流，本文将向大家介绍一下视频直播中的基本流程和主要的技术点，包括但不限于前端技术. 1 H5到底能不能做视频直播. 当然可以， H5火了这么久，涵盖了各个方面的技术. 对于视频录制，可以使用强大的webRTC（Web Real-Time Communication）是一个支持网页浏览器进行实时语音对话或视频对话的技术，缺点是只在PC的chrome上支持较好，移动端支持不太理想.
使用 Fabric.js 玩转 H5 Canvas
- - V2EX - 技术之前使用这个框架写过一个卡片 DIY 的项目，中间遇到很多问题都只能通过 google 或 github issues 才能解决，国内资料较少，所以才想写这篇文章来简单的做下总结，希望可以帮到其他人哈. 附上个人项目地址： vue-card-diy 欢迎 star~ ✨. 什么是 Fabric.js?.
移动端 H5 图片压缩上传
- - IT瘾-dev大体的思路是，部分API的兼容性请参照 caniuse：. 利用 FileReader,读取 blob对象,或者是 file对象，将图片转化为 data uri的形式. 使用 canvas,在页面上新建一个画布,利用 canvas提供的API,将图片画入这个画布当中. 利用 canvas.toDataURL()，进行图片的压缩，得到图片的 data uri的值.
H5与Native交互之JSBridge技术
- - SegmentFault 最新的文章做过混合开发的很多人都知道Ionic和PhoneGap之类的框架，这些框架在web基础上包了一层Native，然后通过Bridge技术使得js可以调用视频、位置、音频等功能. 本文就是介绍这层Bridge的交互原理，通过阅读本文你可以了解到js与ios及android底层的通讯原理及JSBridge的封装技术及调试方法.
H5 移动调试全攻略
- - IT瘾-dev随着移动设备的高速发展， H5开发也成为了 F2E不可或缺的能力. 而移动开发的重中之重就是掌握调试技巧，定 Bug于无形. 文章首发于 Jartto’s blog，转载请标明出处. 因为移动端操作系统分为 iOS和 Android两派，所以本文的调试技巧也会按照不同的系统来区分.
Hybrid 架构下的 H5 应用加速方案
- - 阿里巴巴（中国站）用户体验设计部博客在移动 App 开发领域，主流的开发模式可分为 Native、Hybrid、WebApp 三种方式. 然而 2013 年，纯 WebApp 开发模式的发展受到一定挫折，以 Facebook 为代表的独立 App 转投 Native 阵营. 但是开发者对 WebApp 更新速度快，跨平台优势的渴望却并未减弱，最终的结果是促成了 Hybrid App 在 2013 年数量的激增，并且增长的速率非常之快.
移动H5前端性能优化指南
- - 腾讯ISUX - 社交用户体验设计 - Better Experience Through Design移动H5前端性能优化指南[托尼托尼研究所]. PC优化手段在Mobile侧同样适用. 在Mobile侧我们提出三秒种渲染完成首屏指标. 基于第二点，首屏加载3秒完成或使用Loading. 基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB. Mobile侧因手机配置原因，除加载外渲染速度也是优化重点.
如何做一个让人闻风丧胆的 H5
- - 腾讯ISUX - 社交用户体验设计 - Better Experience Through Design最近火热的有声娱乐平台 APP，企鹅 FM，在8月28日鬼节前夕，联合《盗墓笔记》推出了“勇敢者的游戏”活动. 作为一个 UI 工程师，在这个移动互联网叱咤风云的时代，每次看到朋友圈中被分享的各种花样 H5 页面，总是心痒难耐，也想做有着酷炫动画和带感声效的 H5 呢. 回想到做鬼节活动页的时候，接近午夜零点还在调整页面效果，看着页面上渐隐渐现的可怕画面，活生生吓到了自己，也是蛮难忘的.
h5调用底层接口的一些知识
- - 神刀安全网 前端时间使用HTML5做了一个WEB端APP，其中用到了H5页面调用手机摄像头的功能，当时也是花了不少时间去研究. 最终是采用了HTML5plus（HTML5+）的方式完成了该功能，现将具体方法简单介绍下，并讲解下使用的注意事项. 放在服务器上然后浏览就可以了，只支持Chrome和Safari核的浏览器，QQ浏览器，Chrome，Safari浏览器都可以.