准备做一个网页版聊天界面,表情啊.图片啊.上传文件啊都应该要有,视频就算了,语音还是要的. 本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器,前几天升了一下级,以后有时间再专门写一篇记录. 录音代码 本示例代码支持PC.Android.IOS(仅Safari)中使用,如果用RecordApp可增加对IOS(微信浏览器.小程序)的支持. 看万遍代码不如行动一遍,新建一个html文件,把下面三段代码复制到文件内,双击浏览器打开就能进行测试. <!-- 先加载js录音库…

以前在前人基础上重复造了一个网页录音的轮子,顺带把github仓库使用研究了一下,扔到了github上. 优势在于结构简单,可插拔式的录音格式支持,几乎可以支持任意格式(前提有相应的编码器):默认提供实时音量反馈.有一个波形显示扩展支持.录音结果非常容易立即播放录音或者上传录音到服务器(提供参考源码). 2018-05-16首发,2019-04-21更新 GitHub地址:https://github.com/xiangyuecn/Recorder 在线测试demo传送门:https://xia…

今天早上刚到公司,就收到反馈说公司前端页面的下载按钮在 iOS 7 的微信内置浏览器里面点击无效,经过确认之后,前端代码是正常的,问题出在了微信上,然后谷歌之,原来腾讯在***. 是 BUG 还是刻意为之? 最新版微信在所有开放的 webview(网页界面)里禁止了通过链接打开本地 app 或跳转到 app store,只有自家使用的 webview 能够打开 app 或跳转 app store.而且这种做法不像是 bug 所致,而是刻意为之. 可能的用意:微信是一个重要的互联网入口和应用入口,…

微软最近的惊人举动真多,对普通消费者Office 移动版宣布免费,对开发者也发布了完全免费的 VS2013 社区版! 不仅如此,就连 .Net 开发框架环境也竟然「开源」并且跨平台支持 Mac 及 Linux 了!! 同时宣布的 Visual Studio 2015 和 .Net 2015 预览版均也开放下载了.作为微软跨平台新战略下的开发工具, VS2015 支持开发人员编写跨平台应用程序,从 Windows 到 Mac.Linux.甚至是编写 iOS 和 Android 代码! 此外,微软还…

现在人人都想成为安卓/IOS应用开发工程师.其实,安卓/IOS应用可以用很多种语言来实现.由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了.所以,今天大家将会认识到一些利用前端语言来开发安卓/IOS应用的工具. 在文章的末尾,也介绍了使用JAVA.C#.Lua以及AS3来开发安卓应用的工具. 希望大家都能找到适合自己的开发工具!祝大家开发安卓/IOS应用一切顺利! PhoneGap 开发语言: HTML, CSS, JavaScript 开发工具: Ph…

一 RESTful简介 RESTful是一种网络应用程序的设计风格和开发方式 它结构清晰 符合标准 易于理解 扩展方便 REST 即Representational State Transfer的缩写 这个词组可以翻译成 表现层状态转化 通过URI定位资源(图片 文字 视频等等) 然后根据四个HTTP动词 对服务端资源进行操作 实现表现层状态转化 HTTP协议里面 四个表示操作方式的动词 GET POST PUT DELETE 分别对应四种基本操作 GET用来获取 POST用来新建 PUT用来更…

DEPHI XE5 XE6 ANDROID IOS开发的几点体会 2014-09-04 20:48 1.不纠结于APK或者APP的大小.现在的客户端设备都很廉价,300元以上的新安卓设备都不在乎软件的大小.一般情况下(指未携带打包数据库.图片等资源)APK或者APP大小在5M(APP与APK都差不多).增加了FDAC等数据库功能,会达到7M左右,增加datasnap会增加到10M左右. 2.忘了SHOWMODAL.FMX 只在WINDOWS下很好地支持SHOWMODAL,ANDROID\IOS基…

