查看详情

深入理解 DRM 系列

准备开始写一系列关于 DRM。由于自己主要从事流媒体工作,这里也以流媒体的内容为主。 这里大概会写几篇,代码部分会聚焦在 Web 端的内容处理。自己最近一直在从事这方面的工作,因此也希望罗列整理一些资料,分享自己在这方面的一些心得。 DRM 目前已经存在于绝大多数的服务 APP 中。最直观的体验,就是你可以尝试看一些来自 Disney 等电影公司的电影,时候你可以尝试截图试一下: 我们可以从 Bilibili 网站点击进去,发现截图的时候是黑屏。这样也是为了防止录屏将视频流出去。尽管我们有 DRM 保护技术,但是还是依旧存在严重的流媒体盗版事件。因此DRM发展依旧有很长的路。 这一些列文章,自己将从下面几个部分区介绍: 什么是 DRM 常见的流媒体DRM 方案 Web 前端如何支持 DRM 深入理解 Widevine HDCP介绍 常见的 DRM 问题 希望这一系列文章,可以帮助大家去慢慢理解 DRM 工作,并且在日常工作中有所实践。 详情 »

查看详情

Typesctip unknown vs any

Typescript 如今已经成为非常火的开发语言,很多公司都将它作为首要的项目搭配。自己也是在使用中,发现了国外工程师非常严苛的要求用对 unknown 和 any。 unknown 类型,顾名思义:任何值都可以分配给unknown类型,但如果没有类型断言,unknown则不能分配给除自身和any类型之外的任何值。unknown同样,如果没有首先断言或将其限制为更精确的类型,则不允许对类型设置为 as 的值进行任何操作。 any 则是当变量的类型未知或变量的类型尚未定义时使用的泛型类型 其实我们看一段代码就很好理解了: let vAny: any = 10; // We can assign anything to any let vUnknown: unknown = 10; // We can assign anything to unknown just like any let s1: string = vAny; // Any is assignable to anything let s2: 详情 »

查看详情

使用 DOMParser 解析 XML 文件

