基于webrtc的一对一视频聊天(apprtc)

一、前言

项目作者:https://github.com/webrtc

成品项目:https://github.com/webrtc/apprtc

samples项目:https://github.com/webrtc/samples

搭建过程参考文章:http://www.cnblogs.com/hujihon/p/4991137.html

https://www.jianshu.com/p/c55ecf5a3fcf

说明

此项目为谷歌项目组的官方项目。apprtc为成品项目,可以编译后部署使用。samples项目为webrtc技术点的单独测试。

本文主要介绍apprtc项目的环境搭建与部署。其中“Collider”为服务端,使用GO语言编写;前端项目使用grunt(Nodejs)构建与编译;前端使用Python语言实现( Google App Engine SDK for Python); Google App Engine SDK for Python的环境搭建,需要服务器能够翻墙链接谷歌云服务器(参考文章【ssh+proxychains实现linux服务器的代理翻墙】)。

文章案例使用的服务器为阿里云linux服务,操作系统为ubuntu server 16。

二、获取项目源代码

1.登录服务器并进入指定目录:

通过ssh登录服务器

1.1.更新系统软件包:

sudo apt update
sudo apt dist-upgrade
sudo apt autoremove

1.2.进入当前用户的目录下:

cd (此案例为阿里云的ubuntu server 16,用户目录的绝对路径为"/root/")

2.从github上获取项目源代码:

sudo apt install git
git clone https://github.com/webrtc/apprtc.git

继续阅读基于webrtc的一对一视频聊天(apprtc)

基于webrtc的多对多聊天(SkyRTC)

一、基本介绍

  1. 开源项目地址
    作者项目集合地址:https://github.com/LingyuCoder
    服务端项目地址:https://github.com/LingyuCoder/SkyRTC
    客户端项目地址:https://github.com/LingyuCoder/SkyRTC-client
    demo项目(本文中应用的)地址:https://github.com/LingyuCoder/SkyRTC-demo
  2. 项目技术特点
    这是一个使用SkyRTC和SkyRTC-client搭建浏览器中音频、视频、文字聊天室的Demo
  3. 前置条件
    参考【Nodejs开发环境与生产环境安装】安装nodejs;
    参考【基于coturn的webrtc iceserver搭建】自建iceserver服务;
    参考【通过apache2代理+Let’s Encrypt实现网站https与wss】配置网站的安全访问(浏览器有安全策略,除了127.0.0.1,其他需要配置SSL,页面才能调用本地摄像头与耳麦设备)。

二、开发配置

  1. 安装Node.js及npm环境(node版本推荐6.x以上的版本,如果使用4.x版本,此项目启动是会报错【EMPTY_BUFFER: Buffer.alloc(0)】,可以使用“nvm”安装需要的node版本)
  2. 下载源码(https://github.com/LingyuCoder/SkyRTC-demo)到本地,并解压缩
  3. 移动到解压后的目录下
  4. 使用命令npm install安装所需要的库
  5. 运行命令node server.js
  6. 访问http://localhost:3000#roomName查看效果,其中roomName为进入的房间名,不同房间的用户无法互相通信
  7. 进行浏览器兼容的开发工作

##功能说明 支持划分房间的在线音频、视频、文字聊天,提供房间内文件共享功能

三、部署配置

  1. 安装Node.js及npm环境
  2. 上传修改后的项目代码到目标服务器(不要带node_modules)
  3. 移动到解压后的目录下
  4. 使用命令npm install安装所需要的库
  5. 运行命令node server.js,建议配合forever
  6. 通过apache配置https与wss代理
  7. 访问https://公网ip#roomName查看效果,其中roomName为进入的房间名,不同房间的用户无法互相通信

四、优缺点分析

1.优点

部署运行简单

2.缺点

项目长久不维护,浏览器兼容性差。需要进行客户端js库的调整

如何实现微信公众号历史消息数据抓取并整理为excel表格

一、应用场景

作为新媒体运营人员或者数据分析人员,获取并分析自营公众号的营销数据与竞品公众号的营销数据可以为当前绩效与未来决策提供数据支持。

微信公众号作为主流新媒体平台之一,被专业新媒体人与各企业新媒体运营人员所重视。本文就是针对“如何实现微信公众号历史数据抓取并整理为excel表格”的问题,提出初步解决方案与改良方案。

二、难点分析

微信公众号历史消息数据是基于html5+ajax方式进行加载的。不过与普通微网站不同的是:微信公众号历史消息页只能在微信中打开,在其他浏览器中无法打开。所以,不能用普通爬虫工具直接爬取数据,如何爬取数据成为一个难题。

三、解决方案

注意:此教程不是小白教程,只是提供解决思路。欢迎与博主沟通探讨。 继续阅读如何实现微信公众号历史消息数据抓取并整理为excel表格

Web开发常规调试方法与常见问题分析

自工作以来,本人一直从事web开发与相关技术攻关。期间,本人与同事都难免遇到一些反复出现的问题,今天整理出来,供现在与未来的同事,以及博友参考。

一、Web项目基本原理

现在的web项目大都已经前后端独立开发与部署。

前后端独立开发,一般是前端与后端通过web接口(常见的有RESTfulwebsocket)文档进行交流。前端开发人员先更具业务需求与实际原型进行ui的编程实现与事件的设计,并通过web接口进行业务数据的增删改查。后端开发人员根据定义的接口文档,实现业务数据的计算与增删改查,并对持久化的数据(一般保存在数据库里)进行操作。

前后端独立部署,前端项目均为html5/css/javascript/图片等静态资源,只需要web服务器就可以部署运行。常用的web服务器有apachenginx。后端开发人员则只需要把接口服务发布到应用服务器,并正确连接数据库。常用的java的应用服务器有tomcatjetty等。

对了,在此声明下,这里所说的前端,并不只是pc站的html页面,也包括微网站、微信小程序、APP应用等。

二、常规调试方法

根据上面的分工,可以明显地web开发中遇到的问题分为:前端实现问题,接口调用问题,接口实现问题。

a) 前端实现问题

