拿下奇怪的前端报错(六):多摄手机webrtc拉取视频流会导致应用崩溃,从而无法进行人像扫描

本文涉及的产品
视觉智能开放平台,图像通用资源包5000点
视觉智能开放平台,分割抠图1万点
视觉智能开放平台,视频通用资源包5000点
简介: 本文介绍了一种解决手机摄像头切换导致应用崩溃的问题的方法。针对不支持facingMode配置的四摄手机,通过缓存和序号切换的方式,确保应用在特定设备上不会频繁崩溃,提升用户体验。

现在有些手机更新的很激进,但是却没有很好的实现web规范,不支持facingMode配置来控制前后摄像头,只能根据序号切换,但拉取到某些设备的流会导致应用崩溃,这里就教一招如何尽可能的改善用户体验 - 毕竟如何一直崩溃的话,人像识别+文字扫描功能就不可用,比较有特色的功能就用不到了

至少不至于次次都崩溃,最多崩溃三次后就不崩了(╮(╯▽╰)╭)

1 问题上下文

  • 四摄手机:UA携带ELS-AN00标识
  • 混合应用:基于webview开发
  • 不支持facingMode切换前后摄像头
  • 支持的话就不要用这种方法了,如果做的是面向大众用户,需要多测试不同型号

2. 问题描述 - 非主摄拉流则崩溃

因为不支持facingMode配置来控制前后摄像头,所以只能采用枚举设备id,切换序号的方式来实现相机切换,但一旦拉流时选择的id是非主摄(后摄的子镜头),则会导致应用崩溃退出

3. 解决过程

这个问题比较棘手,触发崩溃需要重启而且导致切换相机功能不可用。崩溃也是比较严重的问题,而且切换必会触发崩溃,又由于是设备不支持对应api,于是只能想出一个临时的解决办法

优选一对index,经测试是 序号 0,4的摄像头--但有测试出某多摄并非这两个序号,只能是最大程度保证体验:不让应用在会导致崩溃的相机上崩溃2次

3.1 方案设计

本地缓存两个数组:可用indexs、失败indexs,每次拉流前标记选择的index,拉流成功删除这个标记并加入到可用列表,开机时检测有无这个标记,有的话加入失败列表。

3.2 初始化UA匹配

需要使用设备调试找出UA的关键字,并测试出不会崩溃的序号作为备选项

const fallbackMap = new Map<string, number[]>();
// 加入需要执行回退方案的map
fallbackMap.set("ELS-AN00", [0, 4]);
let preferFallback = false;
let preferIndexs = [0, 4];
{
  const ua = navigator.userAgent;
  for (const key of fallbackMap.keys()) {
    if (ua.includes(key)) {
      preferFallback = true;
      preferIndexs = fallbackMap.get(key)!;
      console.info(`hite ${key}`);
      break;
    }
  }
}
// 如果ua匹配上,查看是否有需要标记失败的
if (shouldCameraFallback()) {
  markDeviceIdTested();
}

image.gif

3.3 更新测试完的设备标记

  • 场景一,应用启动时,curId为空,通过读取缓存是否存在正在检测的id,如果有则表明这个index的摄像头导致了崩溃(当然还有一种情况,就是用户拉流过程手动退出应用了)
  • 场景二,拉流成功,调用这个方法标记成功的设备id
export const markDeviceIdTested = async (curId?: string) => {
  const vlist = await getVideoDevices();
  if (!vlist) {
    return;
  }
  const checkingDevice = localStorage.getItem("capture_checking_device");
  const sucList = getSavedList(
    "capture_success_list",
    preferIndexs
  ) as number[];
  const cidx = vlist.findIndex((v) => v.deviceId === curId);
  if (
    (checkingDevice && checkingDevice === curId) ||
    (!checkingDevice && curId)
  ) {
    if (!sucList.includes(cidx)) {
      sucList.push(cidx);
      localStorage.setItem("capture_success_list", JSON.stringify(sucList));
    }
    localStorage.removeItem("capture_checking_device");
    return;
  }
  if (!checkingDevice) {
    return;
  }
  const failList = getSavedList("capture_fail_list", []) as number[];
  failList.push(cidx);
  localStorage.setItem("capture_fail_list", JSON.stringify(failList));
};

