使用 navigator.mediaDevices.getUserMedia 使用 wkwebview 在 IOS 应用程序中显示黑屏。在 IOS safari 浏览器中工作正常

发布于 2025-01-11 01:52:09 字数 938 浏览 3 评论 0原文

我有一个 IOS webview 应用程序和一个触发脚本 navigator.mediaDevices.getUserMedia 的网站，以在拍照而不是压缩时降低图像质量。我们正在使用此脚本打开相机并拍摄图像。

它在 IOS safari 浏览器中工作正常，打开相机并以低质量拍摄照片，但在 IOS 应用程序 webview 中不起作用。

在IOS应用程序中，它显示黑屏，并且在调试应用程序时，它会抛出未处理的承诺拒绝：notallowederror：用户拒绝即使在两次从浏览器端授予权限和另一次从应用程序端授予权限之后。

<video id="video" playsinline autoplay muted> </video>

var constraints = { video: { facingMode: { exact: "environment", } } };

navigator.mediaDevices.getUserMedia(constraints)
   .then(function (stream) {
   var video = document.querySelector('video');
   video.setAttribute('autoplay', '');
   video.setAttribute('muted', '');
   video.setAttribute('playsinline', '');
   video.srcObject = stream;

   video.onloadedmetadata = function (e) {
     $('#containercamera').show();
   };

})

ps：

使用 https
在 ios safari 浏览器中
工作。在IOS应用程序中添加了相机的权限。

原文

I have an IOS webview app and a site that triggers a script navigator.mediaDevices.getUserMedia to reduce the quality of the image while taking picture instead of compressor. we are using this script to open up a camera and take an image.

Its works fine in IOS safari browser it opens the camera and takes a picture in low quality but it does not work in IOS app webview.

In IOS app its shows a black screen and while debugging the app it throws Unhandled Promise Rejection: notallowederror: User Denied Even after giving the permission twice one from the browser side and another from app side.

<video id="video" playsinline autoplay muted> </video>

var constraints = { video: { facingMode: { exact: "environment", } } };

navigator.mediaDevices.getUserMedia(constraints)
   .then(function (stream) {
   var video = document.querySelector('video');
   video.setAttribute('autoplay', '');
   video.setAttribute('muted', '');
   video.setAttribute('playsinline', '');
   video.srcObject = stream;

   video.onloadedmetadata = function (e) {
     $('#containercamera').show();
   };

})

ps: