web技术实验室
对一切新奇又有趣的web技术的研究与使用
Immok
消灭一点,舒服一点;消灭得多,舒服得多;彻底消灭,彻底舒服。
展开
-
【Vue】基于Vue的web终端
Githubhttps://github.com/ns2250225/vue-webssh效果图原创 2018-03-07 20:57:24 · 6789 阅读 · 0 评论 -
【Vue】源码分析--双向数据绑定的实现
总结 Vue的双向数据绑定主要通过Object.defineProperty来实现,先为所有的属性加上get/set的监控,这样当属性值改变时就会触发对应的set方法,然后再在set方法中通过观察者来更新视图,同时在get方法中进行依赖收集。Github地址:https://github.com/ns2250225/vue-analyze极简版的实现index....原创 2018-03-12 23:39:24 · 3675 阅读 · 0 评论 -
【Vue】源码分析--vdom与html的相互转换
简析vdom是由js对象节点组成的一个树状结构,通过diff算法对比js对象节点来更新,最后映射到原生的dom中一个简单的dom结构<div id="container"> <h1 style="color: red">vdom与html相互转换</h1> <p>hello vdom and html</p> <ul> <li>item #1</li>原创 2018-03-13 22:28:34 · 5633 阅读 · 0 评论 -
【webLive】用Flv.js+OBS做直播
环境准备win10NginxLiveGoOBSFlv.js启动LiveGo服务器双击解压后的livego.exe启动OBS并设置打开OBS 添加媒体源,添加一个本地的flv文件即可 开始推流编写测试用HTML并启动Nginx<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta原创 2018-03-14 16:31:13 · 5955 阅读 · 6 评论 -
【webProtocol】MQTT协议环境搭建
简介 MQTT是一个客户端服务端(C-S)架构的发布/订阅模式的消息传输协议。它的设计思想是轻巧、开放、简单、规范,易于实现。这些特点使得它对很多场景来说都是很好的选择,特别是对于受限的环境如机器与机器的通信(M2M)以及物联网环境(IoT)。安装MQTT的BroKer–mosquitto机器环境是CentOS7cd /etc/yum.repos.d/vi vi mosquitto.re原创 2018-03-19 21:54:57 · 716 阅读 · 0 评论 -
【Vue】编写一个Vue插件并发布到NPM
注册NPM账号https://www.npmjs.com/初始化Vue插件项目# 安装vue cli# 初始化插件项目vue init webpack-simple v-dplayerindex.js:为插件的入口文件v-dplayer.vue:为插件的vue组件编写插件的Vue组件v-dplayer.vue<template> <div id="dplayer"></di原创 2018-04-03 11:19:50 · 2360 阅读 · 1 评论 -
【Web】动态切换网站Title文字
在Head之间添加下面的代码<script>document.addEventListener('visibilitychange',function(){if(document.visibilityState=='hidden'){normal_title=document.title;document.title='记得回来哦~ ��';}else{document.title=normal_t原创 2018-04-03 11:57:33 · 1810 阅读 · 0 评论 -
【Web】CSS3实现文字滚动公告效果
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2018-04-03 16:08:10 · 27102 阅读 · 5 评论 -
【webAI】Tensorflow.js加载预训练的model
环境准备win10python3.6pip install tensorflowpip install tensorflowjs训练并保存tensorflow模型为saved_model# -*- coding:utf-8 -*-from __future__ import absolute_importfrom __future__ import divis...原创 2018-04-21 16:00:32 · 5678 阅读 · 0 评论 -
【webAI】使用Parcel构建Tensorflow.js代码
环境准备win10node8.9.1安装 yarn初始化项目yarn init -yyarn add @tensorflow/tfjsyarn global add parcel-bundler创建 app.jsimport * as tf from '@tensorflow/tfjs';// Define a model for linear reg...原创 2018-04-26 17:05:34 · 513 阅读 · 0 评论 -
【Vue】Django+vue2实现实时聊天室
简介 前端:vue2全家桶 后端: django2.0 ,django-rest-framework, channels2.0, redis,项目地址https://github.com/ns2250225/django-vue-chat在线演示用户名必填,密码随意http://45.77.142.21/#/login效果图...原创 2018-02-11 10:21:46 · 3006 阅读 · 19 评论 -
【WebRTC】webRTC与webSocket的区别
区别WebSockets允许浏览器和Web服务器之间的全双工通信WebRTC的PeerConnection允许两个浏览器之间的全双工通信原创 2018-02-11 16:05:52 · 7543 阅读 · 0 评论 -
【SIP】Centos7搭建kamailio的SIP服务器实现网络电话
安装kamailiocd /etc/yum.repos.d/wget http://download.opensuse.org/repositories/home:/kamailio:/v5.1.x-rpms/CentOS_7/home:kamailio:v5.1.x-rpms.repoyum install -y kamailioyum install -y kamailio-mys...原创 2018-02-11 21:36:43 · 6968 阅读 · 2 评论 -
【webRTC】一个基于 tornado 和 webRTC 的点对点视频语音文字聊天室
简介一个基于 tornado 和 webRTC 的点对点视频语音文字聊天室对webRTC的连接过程的理解# webRTC连接过程中的4种角色(1)Signaling Server (收发信息服务器)(2)ICE/TURN/STUN Server (IP,端口,MAC信息处理服务器)(3)Remote Peer (远端)(4)Local Peer原创 2018-02-12 23:45:22 · 1573 阅读 · 0 评论 -
【Vue】用Weex构建一个Native App
简介 Weex就像是vue native一样,用vue的语法编写,一次编译3个平台运行安装JDK8下载:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html配置环境变量安装Android Studio3.0下载:http://www.a...原创 2018-02-13 11:09:18 · 1961 阅读 · 0 评论 -
【PWA】PWA相关资料整理
PWA简介 PWA 全称 Progressive Web App,旨在提供更像原生且更好的web体验,并不等于是SPA(Single Page App) PWA可以实现【离线访问】,【webAPP安装】,【消息推送】等功能PWA相关资料饿了么的 PWA 升级实践YouTube: Building Our First PWA 百度开源基于VUE构建PWA的工具Se...原创 2018-02-13 16:48:00 · 353 阅读 · 0 评论 -
【webAR】用AR.js和A-frame实现webAR
Githubhttps://github.com/ns2250225/ns2250225.github.io效果图原创 2018-02-14 12:38:05 · 9660 阅读 · 4 评论 -
【webRTC】仿微信的语音段传输
简介使用webRTC获取和录制音频流使用webSocket传输音频流Gtihubhttps://github.com/ns2250225/audioRecord效果图原创 2018-02-14 21:58:26 · 1360 阅读 · 0 评论 -
【webAI】基于deeplearn.js的Mnist手写数字识别
简介 deeplearn.js是谷歌开源的基于硬件加速的一款web端深度学习库,类似tensorflowGithub:https://github.com/ns2250225/deeplearnjs-examplesindex.html<!DOCTYPE html><html lang="en"><head> <...原创 2018-02-19 14:49:16 · 989 阅读 · 0 评论 -
【webAI】用deeplearn.js和摄像头玩俄罗斯方块
参考文章https://medium.com/@mariannelinharesm/playing-a-game-using-just-your-camera-with-deeplearnjs-ca156008f537下载并启动项目git clone https://github.com/mari-linhares/teachable-machine-games.gitnpm install翻译 2018-02-20 22:58:20 · 1198 阅读 · 1 评论 -
【webAI】用deeplearn.js预测线性方程的参数
Githubhttps://github.com/ns2250225/deeplearnjs-examples/tree/master/basic_operation目标方程y = 3 * x + 23 为 Weights2 为 Baises代码/** * 预测线性方程 y = 3x + 2 的参数 * 其中 3 为 Weights, 2 为 Biases */// 创建数据集,原创 2018-02-21 17:32:06 · 404 阅读 · 0 评论 -
【PWA】将已有的vue项目改造成PWA
下载相关库npm install sw-precache-webpack-plugin --save修改build/webpack.prod.conf.js文件添加如下内容...const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')......plugins: [ ... // servi原创 2018-02-23 15:33:43 · 12618 阅读 · 8 评论 -
【webAI】从3类函数中理解机器学习
3类函数凸函数凹函数其他类别函数函数性质凸函数:凸函数的任何极小值也是最小值。严格凸函数最多有一个最小值。凹函数:凹函数的任何极大值也是最大值。严格凹函数最多有一个最大值。非凹凸函数:有多个极大极小值,只有局部最优解机器学习的任务机器学习的任务可以理解成下图:从一堆输入,经过处理,得到想要的输出这个机器学习任...原创 2018-02-25 18:18:25 · 454 阅读 · 0 评论 -
【webAI】deeplearn.js的线性回归
Githubhttps://github.com/ns2250225/deeplearnjs-examples/tree/master/linear%20regressionindex.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2018-03-01 16:55:55 · 935 阅读 · 0 评论 -
【webAI】deeplearn.js的逻辑回归
Githubhttps://github.com/ns2250225/deeplearnjs-examples/tree/master/logistic%20regressionindex.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...原创 2018-03-01 19:47:35 · 451 阅读 · 0 评论 -
【Blender】我的第一个3D模型--马克杯(附教程)
渲染图Blander导出gltf插件https://github.com/Kupoman/blendergltf图文教程对着正方体按X,确定删除默认的正方体 按Shitft+A 快捷键,创建一个圆环 按TAB 键,进入编辑模式,再按E,再按Z,再按3,再按Enter 键,把圆环拉伸 按 S 键,然后按1.3,接着按Enter,把圆筒上开口拉...原创 2018-03-05 22:41:12 · 21464 阅读 · 3 评论