问题 最近在使用background-image属性来实现css3的逐帧动画时,碰到了个问题.在chrome浏览器上,background-image属性是支持css3动画的,但是到了firefox上,就完全看不到任何动画. 原因 通过网上查找,才发现W3C标准中明确background-image属性是不支持动画的,所以firefox由于遵循了该标准,并没有给该属性支持动画. 解决过程 解决方法是使用backgrond-position属性,该属性在W3C标准中是支持动画的,因此所有浏览器应该…

Recorder H5 GitHub开源库随着支持功能的增多,音频转码处理效率渐渐的跟不上需求了,近期抽时间对音频转码部分进行了升级优化,以支持更多实用的功能. 另外IOS的Hybrid App也完成了移植,Android和IOS都有了Demo App. 在线测试,GitHub地址:https://github.com/xiangyuecn/Recorder 一.Recorder H5录音库的特性 (1)浏览器支持 PC:包括但不限于Chrome.Firefox Android:Chrome.F…

  名词解解释 adobe After Effects AE:adobe After Effects,adobe公司的专业视频制作软件. Bodymovin插件预览 Bodymovin:是一个AE的插件,它可以把动画直接输出成代码,直接给程序员使用放在各个终端上使用,是airbnb团队开发的一个插件,其原理是将动画转成json文件格式,然后通过JS程序输出,转换成svg.canvas或html5动画. Lottie官网界面 Lottie:是集成BodyMovin一系列服务的总称,其官网是http…

随着移动端的发展,跨平台已成为通讯架构设计的重要考虑因素,PC.Android.IOS.WP等跨多平台间的数据通讯,必然要解决字符编码/解码的问题. 多字节字符集MBCS不是跨平台的首选字符集,面向跨平台.国际化的推荐字符集肯定是UNICODE. 写VC的人都知道,在以前VC++6.0中默认的字符集是多字节字符集,而VS2005及以后默认的字符集是Unicode,VS2013中默认不再对多字节字符串进行支持. 但对很多较早的服务端项目,依然使用的是多字节字符集,不过使用多字节字符集依然可以实现跨…

转自:https://www.cnblogs.com/zamhown/p/6688369.html 大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画   前段时间听部门老大说,Airbnb出了个移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形式在移动设备上渲染播放.AE(Adobe After Effects)可是视频后期特效和动画制作…

先放结论:Safari支不支持HTML5录音? ——据我调查,不支持. 现在浏览器中最好的解决方案是WebRTC下的 navigator.getUserMedia API. 可是当使用Can I use查看兼容性的时候,我发现 不过这个是有历史原因的,我记得RTC是在去年,2013,才刚刚由思科提出并且确定下来的(没记错的话).但Audio标签在制定初就是HTML5规范的一部分,兼容性如下,因此你的陈述有误. 所以,我在做相关Application时候,就不得不得考虑退化,然而多媒体方面的能做的…

前段时间听部门老大说,Airbnb出了个移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形式在移动设备上渲染播放.AE(Adobe After Effects)可是视频后期特效和动画制作的行家,前段时间充斥视野的MG动画都是用它制作的.如果真的可以实现,就会大大方便前端动画的设计. 后来到4月8日,我参加了第二届中国前端开发者大会(FDCon2017),作为菜鸟瞻仰了下各位大牛.巧的是,…

转自原文 支持WEB.Android.IOS的地图解决方案 工具链 GIS工具集 OpenGeo Suite 包含PostGIS, GeoServer, GeoWebCache, OpenLayers, 和 QGIS 地图准备 QGIS 导入.导出.编辑.shp,postgis,geotiff,geojson,dxf等多种GIS文件,给普通图片配准到地理坐标 教程:http://www.qgistutorials.com/en/ DraftSight 编辑CAD文件 SketchUp   从CA…

