using navigator.mediaDevices.getUserMedia shows Black screen in IOS App using wkwebview. works fine in IOS safari browser

Question

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:

• using https
• working in ios safari browser.
• Added permission in IOS app for Camera.