image.gif

3.4 一些辅助方法

// 检查是否需要兼容模式 - 不然可用facingMode控制相机切换
export const shouldCameraFallback = () => {
  return !!localStorage.getItem("camera_fallback_used") || preferFallback;
}
// 根据限制获取设备id
export const getDeviceId = (v?: ConstrainDOMString): string | undefined => {
  return Array.isArray(v)
    ? v[0]
    : typeof v === "object"
    ? getDeviceId(v.exact)
    : v;
}
// 拉流前标记正在检测的设备id
export const markDeviceIdTest = (deviceId: string) => {
  localStorage.setItem("capture_checking_device", deviceId);
}
// 从localstorage读取列表数据
function getSavedList (key: string, def: any) {
  const str = localStorage.getItem(key);
  try {
    const e = JSON.parse(str || "");
    return e || def;
  } catch (error) {
    return def;
  }
}
// 获取摄像头列表
async function getVideoDevices ()  {
  // **************下面的内容需要自己调整,设备枚举前要先获取权限不然获取不到设备列表
  await permission.checkVideoPermission();
  const list = await navigator.mediaDevices.enumerateDevices();
  return list.filter((e) => e.kind === "videoinput").sort();
}

image.gif

3.5 获取下一个设备id - 切换相机的实现

export const getNextDeviceId = async (curId: string) => {
  // ***** 需要自己调整下面的相机权限获取方法
  await permission.checkVideoPermission();
  const list = await navigator.mediaDevices.enumerateDevices();
  const vlist = list.filter((e) => e.kind === "videoinput");
  let sucList = getSavedList("capture_success_list", preferIndexs) as number[];
  let cidx = vlist.findIndex((v) => v.deviceId === curId);
  if (cidx === -1) {
    cidx = 0;
    localStorage.setItem("capture_success_list", JSON.stringify(preferIndexs));
    sucList = preferIndexs;
  }
  if (sucList.includes(cidx)) {
    // 如果成功列表有两个摄像头了,就用这俩,就不会发生崩溃啦!!
    if (sucList.length > 1) {
      const lidx = sucList.indexOf(cidx);
      const nSucIdx = lidx === sucList.length - 1 ? 0 : lidx + 1;
      const nIdx = sucList[nSucIdx];
      const dev = vlist[nIdx];
      console.log(`use sucList ${nSucIdx} - realIndex ${nIdx} `);
      return dev.deviceId;
    }
  }
  const failList = getSavedList("capture_fail_list", []) as number[];
  // 检查下一个可用idx
  const ne = vlist.find(
    (e, idx) => !failList.includes(idx) && e.deviceId !== curId
  );
  return ne?.deviceId;
};

image.gif

4 使用示例

4.1 切换相机参数更新

核心就是兼容模式则使用deviceId,否则使用facingMode

const updateSwitchParams = async () => {
  if (!shouldCameraFallback()) {
    facingMode = facingMode === "user" ? "environment" : "user";
    return;
  }
  await markDeviceIdTested(deviceId);
  deviceId = (await getNextDeviceId(deviceId)) || "";
  if (!deviceId) {
    d.canSwitch = false;
  }
};

image.gif

4.2 抽离拉流配置方法

兼容模式时用deviceId控制拉流的摄像头,其它则使用facingMode

const getMediaConfig = () => {
  const video = {
    width: { min: 640, ideal: 1280 },
    height: { min: 480, ideal: 720 },
  } as any;
  const audio = mode === 2;
  if (shouldCameraFallback()) {
    if (deviceId) {
      video.deviceId = deviceId;
    }
    markDeviceIdTest(deviceId);
    return {
      video,
      audio,
    };
  }
  if (facingMode) {
    video.facingMode = facingMode;
  }
  if (deviceId && deviceIdFaceMode === facingMode) {
    video.deviceId = deviceId;
  }
  return {
    video,
    audio,
  };
}