本文主要介绍WebRTC (我们翻译和整理的,译者:weizhenwei,校验:blacker),最早发表在[编风网] 支持原创,转载必须注明出处,欢迎关注我的微信公众号blacker(微信ID:blackerteam 或 webrtcorgcn). 回顾:Android IOS WebRTC 音视频开发总结(八十三)-- 使用WebRTC广播网络摄像头视频(上) 连接网络摄像头 正如上文所提,我们选用一款简单的D-Link DCS-7010L网络摄像头.关键原因在于它支持RTSP协议,因此服务…

文章主要从开发者角度谈国内首届WebRTC大会,支持原创,文章来自博客园RTC.Blacker,支持原创,转载必须说明出处,更多详见www.rtc.help. ---------------------------------------------------- 技术资讯里面这几天铺天盖地的WebRTC大会消息,一方面说明大会火热,另一方面说明webrtc这个东西很有市场, 本文主要从开发者角度用我一贯直白的语言跟大家解释一些大会相关信息,先从百度输入关键字webrtc,见下图(很火吧): -…

本文主要介绍easyRTC,文章来自博客园RTC.Blacker,支持原创,转载请说明出处. 先看看人家官网的介绍,然后再来解释,这样您可能更容易理解: 以下部分内容属个人看法,如有异议,欢迎探讨: 1.EasyRTC其实就是一套封装好的js库,他很方便用户调用webrtc接口,实现浏览器上的音视频功能. 2.以前他的官网上还有total free字样,现在变成price了,所以开源和免费是不能划等号的,如果都免费,咱程序员真变成码农了! 3.因为对手机端来说用浏览器来实现音视频功能并不方便,所…

1.开发背景 最近用html5写了个小游戏,中间踩过无数坑,有很多甚至百度都百度不到答案,可见html5还真是不成熟,兼容性的复杂度比ie6有过之而无不及,性能那个渣简直无力吐槽.. 好了,吐槽结束,虽然有这么多的缺点,但是由于其良好的跨平台前景以及极低的学习成本,再加上优秀的框架,我最终还是选择了用html5来开发这个小游戏,而且是小游戏,所以就没有用什么游戏开发框架了,只是自己简单的封装了一个,因此所有的bug都被我走了一遍..正当我调试完所有的android上的bug之后,心想自己的努力不…

转载请注明原文地址:http://blog.csdn.net/milado_nju ## 会议链接(应用和工具专场) http://2013.html5dw.com/main, 2013年8月10日 ## 源文件已经被某些好心人上传到baidu文库: http://wenku.baidu.com/view/fdf53a3755270722182ef714.html ## 基本内容(节选) Android上的HTML5 过去,现在和将来 1. 为什么HTML5和Android? Global Sm…

