[Webkit-unassigned] [Bug 259304] New: In WKWebView, getUserMedia API calls fail with the message "The operation was aborted." in pages loaded at capacitor://localhost:8080

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=259304

            Bug ID: 259304
           Summary: In WKWebView, getUserMedia API calls fail with the
                    message "The operation was aborted." in pages loaded
                    at capacitor://localhost:8080
           Product: WebKit
           Version: WebKit Local Build
          Hardware: iPhone / iPad
                OS: iOS 16
            Status: NEW
          Severity: Critical
          Priority: P2
         Component: Media
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: shivasantosh01 at gmail.com

Overview

Our iOS mobile application is developed using the technology stack Angular+Ionic+Capacitor. In our iOS App, the webpages are loaded at capacitor://localhost:8080 in WKWebView. We are attempting to access the camera on our pages using the web API getUserMedia() and the API is failing with Exception AbortError. We have given Camera Permission in our info.plist file and we have verified that our pages are in a secure context. Window.isSecureContext flag is true for our pages.

Sample Code

homepage.html code-
<video autoplay playsinline id="videoElement"></video>

homepage.ts code-

import { AfterViewInit, Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements AfterViewInit{

  constructor() {}

  ngAfterViewInit(): void {
    let video: any = document.querySelector("#videoElement");
    navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" }, audio:false })
    .then((stream) => {
      video.srcObject = stream;
      video.play();
    })
    .catch( (e) => {
      // eslint-disable-next-line no-console
      console.log("Something went wrong!" + e.message);
    });
  }

}

Output-
In WKWebView, getUserMedia API calls fail with the message "The operation was aborted." in pages loaded at capacitor://localhost:8080

Expected Result-
getUserMedia should resolve with stream object.

Additional Information-

We are able to successfully access the camera on other platforms like Android.

We are able to successfully access the camera when the application started locally and is accessed in Safari.

We are able to access the camera in WKWebView on the latest iOS device when we change our hostname from capacitor://localhost:8080 to capacitor://localhost. But the question is, why the getUserMedia API is not working in capacitor://localhost:8080 which is a secure context?

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230718/7c0031c3/attachment.htm>