使用 multipart/x-mixed-replace 实现 http 实时视频流

关于实时视频传输,业界已经有非常多成熟方案,分别应用在不同需求场景。本文介绍一种基于 HTTP ,非常简单、易理解的方案,实用性不强,但有助于理解 HTTP 协议。 从摄像头读取视频帧 node 的硬件操作能力偏弱,运行时本身并没有提供太多硬件接口,所以要调用硬件设备需要找到合适的库。 有许多工具可以实现从摄像头读取视频流,简单起见,我们选用了比较通用的框架: OpenCV,这是一个 c++ 写的计算机视觉处理工具,包含了各类图像、视频处理功能,对应的 node 版本:node-opencv,安装过程比较繁琐,在 windows 下容易出错,

  • van
6 min read
iview

iview 升级指南 —— MenuItem 篇

iview 在今年 7 月 28 号发布了 3.0.0 版本,大版本升级往往意味着功能、接口的大变更。 虽然官网已经有长长的更新日志,但看起来还是有些抽象了, 所以我决定做个新旧版本的比较,盘点新版本到底为我们带来了什么新特性。 本篇是系列文章的第三篇,重点并不在介绍 MenuItem 的功能特性,而在于对其代码的讨论; 对其设计的思考。 班门弄斧,见谅。 唯一新增的特性 —— 支持链接模式 循例是该先聊聊新特性的。Menu 有四个关联的组件,分别为:Menu、MenuItem、SubMenu、

  • van
10 min read
iview

iview 升级指南 —— Button 篇

iview 在今年 7 月 28 号发布了 3.0.0 版本,大版本升级往往意味着功能、接口的大变更。 虽然官网已经有长长的更新日志,但看起来还是有些抽象了, 所以我决定做个新旧版本的比较,盘点新版本到底为我们带来了什么新特性。 这一篇给大家讲解的,是一个很常用的组件 —— Button 先看结论 新版 Button 有如下新特性: 支持链接模式,可通过配置 to 属性启动 支持独立 ghost 属性,样式上可与其他的 type 值复合

  • van
7 min read
iview

iview 3.x 升级指南 —— Icon 篇

iview 在今年 7 月 28 号发布了 3.0.0 版本,大版本升级往往意味着功能、接口的大变更。 虽然官网已经有长长的更新日志,但看起来还是有些抽象了, 所以我决定做个新旧版本的比较,盘点新版本到底为我们带来了什么新特性。 这是系列文章的第一篇,讲的是最简单的组件 —— Icon,希望能给大家带来帮助 结论 新版本 Icon 有如下变化点: 新版本的 Icon 组件支持更多图标类型 新旧版本的图标名有些差异,升级时务必注意 Icon 组件支持自定义图标,可通过 custom

  • van
3 min read
ES6

[ES6] async/await 应用指南

async/await 是什么 async/await 是 ES7 引入的新的异步代码 规范,它提供了一种新的编写异步代码的方式,这种方式在语法层面提供了一种形式上非常接近于同步代码的异步非阻塞代码风格,在此之前我们使用的多是异步回调、 Promise 模式。 从实现上来看 async/await 是在 生成器、Promise 基础上构建出来的新语法:以 生成器 实现流程控制,以 Promise 实现异步控制。 Node 自 v8.0.0 起已经完全支持

  • van
8 min read
iview

分享一个 iView 调试案例

当我们遇到开源框架的 bug 时,应该如何处理? Google?查文档?提 issue ? 或许,我们还能尝试自己在源码中找出 bug 的原因! 本文分享笔者在工作中,遇到一个 iview 的 bug 时, 如何根据问题的表征,一步一步推导出问题的源头,最终找出解决方案的过程。 希望对尊贵的读者朋友们有些许启发。 版本升级触发的 bug 最近抽空对项目用的 iView 版本做升级,从 2.6.0 升到 2.

  • van
9 min read

收藏好这篇,别再只说“数据劫持”了

最近接触了一些面试者,当我问起“Vue 如何实现数据双向绑定”时,会脱口而出“数据劫持”,然后呢?然后就没有然后了╮(╯_╰)╭。确实,“数据劫持”是基础,但远不是面试官想听到的答案,不如花个十分钟看看本文,下次照着回答就好了 “双向绑定” 本身 要解答问题,首先要理解问题: 数据双向绑定 是一种模式,web语境下一般指数据从dom到JS对象之间的自动同步。DOM 与 JS 被隔离在两个不同的运行时上,互相之间需要通过命令式的 DOM接口 沟通:DOM 需要正确触发事件,将信息传输给JS程序;而JS也需要在状态变更后,

  • van
4 min read
Yeoman

手把手入门 Yeoman 模板开发

对大多数一个前端团队来说,Yeoman(简称yo)是一个非常值得学习的工具,它为前端项目提供了一种行之有效的方法,开发、分发、使用项目手脚架,提高项目启动速度,复用项目结构。 本文以generator-iview-admin 为例,简单说明手脚架,即generator的开发过程。 准备 开发 Yeoman 模板,需预先安装yo: npm i -g yo yo 细心的为我们准备了手脚架项目的手脚架generator-generator: npm i -g generator-generator 安装后,进入开发目录,运行: yo

  • van
5 min read
vue

源码解读: Vuex 的一些缺陷

众所周知,Vuex 是 Flux 架构的一种实现。Flux 清晰确立了数据管理场景下各种职能单位,其主要准则有: 中心化状态管理 状态只能通过专门 突变 单元进行变更 应用层通过发送信号(一般称 action),触发变更 Vuex 也是紧紧围绕这些准则开发的,通过 store 类提供 Flux 模式的核心功能。在满足架构的基本要求之外,则进一步设计了许多便利的措施: 通过“模块化”设计,隔离数据单元 提供 getter 机制,提高代码复用性

  • van
6 min read