对于Android和IOS开发及测试的同事来说抓包是一个很重要的事,有利于排查问题所在,快速定位问题.但长期以来一直没有一款可以快速抓包的工具,直到有了Fiddler2. 使用步骤: 1.  Fiddler2下载地址(http://fiddler2.com/) 2.  下载对应的版本安装到电脑 3.  打开Fiddler软件,界面和其他抓包软件大致一样,效果图如下: 4.  接下来就是抓取Android/IOS的数据包了,首先安装Fiddler2的电脑必须与Android/IOS手机处于同一个局…

随笔分类 - webrtc   Android IOS WebRTC 音视频开发总结(七八)-- 为什么WebRTC端到端监控很关键? 摘要: 本文主要介绍WebRTC端到端监控(我们翻译和整理的,译者:weizhenwei,校验:blacker),最早发表在[编风网] 支持原创,转载必须注明出处,欢迎关注我的微信公众号blacker(微信ID:blackerteam 或 webrtcorgcn). callstats是一家做实时通讯性能测阅读全文 posted @ 2016-07-22 08:…

本文主要介绍WebRTC (我们翻译和整理的,译者:weizhenwei,校验:blacker),最早发表在[编风网] 支持原创,转载必须注明出处,欢迎关注我的微信公众号blacker(微信ID:blackerteam 或 webrtcorgcn). 从技术上来讲,使用网络摄像头进行在线广播并不需要WebRTC.摄像头本身就是一台服务器,它能够连接到路由器并在线传输视频内容.那么,为什么我们还需要WebRTC呢? 这至少有两方面原因: 1.随着观看网络广播的观众越来越多,网络带宽会逐渐不足.如果…

unity我一直在用5.0以下的版本 昨天升级到了最新版本5.3.1 发现无法打android包,ios也不行 提示“No Android/IOS module loaded” 下面有个Module Manager按钮,点击发现然并卵 在网上查了一下资料,得到了答案 这是原文:http://answers.unity3d.com/questions/1109680/unity-53-module-manager-or-android-sdk-location-fo.html 大概意思就是说你需要…

超详细React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用   2016/06/16 |  React Native技术文章 |  Sky丶清|  暂无评论 |  121 views   尊重版权,未经授权不得转载 本文来自:江清清的技术专栏(http://www.lcode.org) (一)前言 现阶段大家在使用React Native开发项目的时候,基本都会使用到微信好友或者微信朋友圈分享功能吧,那么今天我就带大家实现以下RN微信好友以及朋友圈的分享功能.…

本文主要介绍一种QoS的解决方案,文章来自博客园RTC.Blacker,欢迎关注微信公众号blacker,更多详见www.rtc.help QoS出现的背景: 而当网络发生拥塞的时候,所有的数据流都有可能被丢弃:为满足用户对不同应用不同服务质量的要求,就需要网络能根据用户的要求分配和调度资源,对不同的数据流提供不同的服务质量: 1.对实时性强且重要的数据报文优先处理: 2.对于实时性不强的普通数据报文,提供较低的处理优先级,网络拥塞时甚至丢弃. 为了满足上述需求,QoS出现了,定义如下: QoS…

本文主要介绍如何测试基于浏览器和手机的视频通话程序,转载请说明出处,文章来自博客园RTC.Blacker,更多详见www.blackerteam.com   很多人想测试浏览器(包括浏览器版本和桌面exe版本),android,iOS之间的视频效果,所以提供我的东东给大家测试,操作方式如下:   演示注意事项    1.1. 附件说明         1.1.1. 如需通过手机APP进行测试,请先去附件里面下载相应的apk,或者关注微信公众号blackerteam或发邮件到blacker@rtc…

本文章主要介绍WEBRTC在各平台下调试或日志查看方式,以方便问题排查,包括BS,PC,Android,IOS(本系列文章转载请说明出处,博客园RTC.Blacker). 1,浏览器开发: 这种开发方式不需要下载和编译WEBRTC源码(很多人都是"死"在这里的,不过确实很麻烦,原因就不赘述了),直接调用浏览器提供的API, 入门相对简单(这并不意味着效果差,恰恰相反,因为浏览器厂商为你做了很多的优化,很多时候效果比自己去弄好多了). 这种方式的缺陷就是无法修改底层代码,如果您想调整一些…

前段时间在搞webrtc iOS开发,所以将标题改为了Android IOS WebRTC 音视频开发总结, 下面都是开发过程中的经验总结,转载请说明出处(博客园RTC.Blacker): 1. IOS WebRTC音视频编译和下载: 有过android WEBRTC编译下载经验再去弄IOS,你会发现简单多了,再有问题,可参考: 1.1.http://www.cnblogs.com/ProbeStar/p/3411510.html  记住有MAC和IOS两个版本,要指定好你想要哪个版本. 1.2…

详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的banner图片切换效果. 写法很简单,网页初学者们或者wenbapp初学者们可以拿去学习学习,也可以在这基础上加上手机的图片滑动切换效果.废话不多说,下面说说这个简单的图片切换的效果吧! 首先以下是图片切换的效果图:   图片切换效果html内容: <div class="tyna2"&…