使用原生 Web Share API 进行内容分享

Chrome 75 开始支持 Web Share API - Level 2, 这也就意味着你可以通过 JS 分享 文件,链接或者文本到其他的 App 了。 其实这个需求很早很早,我们的 PM 就开始提了,关于实现,目前比较成熟的是通过 JS Bridge,然后利用 APP 详情 »

移动平均(EWMA)在 HLS.JS 的实践

才开始大家一直在想,什么是移动均线? 哪里会用到?? 对于常规的页面,实际上很难说需要到具体到有需要用到 网络宽带的预估,但是对于流媒体或者上传服务时候,这个就很重要了,我们需要根据不同网速情况,做策略上的更改,从而改善体验。 做视频播放的很多童鞋,经常在 Youtube 上看到这么一个仪表盘,界面。 大家会看到网速的实际情况。 如果叫大家来实现,实际上,或许很轻而易举会想到用一个网络资源的请求,和时间来完成做一次除法就OK了。 const start = Date.now() fetch( 详情 »

解决 Synchronous XHR in page dismissal 的问题

如果你更新了最新的 Chrome (大约 >= 73 的部分版本),发现有些日志没有发送的时候,需要引起注意了。你需要关注是否有一些异常或者警告产生类似 Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://xxxx/': Synchronous XHR in page 详情 »

Is Service Worker in Sandbox

其实这个话题,对很多人而言,如果之前没有细致了解过 Chrome 设计架构,还真不好说出答案,不过好在 Chrome 官方写了四篇文章,详细的阐释 Chrome 适合实现多进程,以及其具体作用的。 Chrome 的多进程设计 输入 URL 浏览器做了什么 Renderer process 如何渲染页面 Chrome 与页面的事件交互 那么 Service Worker 详情 »

聊聊 Timing-Allow-Origin 和 Access-Control-Expose-Headers

一般我们如果做页面性能分析,我们自己带着 Chrome 的 PageSpeed 或者 Audit 就可以了。但是如果我们涉及对关键资源的网络请求的性能埋点的话,我们可以尝试利用 PerformanceTiming 。 它提供了诸如一系列 connectStart domainLookupStart responseEnd 等时间戳的数据。我们可以轻松借用这个 API 做页面的 Performance 的数据埋点。比如可以使用: const pt = performance.timing; 详情 »

使用键盘的媒体按键控制视频播放

Chrome 将会在 73 的版本,带来新的媒体控制策略。其中为了推进 PWA 的进度,扩展了媒体播放与键盘的交互。 如果我们使用 Mac 的话,大家一定见过最上面(如果带 touch bar,则是 touch bar) 快进,下一曲,暂停,静音等按键。 很早之前我们介绍过 使用 mediaSession 详情 »

【转】Web端H.265播放器研发解密

原文地址: mp.weixin.qq.com 作者: 林晚 (淘宝技术) 很早之前写过 Web 播放 H265 的文章,今天淘宝的童鞋带来了更进一步的研究,包括音频的同步,以及对 WebAssembly 的使用,目前该方案其实并不太推荐部署到生产环境,一方面是出于性能帧数丢失,另一方面整个工程复杂度的考虑,不过还是可以学习下整体的思路。 随着音视频业务的快速发展,作为前端工程师,我们团队也逐步深入到音视频编解码领域,涉及到流媒体技术中的文本、 详情 »

HLS.JS 自定义 分片 TS 请求 URL

很早之前写过 hls.js 源码解读【1】 ,基本分析了 hls.js 这个库的设计和实现。阅读源码一方面是为了吸收对方设计或者编码上的优点,当然也有可能是另外一个原因,就是一些需求从表面的文档里找不到具体的实现思路。 默认情况下,我们并不需要对解析出来的 ts 分片地址做改造,但是如果真的需要的话,其实有两个思路。 思路 1 复写 Loader 。 自己实现一个关于请求的 Loader ,通过配置传入类似; class 详情 »

修复 CALL_AND_RETRY_LAST Node 运行问题

最近使用 react-native 的时候遇到了下面的异常: CALLANDRETRY_LAST Allocation failed - process out of memory 大概是因为你在 JS 执行比较大的 JSON.parse() 的时候,这个时候比较直接的办法是设置 --max_old_space_size。 在你的 .bash_profile 详情 »

iOS 12 静音模式下 AudioContext 无法正常播放的 Bug

最近收到用户反馈,网页的背景音乐播放没有声音。 然后我们就按照正常的流程 Debug 。但是我拿到我的 iPhone 7 测试的时候,但是发现是可以正常播放的,但是 iPhone XS 确没有办法播放。 而且这次非常悬疑的是,iPhone XS 的又是可以正常播放虾米音乐的的歌曲。 此时此刻,宝宝的心情,只能用如下图表示: 随后开始看代码,项目的背景音乐是启用了 AudioContext 。这个时候我们强制设置 AudioContext 的音量来, 详情 »