体验完产品，具体讲下技术实现方案，整体的实现过程可以分为：
拍照->获得图片数据->将商品与图片合成->生成效果图->用户保存图片
拍照
跨终端调取摄像头
这是试戴的关键一步，考虑到需要支持到各个终端，所以优先想到使用标准的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传递大数据都没有问题
- android：可通过
- 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
附