image.gif

4.3 拉流

就是简单的使用getUserMedia,不过参数是动态获取的,当使用特定设备时会使用回退设置。切换摄像头,只需要调用updateSwitchParams 即可

const config = getMediaConfig();
  console.log("camera", config);
return navigator.mediaDevices
    .getUserMedia(config)

image.gif

5 小结

本文介绍的是一个很特殊的场景的一个解决办法,因为现在有些手机挺激进的,三摄像头四摄像头,但是却没有很好的实现web规范,导致会出一些问题,若是都根据规范来实现接口,我们的工作会轻松挺多!


相关文章
|
2月前
|
前端开发 搜索推荐 JavaScript
如何通过DIY.JS快速构建出一个DIY手机壳、T恤的应用?
DIY.JS 是一款基于原生 Canvas 的业务级图形库,专注于商品定制的图形交互功能,帮助开发者轻松实现个性化设计。适用于 T 恤、手机壳等多种商品场景。它自带丰富功能,无需从零构建,快速集成到项目中。通过创建舞台、添加模型、定义 DIY 区域和添加素材四个步骤即可完成基础用法。支持在线演示体验,文档详细,易上手。
125 57
|
4月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
270 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
5月前
|
人工智能 算法 前端开发
OmAgent:轻松构建在终端设备上运行的 AI 应用,赋能手机、穿戴设备、摄像头等多种设备
OmAgent 是 Om AI 与浙江大学联合开源的多模态语言代理框架,支持多设备连接、高效模型集成,助力开发者快速构建复杂的多模态代理应用。
503 72
OmAgent:轻松构建在终端设备上运行的 AI 应用,赋能手机、穿戴设备、摄像头等多种设备
|
3月前
|
人工智能 前端开发 JavaScript
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
AI程序员:通义灵码 2.0应用VScode前端开发深度体验,在软件开发领域,人工智能技术的融入正深刻改变着程序员的工作方式。通义灵码 2.0 作为一款先进的 AI 编程助手,与广受欢迎的代码编辑器 Visual Studio Code(VScode)相结合,为前端开发带来了全新的可能性。本文将详细分享通义灵码 2.0 在 VScode 前端开发环境中的深度使用体验。
401 2
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
|
4月前
|
机器学习/深度学习 存储 人工智能
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
MNN-LLM App 是阿里巴巴基于 MNN-LLM 框架开发的 Android 应用,支持多模态交互、多种主流模型选择、离线运行及性能优化。
3175 21
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
|
4月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
292 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
4月前
|
人工智能 前端开发 JavaScript
详解智能编码在前端研发的创新应用
接下来,人与智能体的交互将变得更为紧密,比如 N 年以后是否可以逐渐过渡。这个逐渐过渡的过程实际上是温和的,从依赖人类到依赖超大规模算力的转变,可能会取代我们的一些职责。这不仅仅是简单的叠加关系。对于AI和超大规模算力,这是否意味着我们可以大幅度提升软件质量,是否可以缩短研发周期并提高效率,还有创造出更优质的软件并持续发展,这无疑是肯定的。
252 25
|
4月前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
106 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
4月前
|
存储 NoSQL 前端开发
美团面试:手机扫描PC二维码登录,底层原理和完整流程是什么?
45岁老架构师尼恩详细梳理了手机扫码登录的完整流程,帮助大家在面试中脱颖而出。该过程分为三个阶段:待扫描阶段、已扫描待确认阶段和已确认阶段。更多技术圣经系列PDF及详细内容,请关注【技术自由圈】获取。
|
4月前
|
人工智能 前端开发 JavaScript
智能编码在前端研发的创新应用
在前端开发领域,智能编码技术正引领一场变革,通过大模型的强大能力将自然语言需求直接转化为高效、可靠的代码实现。
206 10

热门文章

最新文章