體驗完產品，具體講下技術實現方案，整體的實現過程可以分為：
拍照->獲得資料->將商品與合成->生成效果圖->使用者儲存
拍照跨終端調取攝像頭
這是試戴的關鍵一步，考慮到需要支援到各個終端，所以優先想到使用標準的web方案來實現：webrtc-getusermedia
基於getusermedia，面向mobile 快速嘗試，基本完成了主要的功能
但getusermedia的支援情況並不理想，尤其是sa***ri的不支援讓廣大ios/mac使用者無法體驗，這裡就需要pc、mobile的相容處理，以跨終端mobile first及優雅退化的思路設計相容api：
在瀏覽器中如果無法支援，將採用flash方案補齊
在native中，優先採用native api 補齊
控制前後攝像頭（web）
對於戒指的試戴，手機上我們期望優先呼叫後置攝像頭，在web中啟動時就需要設定優先後置攝像頭，w3c文件還處於draft階段，相對還不是特別完善，可以通過如下設定：
1
2
3
4
5
6
7
8
9
]
}
}
通過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時仍無法準確獲取，相容的方案輪訓監聽：
1
2
3
4
5
6
event.on(video,"play",function()
// now width/height ok
}
獲取資料： 在傳輸大資料情況下的web與native通訊
在拍照完成native中需要把資料傳遞給web，另外使用者儲存到本地時，web又需要把合成好的資料傳遞給native讓其儲存，這邊涉及native與web的傳遞大資料通訊：
合成展現：定位戒指位置
比較簡單，用說明:picwidth/maskwidth = x1/x = w1/w
生成：canvas跨域
知道了具體位置，生成便可以簡單的呼叫canvas.todataurl獲得資料，但這裡涉及乙個跨域問題：
canvas獲取資料會有跨域的限制，之前有：imageproxy flash來做**的方案，但是這個方案仍然不夠高效和簡潔，尤其是對於mobile更無能為力
最好的方案是web標準的cors，通過讓伺服器返回allow-origin的header，讓canvas可以正常處理：
元件化&mobile first
在整個開發的過程中是以元件化的思路分層處理，並封裝成了具體的元件，通過封裝的元件，後續拍照、試戴可以快速搭建完成，除了天貓自身業務特色的元件外，比較通用的有：
camera元件: 底層跨終端拍照元件，後續會移植到阿里hybirdapi一部分
try元件: 上層的試戴元件，處理位置、合併、移動旋轉等，可配置不同模板及引數快速支援其他型別試戴（如眼鏡）
再設計跨終端有元件時，經驗是優先面向mobile設計，這樣邏輯及互動流程更加簡潔，可以讓api涉及更加清晰，後續正對pc適當相容。
聊業務
最後簡單聊下這個業務：這是乙個技術驅動業務的專案，從初期的業務重點在頻道，中間經歷幾次業務調整，到目前把試戴作為業務後續的重點，可以說這個產品在其中起到了很多的作用，其中幾點經驗：
不僅自己看到價值，重要讓合作夥伴也看到價值
快速的產出demo，驗證可行性及讓合作夥伴了解成本及效果
後續後續試戴還有很多地方可以發力，比較重要的一些方向：
支援更多品類：項鍊、眼鏡、耳環、手鐲、手錶等其他類目
嘗試使用影象識別，減少已有模板對比的成本，example附
html5 vedio 簡介
capturing audio & video in html5
getusermedia相容性
tainted canvas
html5 video face detection
跨域的解決方案
出於瀏覽器的同源策略的限制。同源策略就是一種約定，它是瀏覽器最核心最安全的功能，如果沒有它，瀏覽器的正常功能都會受到影響，也就是說web的構建在同源策略之上的，瀏覽器只是針對它的一種實現。就是當乙個請求的協議 網域名稱 埠三者之間有任何乙個不同就是跨域 jsonp jsonp是指json paddi...
跨域的幾種解決方案
這個可能是好多人想到的第一解決方案了但是其實這個也有侷限性 具體實現 伺服器端 echo handler json encode array a b 簡單輸出handler 客戶端 一 動態載入script標籤方式 function setscript setscript 動態載入script 處理...
angular 跨域的解決方案
在angular的工程目錄，和angular.json同級的目錄下面的新建proxy.config.json檔案，內容如下 說明 當我們訪問http localhost 4200 api的時候，其實就相等於訪問的位址 配置angular.json檔案，在物件key等於serve中的options下增...