【转】跨终端实践-天猫试戴的解决方案

最新推荐文章于 2025-03-09 18:42:41 发布

原创最新推荐文章于 2025-03-09 18:42:41 发布 · 658 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种跨终端拍照技术实现方案，包括WebRTC-getUserMedia的使用及其兼容处理，以及如何在Web环境中控制摄像头和图片尺寸。此外，还讨论了图片合成和跨域问题的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文 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 补齐

camera

控制前后摄像头（web）

对于戒指的试戴，手机上我们期望优先调用后置摄像头，在 web 中启动时就需要设置优先后置摄像头，W3C 文档还处于 Draft 阶段，相对还不是特别完善，可以通过如下设置：

{
    video:{
        optional: [
            {
                sourceId: $sourceId
            }
        ]
    }
}

通过 MediaStreamTrack.getSources 可获得设备的所有 sourceId，注意：考虑设备可能没有外设如台式机或外设设备不可用(在虚拟机或远程)，这种情况下会报错，所以需要 try&catach 容错。

控制拍照时图片尺寸(web)

不同的终端，摄像头拍摄的图片照片尺寸是不同的，如果我们只需要获得某一部分图像，就需要对图像做剪裁，在 WEB 中为了不引起用户疑惑，展现给用户拍照界面时，所见最好就是所需要的部分

举个栗子：我们期望获得一个正方形的图片，但是 rmbp 中摄像原始是 16：9 的图像，考虑方案有：

考虑设置 video 的 width/height 让图像自动充满 video（参考官方文档并没有规定这部分实现，最新草案也无方向，这个方案走不通）
将 video 部分隐藏，知道目前图像的原始尺寸，然后垂直居中，方式如图：

img-size

需要注意的是：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：
1. android：可通过 WebView#addJavascriptInterface() 向 web 注入 js 方法
2. ios：可通过 UIWebView#stringByEvaluatingJavaScriptFromString() 执行 js 函数，两种方式向 web 传递大数据都没有问题
web -> native：
1. android：由于可以把 native 类暴露给 web，js 可以调用暴露的方法和 native 通讯，大数据也没问题；
2. ios：由于是采用 UIWebViewDelegate 方式，监控 request 方式通信，js 通过自定义协议的 URL 用 iframe 请求，传输大量数据时便存在问题；解决这个问题方案：既然 native 可以和 web 顺畅通信，就可以通知 native 一个 js 函数名，让 native 自己来取。

getdata

合成展现：定位戒指位置

比较简单，用图片说明: picWidth/maskWidth = x1/x = w1/w

picshow

生成图片：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");
}