前端实现问题是指,前端在调用接口前或者调用接口后,业务逻辑错误或者程序错误造成的系统用户交互异常。针对不用的前端,有不同的调试工具。

Pc站与微网站可以使用chrome(推荐)或者firefox的开发者工具进行调试。

微信小程序与公众号可以使用微信官方开发者工具进行调试。

APP使用开发环境的真机联调进行调试。

b) 接口调用问题

接口调用问题,多为前端调用接口错误或者接口本身存在bug引起的,无法获取前端人员预期的返回结果。

在开发环境中,可以使用上述的工具进行调试。在生产环境中进行故障排查是,pc站与微网站还可以通过pc浏览器进行故障分析。但公众号、小程序、APP需要通过charles等抓包工具进行分析。

如果没有接口调用的数据包,则前端程序存在问题;

如果接口的请求参数与请求头信息存在错误,则前端调用接口使用错误;

如果接口的响应参数与响应头信息存在错误,则接口实现存在问题;

如果接口调用正常,则前端程序对数据结果处理存在问题。

c) 接口实现问题

接口实现问题,多为后端开发人员没有根据正确的请求参数返回正确的响应结果。多由逻辑错误、数据持久化处理错误与系统级错误引起的。

在开发时可以通过断点跟踪就行分析。生成环境需要通过分析系统日志或者程序的日志进行分析。

三、常见问题分析

在以上几大类问题中,有些尤为突出,下面进行详细分析。 继续阅读Web开发常规调试方法与常见问题分析

arttemplate嵌套子模板,属性不存在时,取值bug与解决办法

无可置疑,arttemplate是本人用过的最好用的前端模板引擎。不过随着使用的深入与更加广泛,还是遇到了一些梗。下面将较少一个本人遇到的实际问题,分析方法与采用的解决办法。

一、问题描述

Arttemplate嵌套子模板,属性不存在时,默认值$data取值为当前父级。

<body>
<div id="demo"></div>

<!--
作者:1209461019@qq.com
时间:2017-02-17
描述:主模板
-->
<script type="text/html" id="demo_T">
{{each}}
	<div>姓名:{{$value.name}}</div>
	<div>性别:{{$value.age}}</div>
	<!--
		作者:1209461019@qq.com
		时间:2017-02-17
		描述:嵌套子模板
	-->
	<div>朋友:{{include 'demo_sub_T' $value.friends}}</div>
	<hr /> 
{{/each}}
</script>
<!--
	作者:1209461019@qq.com
	时间:2017-02-17
	描述:子模板
-->
<script type="text/html" id="demo_sub_T">
{{each}}
	<div>朋友姓名:{{$value.name}}</div>
	<div>朋友年龄:{{$value.age}}</div>
{{/each}}
</script>
 继续阅读arttemplate嵌套子模板,属性不存在时,取值bug与解决办法