iPhone二次扫码触发DeskView并报RealtimeMediaSource错误求助

问题原因分析 #

报错RealtimeMediaSource::selectSettings failed constraint 10本质是WebRTC尝试初始化相机时无法获取本地相机资源，通常是因为首次扫码后相机轨道未彻底释放，导致iOS系统 fallback到Continuity Camera（桌面视图）。

具体解决方案 #

1. 强制释放相机媒体轨道资源 #

在关闭扫码组件/离开页面时，不仅调用插件的停止方法，还要手动关闭所有WebRTC媒体轨道，避免资源泄漏：

<script setup>
import { ref, onUnmounted } from 'vue'
const qrReader = ref(null)

// 停止扫描并释放资源
const stopScanner = async () => {
  if (qrReader.value) {
    await qrReader.value.stop()
    // 关闭所有媒体轨道
    const tracks = qrReader.value.$el.srcObject?.getTracks() || []
    tracks.forEach(track => track.stop())
    qrReader.value.$el.srcObject = null
  }
}

// 组件销毁时执行
onUnmounted(() => {
  stopScanner()
})
</script>

<template>
  <qrcode-reader ref="qrReader" />
</template>

2. 配置Capacitor强制使用本地相机 #

在capacitor.config.ts中添加iOS相机源限制，避免系统切换到Continuity Camera：

import { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'your.app.id',
  appName: 'YourApp',
  webDir: 'dist',
  ios: {
    cameraPermissions: '允许$(PRODUCT_NAME)访问您的相机',
    camera: {
      source: 'camera' // 强制使用设备本地相机
    }
  }
}

export default config

3. 禁用Quasar页面缓存（若启用） #

如果扫码页面使用了Quasar的keep-alive缓存，组件不会被销毁，相机资源会持续占用。需禁用缓存或在页面激活/失活时处理资源：

<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // 页面激活时启动扫码
  qrReader.value?.start()
})

onDeactivated(() => {
  // 页面失活时释放资源
  stopScanner()
})
</script>

<template>
  <!-- 确保页面不被缓存 -->
  <router-view v-if="$route.name !== 'ScanPage'" />
  <ScanPage v-else />
</template>

4. 指定摄像头设备ID（强制使用后置摄像头） #

通过枚举设备获取后置摄像头ID，强制扫码组件使用该设备，避免系统自动切换：

<script setup>
import { ref, onMounted } from 'vue'
const qrReader = ref(null)
const cameraConstraints = ref({})

onMounted(async () => {
  // 获取所有媒体设备
  const devices = await navigator.mediaDevices.enumerateDevices()
  // 筛选后置摄像头
  const rearCamera = devices.find(device => 
    device.kind === 'videoinput' && device.label.includes('后置')
  )
  if (rearCamera) {
    cameraConstraints.value = {
      video: {
        facingMode: 'environment',
        deviceId: { exact: rearCamera.deviceId }
      }
    }
  }
})
</script>

<template>
  <qrcode-reader 
    ref="qrReader"
    :constraints="cameraConstraints"
  />
</template>

内容的提问来源于stack exchange，提问作者jkc