在uniapp web-view组件外链页面无法调用麦克风摄像头权限?

Question

在uniapp想要去接入livekit, 但是发现livekit并没有提供uniapp的sdk, 有 web端的sdk,就想到用uniapp的web-view来外链一个vue的a页面,在这个a页面里面接入livekit; 测试发现要https环境, 然后在windows上生成了一个自签名的pem, 解决这个问题后发现navigator.mediaDevices.getUserMedia({ audio: true })这个报错了,发现是权限问题, 再测试如果是在浏览器里面直接打开这个a页面,能够正常弹出请求麦克风权限,就是在手机基座上运行不可以. 各种AI问了一大堆,全都没办法
补充一下其他配置

<web-view 
    :src="src" 
    :webview-styles="{ 
    allowInlineMediaPlayback: true,
    androidHardwareAccelerationDisabled: false,
    userAgent: 'Mozilla/5.0 (Linux; Android 10; ...) AppleWebKit/537.36'
    }"
    @message="handleMessage" 
    ref="webviewRef" 
    :allowsInlineMediaPlayback="true"
    :mediaPlaybackRequiresUserAction="false" 
    webview-plugins="media" 
    allow="microphone;camera">
</web-view>

这些 配置是问各种ai 修修补补出来的, 然后在补充manifest

"app-plus" : {
    "allowsInlineMediaPlayback" : true,
    "mediaPlaybackRequiresUserAction" : true,
    "webView" : {
        "mixedHttps" : true, // 允许混合内容
        "hardwareAccelerated" : true // 启用硬件加速
    },
    /* 模块配置 */
    "modules" : {
        "Camera" : {},
        "Record" : {},
        "VideoPlayer" : {},
        "UIWebview" : {},
        "LivePusher" : {},
        "Audio" : {}
    },
    "permissions" : {
        "CAMERA" : {
            "description" : "应用需要使用摄像头进行视频通话"
        },
        "MICROPHONE" : {
            "description" : "应用需要使用麦克风进行语音通话"
        }
    },
    /* 应用发布信息 */
    "distribute" : {
        /* android打包配置 */
            "android" : {
                "permissions" : [
                    "<uses-feature android:name=\"android.hardware.camera\"/>",
                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
                    "<uses-permission android:name=\"android.permission.INTERNET\"/>",
                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>",
                    "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
                    "<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",
                    "<uses-permission android:name=\"android.permission.MANAGE_EXTERNAL_STORAGE\"/>",
                    "<uses-permission android:name=\"android.permission.READ_MEDIA_VIDEO\"/>"
                ],
            }
    }
    

Answer 1

https://uniapp.dcloud.net.cn/component/web-view.html#web-view
试试

Answer 2

livekit没有提供uniapp的sdk,
你们自己可以通过livekit的ios sdk/android sdk在uniapp上做一个原生sdk插件,
具体可以看文档

• https://nativesupport.dcloud.net.cn/NativePlugin/
• https://doc.dcloud.net.cn/uni-app-x/plugin/uts-plugin.html

做好原生sdk插件之后,直接在uniapp页面中使用,就没有你说的什么https环境,自签名pem,navigator.mediaDevices.getUserMedia的问题了