刚做完一个web端操作巡检机器人项目，其中机器人主要包含海康摄像头设备，红外和可见光两种，官方3.2web插件比较复杂，而且有一定的兼容性问题，经过调研webrtc-streamer是一个相对比较好的实现方式，经过测试延迟低毫秒级别。

本组件还集成了视频框选截图功能。

于是开始铺坑。首先网上搜集资料，查看官方git。

一、启动webrtc服务

使用webrtc-streamer组件首先需要启动一个本地rtc服务，window系统比较简单，从这里https://github.com/mpromonet/webrtc-streamer/releases
下载适合项目需求的webrtc-streamer源码包，本文以webrtc-streamer-v0.7.0-Linux-x86_64-Release.tar.gz为例，解压后直接运行webrtc-streamer.exe即可，默认服务8000端口。

使用docker：

1
2
3
4

# docker中获取webrtc-streamer
docker pull mpromonet/webrtc-streamer
# 启动webrtc-streamer镜像
docker run -itd -p 8000:8000 --name webrtc-streamer mpromonet/webrtc-streamer

docker部署可能会遇到各种问题，可以找运维同学帮忙。

阅读全文

分享的感悟

• 分享能推动和加快你的学习力。
• 分享可以帮助团队快速成长。
• 增强人际关系，加深组员彼此了解，知道谁更擅长什么。

当想要静下来好好学习一项技术时，往往总是会半途而废，因为惰性心理。
想一想下次要分享给别人时，会帮你克服这种心理，从而坚持下去。

分享的目的是为了帮助别人进步？
实际上分享者往往能够得到更大的进步和回报。

团队里，不要让分享变成压力，而是轻松的。在和同事相互沟通、讨论、帮助和共同进步过程中，获得更多乐趣，积极主动帮助同事解决问题，同事也同样会帮助你。

阅读全文

雄小勤H5项目最近需要实现H5手写签名效果，项目是uniapp框架，uniapp本身没有手写签名组件，经过调研可以用H5属性canvas实现。

一、html部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<view class="container">
		<view class="sign-box">
			<canvas 
				class="mycanvas" 
				canvas-id="mycanvas" 
				@touchstart="touchstart" 
				@touchmove="touchmove"
				@touchend="touchend"
			></canvas>
		</view>
		<view class="sigh-btns">
			<u-button text="重写" @tap="handleReset"></u-button>
			<u-button color="#2589EF" type="primary" text="确认" @tap="handleConfirm"></u-button>
		</view>
	</view>

阅读全文

一、为什么要有规范

• 降低新成员融入团队的成本, 同时也一定程度避免挖坑；
• 提高开发效率、团队协作效率, 降低沟通成本；
• 实现高度统一的代码风格，方便review, 另外一方面可以提高项目的可维护性；
• 规范是实现自动化的基础；
• 规范是一个团队知识沉淀的直接输出；

如果开发团队就一个人的话，那么自己写的代码就是规范，随着公司业务的扩展，团队不断壮大，这时候就要开始考虑协作和编码规范问题了。

阅读全文

最近在做微信小程序项目遇到一个问题，怎么区分本地、体验版、生产环境，通过环境变量设置来做区分配置不同环境下不同的API地址，最后用到wx.getAccountInfoSync()方法：

实例

根目录新建congfig.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 判断环境变量 develop: 开发版，trial：体验版，release：正式版
const envObj = wx.getAccountInfoSync()
const { envVersion, appId } = envObj.miniProgram
const config = {
  develop: {
    wx_tp_webview: 'http://192.168.2.115:8080',
    apiBase: 'https://api.test.com'
  },
  trial: {
    wx_tp_webview: 'https://test.xxxx.com',
    apiBase: 'https://api.test.com'
  },
  release: {
    wx_tp_webview: 'https://www.xxxx.com',
    apiBase: 'https://api.prod.com'
  },
}
module.exports = config[envVersion]

阅读全文

最近用vue-element-amdin搭建一套后端管理系统，jenkins打包时候总报一个错误，如下npm ERR! Error while executing:

npm ERR! D:\webWorkerEnvironment\Git\mingw64\bin\git.EXE ls-remote -h -t ssh://git@github.com/sohee-lee7/Squire.git
npm ERR! npm ERR! ssh: Could not resolve hostname github.com: Temporary failure in name resolution
npm ERR! fatal: Could not read from remote repository.
npm ERR! npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR! npm ERR! exited with error code: 128

阅读全文

一、websocket介绍

最近研究了一下websocket，网上看了一堆文档实例，边学整理了一下文档和实例，作为分享。

WebSocket协议出现的背景

我们在上网过程中经常用到的是HTTP和HTTPS协议，HTTP协议和HTTPS协议通信过程通常是客户端通过浏览器发出一个请求，服务器接受请求后进行处理并返回结果给客户端，客户端处理结果。

这种机制对于信息变化不是特别频繁的应用可以良好支撑，但对于实时要求高、海量并发的应用来说显得捉襟见肘，尤其在移动互联网蓬勃发展的趋势下，高并发与用户实时响应是Web应用经常面临的问题，比如金融证券的实时信息、社交网络的实时消息推送等。

阅读全文

最近接到一个基金cms系统需求，之前我们组内搭建类似项目用react居多，这次因为是新启项目，打算用vue尝试一下，之前也有看过vue文档并搭建过小项目，再者vue本身就上手快，于是再撸一遍api,找一套适合的框架（vue-element-amdin），就可以开始干了。service端接口我们选择自己用mongodb搭建（是同事用mongodb+typescript搭建的，之后我打算把他的分享转过来哈哈哈）。

一、vue简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

阅读全文

想学会某一项新的技能，最好的方法就是边看文档，边亲自动手实践。
亲手搭建基础实例代码 github

一、koa简介

Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。

二、koa2的优势

阅读全文

作为一名代码开发者，我认为基础是最重要的，不要说我会用什么什么流行框架，那将很快过时。但是如果你基础很好，不论什么新鲜框架，你都会很快的掌握和运用，或者你可以自己尝试开发一些应用级框架。正则就是js基础必备。

一、js正则简介

正则表达式是对字符串执行模式匹配的强大工具。

创建一个正则

第一种：字面量创建，将正则表达式直接当做对象使用。

1

var cc = /[a-z]/;

阅读全文