大家可能偶尔会有碰到在 Web 端处理 XML 的文件 Case. 之前大家可能第一时间想的是正则表达式。 我们经常用它来进行标签或者属性的匹配。 但是今天会给大家带来一种全新的思路。我们知道 XHTML 是 XML 的子集。而且很早 HTML 就开始自己自定义的标签了。因此我们可以尝试借助 DOM Node 的思想把我们的 XML 文件字符串来进行 Dom 节点的转换。 var parser, xmlDoc; var text = `<?xml version="1.0" encoding="UTF-8"?> <!--Generated with https://github.com/google/shaka-packager version v1.5.1-c540e5a-release--> < 详情 »

查看详情

loadedData,loadedMetadata,canplay 什么时候播放最好

最近一直在做 MSE 相关的事情,机缘巧合下碰到了关于 ReadyState 和它有可能触发的事情的研究,于是写下这篇文章作为记录。 前面一篇文章 HTML5 Video 元素 Ready State 分析 分析了 readyState 状态的具体含义,今天则会根据状态和关键事件来进行分析。 VIdeo 关于启动播放,有下面这些事件选择: loadedmetadata: 事件在元数据(metadata)被加载完成后触发 loadeddata: 事件在媒体当前播放位置的视频帧(通常是第一帧)加载完成后触发。 canplay: 事件在终端可以播放媒体文件时(但估计还没有加载足够的数据来播放媒体直到其结束,即后续可能需要停止以进一步缓冲内容)被触发。 canplaythrough: 事件在终端可以播放媒体文件时(估计已经加载了足够的数据来播放媒体直到其结束,而不必停止以进一步缓冲内容)被触发。 我们可以看到事件先后顺序是: loadedmetadata -> loadeddata -> canplay -> canplaythrough 我们再看看 3G 网速下的测试效果: 可以看到还是 loadedmetadata -& 详情 »

查看详情

【译】如何轻松的在你的Oculus 设备上测试的 WebXR 项目

原文链接: https://medium.com/@lazerwalker/how-to-easily-test-your-webvr-and-webxr-projects-locally-on-your-oculus-quest-eec26a03b7ee WebXR 目前还是特别小众的项目,所以在 Oculus 上调试也是需要一些实践的,希望这篇文章可以提升这方面的效率 最近,我花了很多时间使用 Babylon.js 制作 VR 游戏原型。我喜欢 Babylon 和 WebXR API 等技术如何让我利用现代 Web 开发的快速迭代时间构建 VR 体验,而不是使用 Unity 等较慢的编译循环。 也就是说,直到最近,我的开发工作流程中有一部分让我很恼火! 我的大部分测试都是在 Oculus Quest 上进行,开发则在 Mac 上进行。WebVR 和 WebXR API 都要求您从通过 HTTPS(而不是非安全 HTTP)提供服务的网页访问它们,大多数浏览器都为localhost. 由于我使用的是 Mac,因此无法通过 Quest 详情 »

查看详情

CSS 渐变字体实现

最近同事实现了 CSS 渐变的边框,于是乎自己想了下如何实现这个渐变字体。如果你有 SVG 经验的话,可能会非常快速的找到方法;当然如果你知道 canvas 肯定也是一个比较费力的解决方案,我们这里主要说下纯 CSS 的解决方案. 这里需要利用几个属性: background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面 -webkit-text-fill-color 指定了文本字符的填充颜色。若未设置此属性,则使用 color 属性的值。 我们通过填充渐变背景,并且将于背景延伸到字体内容即可。 span { font-size: 72px; font-family: arial; background: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 改变渐变方向 .flare { font-size: 72px; background: linear-gradient(#f12711, #f5af19); -webkit-background-clip: text; -webkit-text-fill-color: transparent; 详情 »

查看详情

TP 50 小计

在新公司由于工程师会更多的参加到数据分析中来,因此有的术语,尤其英文环境下还是需要去了解和学习的。比如 TP 50. 自己才开始看到时候还有些差异,但是透过上下文是能猜出什么意思来的。 这个是亚马逊的测试童鞋发给我的,自己之前确实没有太多统计学的工作经验,因此记录一下。 Top percentitle, TP 是一个统计学术语,表示一组数据按照从小到大排序,并计算器累计百分位则某一百分位的值就为这百分位数。 常见的我们会听到 TP50, TP90, TP99。 比如 一组数据 [10s, 1000s, 100s, 2s] 表示请求时长。 排完序后 [2s, 10s, 100s, 1000s] TP 50 就是 Math.ceil(4 * 0.5) = 2 也就是第二位的值 10s; TP 90 就是 Math.ceil(4 * 0.9) = 4 也就是最后一个 1000s。 有的运算会更加精细, 详情 »

查看详情

HTML5 Video VideoPlaybackQuality 实现丢帧统计

在 Web 开发中,我们依赖于 Video 元素进行视频播放,相对 Android 或者 Windows 客户端程序,我们更加依赖浏览器测对 Video 元素提供了什么样的能力。 而如果我们需要对丢帧率进行统计,现在有了 VideoPlaybackQuality 来完成改功能。 目前主流浏览器都得到了支持 VideoPlaybackQuality 对象表示了一系列描述视频播放质量的指标。 可以通过 HTMLVideoElement.getVideoPlaybackQuality() 创建一个实例来获取。 里面包含下面的属性; .creationTime 一个用毫秒表示从开始页面浏览到对象创建的 DOMHighResTimeStamp 对象 .totalVideoFrames 表示相 HTMLVideoElement 自从创建起的已创建和丢弃帧数数量总和的值 .droppedVideoFrames 表示相关联的 HTMLVideoElement 自从创建起的已丢弃帧数数量值 .corruptedVideoFrames 一个表示相关联的 HTMLVideoElement 自从创建起的损坏帧数数量的值。一个损坏帧可能属于创建帧或丢弃帧 这样我们通过简单的 droppedVideoFrames / totalVideoFrames 来实现一个丢帧比例的计算,从而实现一个质量的保证。而 hls.js-fps-controller.ts 也是采用相关 API 来实现播控质量的控制。 checkFPSInterval( 详情 »

查看详情

HTML5 Video 元素 Ready State 分析

最近一直在做 MSE 相关的事情,机缘巧合下碰到了关于 ReadyState 和它有可能触发的事情的研究,于是写下这篇文章作为记录。 Video 元素维持内部几个非常重要的状态,这些都是只读的: paused 属性,你可以直接从 video elment 上读取,当你暂停视频的时候,Video 元素会讲这个属性值改为 true, 这里还有一些别的情况,我会在后面一篇文章分析 readyState 属性,当然你也可以从 Video 元素上读取,不同 readyState 意味着 video 的不同状态。 官方罗列了这些状态值: // video element ready state Enum const unsigned short HAVE_NOTHING = 0; const unsigned short HAVE_METADATA = 1; const unsigned short HAVE_CURRENT_DATA 详情 »

查看详情

对于 Web 开发者非常有用的 ADB 命令

虽然 adb 是 Android 开发的同学经常用到的命令行工具,但是对于做一些 Webview 页面的调试或者 Hybrid App 开发前端同学,可能有的时候也需要接触下,尤其进行关键日志的搜集和查找。这里罗列下自己经常会用到的,记录下。 罗列当前的包名,可以展示当前安装的包的。 adb shell cmd package list packages 进行某些包的日志输出,比如你可以换成自己的应用包名。 adb logcat --pid=`adb shell pidof -s xxx.your.pakcage.com` 显示某个包当前的一些系统信息,比如运行内存信息,关于 Android 的内存,你可以读这篇文章了解更加每个参数含义: https://developer.android.com/tools/dumpsys#meminfo adb shell dumpsys meminfo | find 'com.xxx. 详情 »