gwuhaolin
gwuhaolin
in IE9 ,use FB's react work fine,replace with react-lite work strange and throw error. ``` SCRIPT5007: Unable to get value of the property 'cache': object is null or undefined SCRIPT87:...
流媒体加密
> 本文只讨论应用于浏览器环境的流媒体协议的加密 ## 为什么要加密视频 付费观看视频的模式是很多平台的核心业务，如果视频被录制并非法传播，付费业务将受到严重威胁。因此对视频服务进行加密的技术变得尤为重要。 本文所指的视频加密是为了让要保护的视频不能轻易被下载，即使下载到了也是加密后的内容，其它人解开加密后的内容需要付出非常大的代价。 无法做到严格的让要保护的视频不被录制，原因在于你需要在客户端播放出视频的原内容，解密的流程在客户端的话不法分子就能模拟整个流程，最保守也能用屏幕录制软件录制到视频的原内容(可以通过加水印的方法缓解下)。我们的目标是让他获取原内容的代价更大。 ## 常见视频加密技术 视频加密技术分为两种： 1. 防盗链：通过验证的用户才能访问到没有加密的视频内容，这种方案存在视频很容易就被下载的风险，严格来说这不属于加密。这种方式其实是资源访问授权，它实现起来简单。 2. 加密视频本身：通过对称加密算法加密视频内容本身，用户获得加密后的视频内容，通过验证的用户可以获取解密视频的密钥，在客户端解密后播放。这种方式实现起来流程复杂会带来更多的计算量。 一般结合这两种技术一起用，第1种技术很成熟也有很多教程就不再复述，本文主要介绍第2种加密技术。 ## 流媒体加密技术原理 看视频分为两种，看点播和看录播。 要看点播可以通过下载完整个视频后再看，或者通过流媒体边下边看。 看直播只能通过流媒体看最新的画面。 加密整个视频的技术很简单，把视频看成一个文件采用加密文件的技术，这种技术太多就不介绍了。 加密流媒体的技术很少，也很难找到学习资料，本文主要介绍流媒体加密技术。 常见的应用与浏览器播放的流媒体传输协议有： - HLS：Apple 推出的基于 HTTP 协议的 MP4 分片传输协议，可用于点播和直播场景。每下载一个分片都需要发生一次...
本文将教你从0写一个[Shadowsocks](https://github.com/shadowsocks/shadowsocks-go)，无需任何基础，读完本文你就能完成一个轻量级、高性能的 Shadowsocks 代替品。 我们暂且把最终完成的项目叫做 Lightsocks，如果你很急切地想看到结果，可以先体验本文最终完成的项目 [Lightsocks](https://github.com/gwuhaolin/lightsocks) ，也可以下载阅读源码。 ## 认识 Shadowsocks Shadowsocks 是一个能骗过防火墙的网络代理工具。它把要传输的原数据经过加密后再传输，网络中的防火墙由于得不出要传输的原内容是什么而只好放行，于是就完成了防火墙穿透，也即是所谓的“翻墙”。 在自由的网络环境下，在本机上访问服务时是直接和远程服务建立连接传输数据，流程如图：  但在受限的网络环境下会有防火墙，本机电脑和远程服务之间传输的数据都必须通过防火墙的检查，流程如图：  如果防火墙发现你在传输受限的内容，就把拦截本次传输，就会导致在本机无法访问远程服务。 而 Shadowsocks 所做的就是把传输的数据加密，防火墙得到的数据是加密后的数据，防火墙不知道传输的原内容是什么，于是防火墙就放行本次请求，于是在本机就访问到了远程服务，流程如图：  也就是说使用 Shadowsocks 的前提是： - 一台在防火墙之外的服务器； - 在本机需要安装 Shadowsocks 本地端，用于加密传输数据；...
使用flv.js做直播
为什么要在这个时候探索flv.js做直播呢？原因在于各大浏览器厂商已经默认禁用Flash，之前常见的Flash直播方案需要用户同意使用Flash后才可以正常使用直播功能，这样的用户体验很致命。 在介绍flv.js之前先介绍下常见的直播协议以及给出我对它们的延迟与性能所做的测试得出的数据。 如果你看的很吃力可以先了解下音视频技术的一些[基础概念](https://github.com/gwuhaolin/blog/issues/5)。 ## 常见直播协议 - **RTMP**: 底层基于`TCP`，在浏览器端依赖Flash。 - **HTTP-FLV**: 基于`HTTP`流式IO传输FLV，依赖浏览器支持播放FLV。 - **WebSocket-FLV**: 基于`WebSocket`传输FLV，依赖浏览器支持播放FLV。`WebSocket`建立在`HTTP`之上，建立`WebSocket`连接前还要先建立`HTTP`连接。 - **HLS**: Http Live Streaming，苹果提出基于`HTTP`的流媒体传输协议。`HTML5`可以直接打开播放。 - **RTP**: 基于`UDP`，延迟1秒，浏览器不支持。 #### 常见直播协议延迟与性能数据以下数据只做对比参考 | 传输协议 | 播放器 | 延迟...
在开发React组件时我们通常需要处理2个问题： 1. 实例化这个组件以便调试 2. 为这个组件编写使用文档以便更好的让别人知道怎么使用这个组件 最原始的方法莫过于开发时建一个页面用于调试，开发完后再为其手写文档。然而一个详细的React组件文档应该包括： 1. 为各种使用场景编写demo以及对应的说明，同时附上demo的源码 2. 有demo可以当场体验而不是使用者要自己写代码后才能体验这个组件 3. 它的属性列表(`propTypes`) 4. 它的实例方法列表 如果你想做到以上估计得花上你一天的功夫，我希望能把精力放在开发更好的组件上剩下的能毫不费劲的优雅完成，于是我做了本文的主角[Redemo](https://github.com/gwuhaolin/redemo)。 Redemo是用来简单优雅的完成以上问题让你专注于开发自己的组件，剩下的一切它都为你做好了。先看下Redemo为组件生成文档的效果图或直接体验部分实践中的项目[redemo文档](https://gwuhaolin.github.io/redemo/)、[imuix](http://imweb.github.io/imuix/)：  结构如下： - 最上面是可立即体验的组件demo，同时可以用在开发过程中调试组件 - 组件实例下是这个demo的说明，支持markdown - 接下来是组件的属性列表(`propTypes`)，支持markdown - 最后是这个demo的源码 为你的组件生成这个你几乎不用写超过10行简单的代码更不用单独为组件写文档。假设你编写了一个Button组件，让我们来为Button组件编写一个demo： 1. 通过`npm i...
> 随着react、vue、angular等前端框架的流行越来越多的web应用变成了单页应用，它们的特点是异步拉取数据在浏览器中渲染出HTML。使用这些框架极大的提升web用户体验和开发效率的同时缺带来一个新问题，那就是这样的网页无法被搜索引擎收录。虽然这些web框架支持服务端渲染，但这可能又会增加开发成本。 有没有一个可用于任何单页应用的SEO解决方案，让我们不用对代码做改变保持原有的开发效率？[chrome-render](https://github.com/gwuhaolin/chrome-render)可以帮我们做到这点，它通过控制HeadlessChrome渲染出最终的HTML返回给爬虫来实现。 # HeadlessChrome介绍 前不久chrome团队宣布chrome[支持headless模式](https://developers.google.com/web/updates/2017/04/headless-chrome)，HeadlessChrome支持chrome所具有的所有功能只不过因为不显示界面而更快资源占用更小。相比于之前的[phantomjs](http://phantomjs.org)(作者因为HeadlessChrome的推出而宣布停止维护)chrome的优势在于它又一个很强的爹(google)会一直维护它优化它，并且chrome在用户量、体验、速度、稳定性都是第一的，所以我认为HeadlessChrome会渐渐替代之前所有的HeadlessBrowser方案。 ### 如何操控HeadlessChrome 既然HeadlessChrome是以无界面模式运行的，那要怎么控制它和它交互？ chrome提供了远程控制接口，目前可以通过[chrome-remote-interface](https://github.com/cyrus-and/chrome-remote-interface)来用js代码向chrome发送命令进行交互。在启动chrome的时候要开启远程控制接口，然后通过 chrome-remote-interface 连接到chrome后再通过协议控制chrome。具体操作见文档： - [以headless模式和远程控制模式启动chrome](https://developers.google.com/web/updates/2017/04/headless-chrome) - [连接到远程chrome控制它](https://github.com/cyrus-and/chrome-remote-interface#sample-api-usage) - [控制chrome时支持哪些操作具体怎么用](https://chromedevtools.github.io/devtools-protocol/) # chrome-render原理与实践 ### 原理 chrome-render先会通过[chrome-runner](https://github.com/gwuhaolin/chrome-runner)以headless模式启动和守护你操作上的chrome，再通过chrome-remote-interface操控chrome去访问需要被SEO的网页让chrome运行这个网页，等到包含数据的HTML被渲染出来时读取当前网页DOM转换成字符串后返回。 怎么知道你的网页什么时候已经渲染出包含数据的HTML了可以返回了呢？为了提升chrome-render效率，默认会在`domContentEventFired`时返回。对于复杂的场景还可以通过开启chrome-render的`useReady`选项，等到网页里调用了`window.chromeRenderReady()`时返回。 只渲染出了HTML还不够我们还需要检测出来着搜索引擎爬虫的访问，如果请求来着爬虫就返回chrome-render渲染后的HTML否则返回正常的单页应用所需HTML。 综上，整体架构如下：  ### 实践...
检索数据库中的条目是很基本常见的功能，实现的方法也很多，常见包括： 1. 基于[Elasticsearch](https://www.elastic.co/cn/elasticsearch) 或 [Lucene](https://lucene.apache.org)这类专业独立的检索引擎实现 2. 基于数据库自带的检索功能实现 虽然基于Elasticsearch这类系统能实现高级灵活的检索功能，但开发和运维成本也将大大增加， 本文将教会你如何利用PostgresSQL内置的功能快速高效的实现大多数中文检索场景。 检索是大多数系统需要的功能，虽然已有很多成熟的检索方案，但多数是面向英文的对中文不友好。 虽然有Elasticsearch这类高级的检索引擎能实现中文检索但其学习和运维成本高，本文将教会你如何使用PostgresSQL数据库自带的功能实现大多数中文检索场景。 ## 实现中文检索的四种方式 ### 使用LIKE通配符 LIKE语句通过通配符实现文字检索，例如`SELECT * FROM movies WHERE title LIKE '权力的%'`语句能找出所有名称以`权力的`为开头的电影。 LIKE语句支持两种通配符： - `%`：代表任意个数的字符 - `_`：代表一个字符 例如以下匹配结果： ```...
本文首发于[IBMDev社区](https://developer.ibm.com/zh/articles/develop-graphql-services-using-golang/) --- Golang以其高效、稳定、简单吸引了大量开发者使用，越来越多公司和云计算平台开始选择Golang作为后端服务开发语言。 Golang对比目前主流的后端开发语言Java具有以下优势： - 性能好：编译为机器码的静态类型语言，能以更少的资源提供同样量级的访问量，节省云服务开支； - 上手快：语法更简洁上手快，标准库完善设计优秀，自带垃圾回收，开发效率高； - 并发友好：语言层面支持并发，可以充分利用多核，轻松应对高并发服务。 本文将以打造一个电影网站的后端服务为例，一步步教你如何用Golang开发GraphQL服务，内容涵盖： - 流行Golang HTTP框架对比与Echo框架教程； - 流行Golang GraphQL框架对比与graphql-go框架教程； - 使用Docker部署Golang应用； 搭建出的服务整体架构如图：  > 在阅读本文前你需要有一定的Golang基础，你可以[阅读免费电子书](http://go.wuhaolin.cn/)入门。 # HTTP框架 Golang标准库内置的[net/http包](https://golang.org/pkg/net/http/)能快速实现一个HTTP服务器： ```golang import ( "fmt"...
## 入门与概念 - [[总结]视音频编解码技术零基础学习方法](http://blog.csdn.net/leixiaohua1020/article/details/18893769) - [入门启发：音视频的简单理解](http://www.ruoxu.me/yin-shi-pin-qi-fa) - [视频编码基础--帧的类型](https://wuyuans.com/2012/01/video_encode_frame) ## 容器格式 - [视音频编解码学习工程：FLV封装格式分析器](http://blog.csdn.net/leixiaohua1020/article/details/17934487) ## 传输协议 - [RTMP协议规范](https://chenlichao.gitbooks.io/rtmp-zh_cn/content/1-introduction.html) - [带你吃透RTMP](http://mingyangshang.github.io/2016/03/06/RTMP协议/) - [RTMP服务器的延迟，多级边缘不影响延迟，gop为最大因素](http://blog.csdn.net/win_lin/article/details/12615591) ## 编解码