uni-app 编译成APP后 web-view或renderjs使用webrtc的navigator.mediaDevices.getUserMedia 每次都会咨询摄像头权限

uni-app 编译成APP后 web-view或renderjs使用webrtc的navigator.mediaDevices.getUserMedia 每次都会咨询摄像头权限

项目 信息
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 13.6.7 (22G720)
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 iOS
手机系统版本号 iOS 17
手机厂商 苹果
手机机型 iphone12mini
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>  
    <view id="box" class="">  
    </view>  
</template>  
<script module="test" lang="renderjs">  
    export default {  
        async mounted() {  
            const myStream = await navigator.mediaDevices.getUserMedia({  
                audio: false,  
                video: {  
                    width: { ideal: 1920 },  
                    height: { ideal: 960 },  
                    facingMode: 'environment', //user/environment  
                    frameRate: { ideal: 60 } //刷新率  
                }  
            })  
        },  
    }  
</script>

操作步骤：

  • 编译到app真机

预期结果：

  • 第一次咨询是否给予摄像头权限

实际结果：

  • 每一次都会咨询是否给予摄像头权限

bug描述：

  • 编译成APP后，web-view或者renderjs使用webrtc的navigator.mediaDevices.getUserMedia，每次都会咨询摄像头权限

更多关于uni-app 编译成APP后 web-view或renderjs使用webrtc的navigator.mediaDevices.getUserMedia 每次都会咨询摄像头权限的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

遇到了相同的问题，请问您解决了么？

更多关于uni-app 编译成APP后 web-view或renderjs使用webrtc的navigator.mediaDevices.getUserMedia 每次都会咨询摄像头权限的实战教程也可以访问 https://www.itying.com/category-93-b0.html


没有解决，@官方人员，没人来

我可以解决，+Q1343066628

在 uni-app 中使用 web-view 或 renderjs 来集成 WebRTC 并访问摄像头时，确实会遇到每次都需要请求摄像头权限的问题。这通常是由于权限请求的逻辑或页面生命周期管理不当导致的。以下是一个使用 renderjs 在 uni-app 中管理 WebRTC 权限请求的代码示例，以减少不必要的权限请求次数。

使用 renderjs 集成 WebRTC

首先，确保你的 uni-app 项目已经配置好 renderjs 环境。然后，在需要访问摄像头的页面中，可以按照以下步骤操作：

  1. 在页面中引入 renderjs 脚本：
<template>
  <view>
    <button @click="startCamera">Start Camera</button>
    <view id="videoContainer"></view>
  </view>
</template>

<script>
export default {
  mounted() {
    this.$mp.page.renderJs({
      data: {
        videoElement: null
      },
      methods: {
        initVideo() {
          this.videoElement = document.getElementById('videoContainer').appendChild(document.createElement('video'));
          this.videoElement.autoplay = true;
        },
        async startCamera() {
          if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
            console.error('WebRTC not supported');
            return;
          }

          try {
            const stream = await navigator.mediaDevices.getUserMedia({ video: true });
            this.videoElement.srcObject = stream;
          } catch (error) {
            console.error('Error accessing camera:', error);
          }
        }
      },
      onLoad() {
        this.initVideo();
      }
    });
  }
}
</script>

  1. 注意事项：

    • 确保 web-view 或 renderjs 环境中已经正确加载了页面，并且页面逻辑是在用户交互（如按钮点击）后触发摄像头权限请求。
    • 上述代码中，startCamera 方法是在按钮点击事件中调用的，这确保了权限请求是在用户明确操作后发生的。
    • 如果用户已经授予过权限，理论上 getUserMedia 不会再次请求权限，除非浏览器策略或应用逻辑有变化。

  2. 优化权限请求体验：

    • 考虑在首次请求权限前，向用户展示清晰的提示信息，说明为何需要访问摄像头。
    • 如果应用逻辑允许，可以在用户拒绝权限请求后，提供重新请求的入口，但避免频繁无意义的请求。

通过上述方法，你可以有效管理 uni-app 中 renderjs 使用 WebRTC 的权限请求逻辑，减少不必要的权限提示，提升用户体验。

回到顶部