uniapp HTML + WebRTC 摄像头 在 Oppo Find X8s+后置摄像头，拍照被强制放大

Question

uniapp HTML + WebRTC 摄像头 ，打包成APP
在oppo 部分手机型号上：例如 oppo Find X8s+。拍照的时候后置摄像头，在同样的距离下，拍照画面被强制放大，只能离拍照目标远一点才是正常大小。相同的代码在其他手机上是正常显示。
有没有哪位解决过这个问题？

问的AI回答如下：

使用uni-app + live-pusher重新写了一套，但是拍照清晰度没有 WebRTC 摄像头高。
代码太长了，放不上来

Answer 1

下午好🌅🌅🌅
本答案参考通义千问

你提到的问题是 在部分 OPPO 手机（如 Find X8s+）上使用 uni-app + WebRTC 摄像头时，拍照画面被强制放大，而其他手机则正常。这是一个非常典型的 设备兼容性问题，涉及到 WebRTC 的摄像头 API、OPPO 系统的特定行为以及 uni-app 的封装机制。

---

一、问题分析

1. OPPO Find X8s+ 的摄像头特性

• 部分 OPPO 手机（尤其是中高端机型）对摄像头的控制较为严格，可能默认启用 变焦模式 或 自动缩放。
• 即使你通过 JavaScript 设置了摄像头的 zoom 属性为 1，某些系统仍会强制调整摄像头的缩放比例。

2. WebRTC 和 uni-app 的限制

• 在 uni-app 中使用 WebRTC 拍照或录像，本质上是调用原生能力，但部分功能（如摄像头参数控制）受系统限制。
• OPPO 可能对其摄像头驱动进行了定制，导致 WebRTC 行为与标准浏览器不一致。

3. 代码层面的潜在问题

• 如果你没有显式地设置摄像头的 zoom、focus、exposure 等属性，系统可能会根据环境自动调节。
• 有些手机（如 OPPO）默认开启 AI 模式，可能会导致画面变形或放大。

---

二、解决方案（详细步骤）

✅ 1. 显式设置摄像头参数（Zoom、Focus）

const stream = await navigator.mediaDevices.getUserMedia({
    video: {
        width: { ideal: 1280 },
        height: { ideal: 720 },
        zoom: 1, // 尝试手动设置 zoom 为 1
        focus: 1, // 设置焦点
    }
});

注意： 不同平台对 zoom 支持程度不同，部分系统可能无法直接控制，建议配合 getUserMedia 的 advanced 参数进行更精细控制。

---

✅ 2. 使用 navigator.mediaDevices.enumerateDevices() 获取摄像头信息

navigator.mediaDevices.enumerateDevices()
    .then(devices => {
        const videoDevices = devices.filter(device => device.kind === 'videoinput');
        console.log('Available cameras:', videoDevices);
    });

这可以帮助你判断是否选择了正确的后置摄像头，并避免误用前置摄像头。

---

✅ 3. 尝试使用 live-pusher 替代 WebRTC（如果可行）

虽然你说“拍照清晰度不如 WebRTC”，但如果你只是需要拍摄照片，可以尝试使用 live-pusher 实现类似效果：

<template>
  <view>
    <live-pusher :url="streamUrl" @error="onError" @start="onStart" />
    <button @click="takePhoto">拍照</button>
  </view>
</template>

优点：

• 更好地适配 OPPO 等安卓设备
• 与 uni-app 生态兼容性更好

缺点：

• 相比 WebRTC，拍照清晰度和实时性略差

---

✅ 4. 修改 manifest.json 添加权限和配置

确保你的项目中添加了必要的权限：

{
  "plus": {
    "distribute": {
      "android": {
        "permissions": [
          "android.permission.CAMERA",
          "android.permission.RECORD_AUDIO"
        ]
      }
    }
  }
}

---

✅ 5. 使用 camera 组件替代 WebRTC（如果适用）

如果你只是需要拍照功能，可以考虑使用 uni-app 自带的 <camera> 组件，而不是 WebRTC：

<template>
  <view>
    <camera style="width: 100%; height: 300px;" @error="onCameraError" @ready="onCameraReady"></camera>
    <button @click="takePhoto">拍照</button>
  </view>
</template>

优点：

• 更加稳定，兼容性更强
• 无需处理 WebRTC 复杂逻辑

---

三、总结（重点）

| 问题 | 解决方案 | |------|----------| | OPPO Find X8s+ 摄像头被强制放大 | 显式设置 zoom: 1，并检查摄像头参数 | | WebRTC 在 OPPO 上不稳定 | 尝试使用 live-pusher 或 camera 组件替代 | | 拍照清晰度下降 | 优先使用 camera 组件，或优化 WebRTC 参数 |

---

四、推荐方案（按优先级排序）

1. 使用 camera 组件（最稳定）
2. 使用 live-pusher + 原生相机 API（兼容性较好）
3. 优化 WebRTC 参数（如 zoom: 1、focus: 1）（需调试）

---

如果你愿意提供部分代码片段（如摄像头初始化部分），我可以帮你进一步分析并给出具体修改建议。