跨终端实践-天猫试戴的解决方案
2015-07-03 19:41
537 查看
请先扫码体验(天猫app体验最佳):
体验完产品,具体讲下技术实现方案,整体的实现过程可以分为:
这是试戴的关键一步,考虑到需要支持到各个终端,所以优先想到使用标准的web方案来实现:WebRTC-
基于getUserMedia,面向mobile 快速尝试,基本完成了主要的功能
但getUserMedia的支持情况并不理想,尤其是sarfari的不支持让广大ios/mac用户无法体验,这里就需要PC、mobile的兼容处理,以跨终端mobile first及优雅退化的思路设计兼容API:
在浏览器中如果无法支持,将采用flash方案补齐
在native中,优先采用native api 补齐
对于戒指的试戴,手机上我们期望优先调用后置摄像头,在web中启动时就需要设置优先后置摄像头,W3C文档还处于Draft阶段,相对还不是特别完善,可以通过如下设置:
通过
不同的终端,摄像头拍摄的图片照片尺寸是不同的,如果我们只需要获得某一部分图像,就需要对图像做剪裁,在WEB中为了不引起用户疑惑,展现给用户拍照界面时,所见最好就是所需要的部分
举个栗子:我们期望获得一个正方形的图片,但是rmbp中摄像原始是16:9的图像,考虑方案有:
考虑设置video的width/height 让图像自动充满video(参考官方文档并没有规定这部分实现,最新草案也无方向,这个方案走不通)
将video部分隐藏,知道目前图像的原始尺寸,然后垂直居中,方式如图:
需要注意的是:video API中有 videoHeight及videoWidth两个属性,当video play时理论这两个属性就是当前图像的宽高,但实际情况Mozilla存在一个bug#926753,play时仍无法准确获取,兼容的方案轮训监听:
在拍照完成native中需要把图片数据传递给web,另外用户保存图片到本地时,web又需要把合成好的图片数据传递给native让其保存,这边涉及native与web的传递大数据通讯:
native -> web:
android:可通过
ios:可通过
web -> native:
android:由于可以把native类暴露给web,js可以调用暴露的方法和native通讯,大数据也没问题;
ios:由于是采用UIWebViewDelegate方式,监控request方式通信,js通过自定义协议的URL用iframe请求,传输大量数据时便存在问题;解决这个问题方案:既然native可以和web顺畅通信,就可以通知native一个js 函数名,让native自己来取。
比较简单,用图片说明:
知道了具体位置,生成图片便可以简单的调用
Canvas获取图片数据会有跨域的限制,之前有:imageProxy flash来做代理的方案,但是这个方案仍然不够高效和简洁,尤其是对于mobile更无能为力
最好的方案是web标准的CORS,通过让服务器返回allow-origin的header,让canvas可以正常处理:
在整个开发的过程中是以组件化的思路分层处理,并封装成了具体的组件,通过封装的组件,后续拍照、试戴可以快速搭建完成,除了天猫自身业务特色的组件外,比较通用的有:
camera组件: 底层跨终端拍照组件,后续会移植到阿里HybirdAPI一部分
try组件: 上层的试戴组件,处理图片位置、合并、移动旋转等,可配置不同模板及参数快速支持其他类型试戴(如眼镜)
再设计跨终端有组件时,经验是优先面向mobile设计,这样逻辑及交互流程更加简洁,可以让API涉及更加清晰,后续正对PC适当兼容。
最后简单聊下这个业务:这是一个技术驱动业务的项目,从初期的业务重点在频道,中间经历几次业务调整,到目前把试戴作为业务后续的重点,可以说这个产品在其中起到了很多的作用,其中几点经验:
不仅自己看到价值,重要让合作伙伴也看到价值
在资源有限的情况下,作为技术人员去影响业务策略是不易的,认同事情的价值是关键一步
快速的产出demo,验证可行性及让合作伙伴了解成本及效果
有时不是业务看不到方向而是担心成本,这是技术的优势,但需要做出来看
后续试戴还有很多地方可以发力,比较重要的一些方向:
支持更多品类:项链、眼镜、耳环、手镯、手表等其他类目
可以考虑结合图像搜索做相关推荐
尝试使用图像识别,减少已有模板对比的成本,example
html5 vedio 简介
Capturing Audio & Video in HTML5
getUserMedia兼容性
tainted canvas
html5 video face detection
html5 肤色检测
From: https://github.com/tmallfe/tmallfe.github.io/issues/4
体验完产品,具体讲下技术实现方案,整体的实现过程可以分为:
拍照->获得图片数据->将商品与图片合成->生成效果图->用户保存图片
拍照
跨终端调取摄像头
这是试戴的关键一步,考虑到需要支持到各个终端,所以优先想到使用标准的web方案来实现:WebRTC-getUserMedia
基于getUserMedia,面向mobile 快速尝试,基本完成了主要的功能
但getUserMedia的支持情况并不理想,尤其是sarfari的不支持让广大ios/mac用户无法体验,这里就需要PC、mobile的兼容处理,以跨终端mobile first及优雅退化的思路设计兼容API:
在浏览器中如果无法支持,将采用flash方案补齐
在native中,优先采用native api 补齐
控制前后摄像头(web)
对于戒指的试戴,手机上我们期望优先调用后置摄像头,在web中启动时就需要设置优先后置摄像头,W3C文档还处于Draft阶段,相对还不是特别完善,可以通过如下设置:{ video:{ optional: [ { sourceId: $sourceId } ] } }
通过
MediaStreamTrack.getSources可获得设备的所有sourceId,注意:考虑设备可能没有外设如台式机或外设设备不可用(在虚拟机或远程),这种情况下会报错,所以需要try&catach容错。
控制拍照时图片尺寸(web)
不同的终端,摄像头拍摄的图片照片尺寸是不同的,如果我们只需要获得某一部分图像,就需要对图像做剪裁,在WEB中为了不引起用户疑惑,展现给用户拍照界面时,所见最好就是所需要的部分举个栗子:我们期望获得一个正方形的图片,但是rmbp中摄像原始是16:9的图像,考虑方案有:
考虑设置video的width/height 让图像自动充满video(参考官方文档并没有规定这部分实现,最新草案也无方向,这个方案走不通)
将video部分隐藏,知道目前图像的原始尺寸,然后垂直居中,方式如图:
需要注意的是:video API中有 videoHeight及videoWidth两个属性,当video play时理论这两个属性就是当前图像的宽高,但实际情况Mozilla存在一个bug#926753,play时仍无法准确获取,兼容的方案轮训监听:
Event.on(video,"play",function(){ if(this.videoHeight===0){ return S.later(arguments.callee,100,false,this); } // now width/height ok }
获取数据: 在传输大数据情况下的web与native通讯
在拍照完成native中需要把图片数据传递给web,另外用户保存图片到本地时,web又需要把合成好的图片数据传递给native让其保存,这边涉及native与web的传递大数据通讯:native -> web:
android:可通过
WebView#addJavascriptInterface()向web注入js方法 ,
ios:可通过
UIWebView#stringByEvaluatingJavaScriptFromString()执行js函数,两种方式向web传递大数据都没有问题
web -> native:
android:由于可以把native类暴露给web,js可以调用暴露的方法和native通讯,大数据也没问题;
ios:由于是采用UIWebViewDelegate方式,监控request方式通信,js通过自定义协议的URL用iframe请求,传输大量数据时便存在问题;解决这个问题方案:既然native可以和web顺畅通信,就可以通知native一个js 函数名,让native自己来取。
合成展现:定位戒指位置
比较简单,用图片说明: picWidth/maskWidth = x1/x = w1/w
生成图片:Canvas图片跨域
知道了具体位置,生成图片便可以简单的调用 canvas.toDataURL获得图片数据,但这里涉及一个图片跨域问题:
Canvas获取图片数据会有跨域的限制,之前有:imageProxy flash来做代理的方案,但是这个方案仍然不够高效和简洁,尤其是对于mobile更无能为力
最好的方案是web标准的CORS,通过让服务器返回allow-origin的header,让canvas可以正常处理:
// http response header: Access-Control-Allow-Origin: * img.crossOrigin = "Anonymous"; img.onload = function() { ctx.drawImage( img, 0, 0 ); canvas.toDataURL("image/png"); }
组件化&Mobile First
在整个开发的过程中是以组件化的思路分层处理,并封装成了具体的组件,通过封装的组件,后续拍照、试戴可以快速搭建完成,除了天猫自身业务特色的组件外,比较通用的有:camera组件: 底层跨终端拍照组件,后续会移植到阿里HybirdAPI一部分
try组件: 上层的试戴组件,处理图片位置、合并、移动旋转等,可配置不同模板及参数快速支持其他类型试戴(如眼镜)
再设计跨终端有组件时,经验是优先面向mobile设计,这样逻辑及交互流程更加简洁,可以让API涉及更加清晰,后续正对PC适当兼容。
聊业务
最后简单聊下这个业务:这是一个技术驱动业务的项目,从初期的业务重点在频道,中间经历几次业务调整,到目前把试戴作为业务后续的重点,可以说这个产品在其中起到了很多的作用,其中几点经验:不仅自己看到价值,重要让合作伙伴也看到价值
在资源有限的情况下,作为技术人员去影响业务策略是不易的,认同事情的价值是关键一步
快速的产出demo,验证可行性及让合作伙伴了解成本及效果
有时不是业务看不到方向而是担心成本,这是技术的优势,但需要做出来看
后续
后续试戴还有很多地方可以发力,比较重要的一些方向:支持更多品类:项链、眼镜、耳环、手镯、手表等其他类目
可以考虑结合图像搜索做相关推荐
尝试使用图像识别,减少已有模板对比的成本,example
附
html5 vedio 简介Capturing Audio & Video in HTML5
getUserMedia兼容性
tainted canvas
html5 video face detection
html5 肤色检测
From: https://github.com/tmallfe/tmallfe.github.io/issues/4
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- 原生js结合html5制作小飞龙的简易跳球
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- HTML5实现微信拍摄上传照片功能
- 2014 HTML5/CSS3热门动画特效TOP10
- HTML5使用DeviceOrientation实现摇一摇功能
- spring+html5实现安全传输随机数字密码键盘
- html5在android中的使用问题及技巧解读
- 非html5实现js版弹球游戏示例代码
- html5 canvas js(数字时钟)实例代码
- js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
- Jquery结合HTML5实现文件上传
- 使用js检测浏览器是否支持html5中的video标签的方法
- 如何使用HTML5地理位置定位功能
- 通过javascript把图片转化为字符画
- 使用PHP和HTML5 FormData实现无刷新文件上传教程
- 解决node-webkit 不支持html5播放mp4视频的方法