Open guirong opened 10 years ago
请先扫码体验(天猫app体验最佳):
体验完产品,具体讲下技术实现方案,整体的实现过程可以分为:
拍照->获得图片数据->将商品与图片合成->生成效果图->用户保存图片
这是试戴的关键一步,考虑到需要支持到各个终端,所以优先想到使用标准的web方案来实现:WebRTC-getUserMedia
getUserMedia
基于getUserMedia,面向mobile 快速尝试,基本完成了主要的功能
但getUserMedia的支持情况并不理想,尤其是sarfari的不支持让广大ios/mac用户无法体验,这里就需要PC、mobile的兼容处理,以跨终端mobile first及优雅退化的思路设计兼容API:
对于戒指的试戴,手机上我们期望优先调用后置摄像头,在web中启动时就需要设置优先后置摄像头,W3C文档还处于Draft阶段,相对还不是特别完善,可以通过如下设置:
{ video:{ optional: [ { sourceId: $sourceId } ] } }
通过MediaStreamTrack.getSources可获得设备的所有sourceId,注意:考虑设备可能没有外设如台式机或外设设备不可用(在虚拟机或远程),这种情况下会报错,所以需要try&catach容错。
MediaStreamTrack.getSources
不同的终端,摄像头拍摄的图片照片尺寸是不同的,如果我们只需要获得某一部分图像,就需要对图像做剪裁,在WEB中为了不引起用户疑惑,展现给用户拍照界面时,所见最好就是所需要的部分
举个栗子:我们期望获得一个正方形的图片,但是rmbp中摄像原始是16:9的图像,考虑方案有:
需要注意的是: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 }
在拍照完成native中需要把图片数据传递给web,另外用户保存图片到本地时,web又需要把合成好的图片数据传递给native让其保存,这边涉及native与web的传递大数据通讯:
WebView#addJavascriptInterface()
UIWebView#stringByEvaluatingJavaScriptFromString()
比较简单,用图片说明: picWidth/maskWidth = x1/x = w1/w
picWidth/maskWidth = x1/x = w1/w
知道了具体位置,生成图片便可以简单的调用 canvas.toDataURL获得图片数据,但这里涉及一个图片跨域问题: Canvas获取图片数据会有跨域的限制,之前有:imageProxy flash来做代理的方案,但是这个方案仍然不够高效和简洁,尤其是对于mobile更无能为力
canvas.toDataURL
最好的方案是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设计,这样逻辑及交互流程更加简洁,可以让API涉及更加清晰,后续正对PC适当兼容。
最后简单聊下这个业务:这是一个技术驱动业务的项目,从初期的业务重点在频道,中间经历几次业务调整,到目前把试戴作为业务后续的重点,可以说这个产品在其中起到了很多的作用,其中几点经验:
后续试戴还有很多地方可以发力,比较重要的一些方向:
cool~
very cool
好酷的功能~, ps: catch拼写错误了, 写成catach了
真炫酷
造福人类
cool! (html5 vedio 简介---vedio写错了,应该是video)
cool
扫了一下 貌似下线了?
orz
请先扫码体验(天猫app体验最佳):
体验完产品,具体讲下技术实现方案,整体的实现过程可以分为:
拍照->获得图片数据->将商品与图片合成->生成效果图->用户保存图片
拍照
跨终端调取摄像头
这是试戴的关键一步,考虑到需要支持到各个终端,所以优先想到使用标准的web方案来实现:WebRTC-
getUserMedia
基于getUserMedia,面向mobile 快速尝试,基本完成了主要的功能
但getUserMedia的支持情况并不理想,尤其是sarfari的不支持让广大ios/mac用户无法体验,这里就需要PC、mobile的兼容处理,以跨终端mobile first及优雅退化的思路设计兼容API:
控制前后摄像头(web)
对于戒指的试戴,手机上我们期望优先调用后置摄像头,在web中启动时就需要设置优先后置摄像头,W3C文档还处于Draft阶段,相对还不是特别完善,可以通过如下设置:
通过
MediaStreamTrack.getSources
可获得设备的所有sourceId,注意:考虑设备可能没有外设如台式机或外设设备不可用(在虚拟机或远程),这种情况下会报错,所以需要try&catach容错。控制拍照时图片尺寸(web)
不同的终端,摄像头拍摄的图片照片尺寸是不同的,如果我们只需要获得某一部分图像,就需要对图像做剪裁,在WEB中为了不引起用户疑惑,展现给用户拍照界面时,所见最好就是所需要的部分
举个栗子:我们期望获得一个正方形的图片,但是rmbp中摄像原始是16:9的图像,考虑方案有:
需要注意的是:video API中有 videoHeight及videoWidth两个属性,当video play时理论这两个属性就是当前图像的宽高,但实际情况Mozilla存在一个bug#926753,play时仍无法准确获取,兼容的方案轮训监听:
获取数据: 在传输大数据情况下的web与native通讯
在拍照完成native中需要把图片数据传递给web,另外用户保存图片到本地时,web又需要把合成好的图片数据传递给native让其保存,这边涉及native与web的传递大数据通讯:
WebView#addJavascriptInterface()
向web注入js方法 ,UIWebView#stringByEvaluatingJavaScriptFromString()
执行js函数,两种方式向web传递大数据都没有问题合成展现:定位戒指位置
比较简单,用图片说明:
picWidth/maskWidth = x1/x = w1/w
生成图片:Canvas图片跨域
知道了具体位置,生成图片便可以简单的调用
canvas.toDataURL
获得图片数据,但这里涉及一个图片跨域问题: Canvas获取图片数据会有跨域的限制,之前有:imageProxy flash来做代理的方案,但是这个方案仍然不够高效和简洁,尤其是对于mobile更无能为力最好的方案是web标准的CORS,通过让服务器返回allow-origin的header,让canvas可以正常处理:
组件化&Mobile First
在整个开发的过程中是以组件化的思路分层处理,并封装成了具体的组件,通过封装的组件,后续拍照、试戴可以快速搭建完成,除了天猫自身业务特色的组件外,比较通用的有:
再设计跨终端有组件时,经验是优先面向mobile设计,这样逻辑及交互流程更加简洁,可以让API涉及更加清晰,后续正对PC适当兼容。
聊业务
最后简单聊下这个业务:这是一个技术驱动业务的项目,从初期的业务重点在频道,中间经历几次业务调整,到目前把试戴作为业务后续的重点,可以说这个产品在其中起到了很多的作用,其中几点经验:
后续
后续试戴还有很多地方可以发力,比较重要的一些方向:
附