Get user permission for getUserMedia in iframe within a UWP javascript app

Asked 4/11, 2016 at 13:41 Answered 8/11, 2021 at 22:56

Solved javascript iframe uwp win-universal-app webrtc

I'm trying to get the user permission dialog to pop up for navigator.getUserMedia, which is called on an external page in an iframe. Currently the sample will show "Permission denied" without ever having presented a dialog to the user.

This is a universal Windows app written in javascript. The webcam has been added to the capabilities.

I've tried finding something similar to the geolocation function below. But I could not find anything for the webcam.

Windows.Devices.Geolocation.Geolocator.requestAccessAsync

The code is very simple. It is an x-ms-webview that links to a webRTC sample.

index.html

<html>
<head>
</head>
<body>
   <x-ms-webview style="left: 0px; top: 0px; width: 100%; height: 100%; position: absolute;" src="https://webrtc.github.io/samples/src/content/getusermedia/gum/"></x-ms-webview>
</body>
</html>

Courthouse answered 4/11, 2016 at 13:41 Comment(5)

If you're trying to access data/function from an iframe you have to do somethinkg like "(iframe_name).contentWindow" which should give you the iframe data and function if it is on the same domain. – Incumbency 4/11, 2016 at 15:34

Problem is it's not on the same domain. Before I would get a NotFoundError when the webcam capability was not added. I just need to somehow give automatic permission to the webview or a user permission dialog to show up. – Courthouse 4/11, 2016 at 15:53

That should show. Could you post an example of it on jsfiddler or something – Incumbency 4/11, 2016 at 16:24

It does show in Edge on the desktop, however within the UWP app using an x-ms-webview it does not. I'll add a sample project on github. – Courthouse 7/11, 2016 at 12:20

Here's the sample: github.com/mac89/webRTC – Courthouse 7/11, 2016 at 12:27

The question has been answered here:
https://social.msdn.microsoft.com/Forums/office/en-US/16e166d6-fd64-47cf-9e57-560c0d82b6df/how-to-resolve-a-permissiondeniederror-using-webrtc-in-xmswebview?forum=wpdevelop

You could also use PermissionRequested event to enable the webrtc feature that requires webcam capability. If you use a permission dialog, use WebViewPermissionRequest.Defer to create a WebViewDeferredPermissionRequest which can be used after user input. For more information, please refer to the following links.
https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/web-view https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/WebView

document.getElementById("webview").addEventListener("MSWebViewPermissionRequested", managePermissionRequest)
function managePermissionRequest(e) {
        if (e.permissionRequest.type == "media") {
                e.permissionRequest.allow();
        }
}

Courthouse answered 7/11, 2016 at 13:48 Comment(0)

I dont work with x-ms-webview and dont like it, I was worked with HTA many years ago ....

But this must inherit from window/iframe and it maybe have allow properties:

<!--Allow camera and microphone access within the context of this iframe-->
<iframe src="https://example.com" allow="camera *;microphone *"></iframe>

Because we have same default problem for iframes, by default they has no allow to getusermedia and u must set allow properties for them to work with usermedia...

Customary answered 8/11, 2021 at 22:56 Comment(1)

Good soluation, thanks a lot. – Yawmeter 31/7, 2023 at 6:45

You could also use PermissionRequested event to enable the webrtc feature that requires webcam capability. If you use a permission dialog, use WebViewPermissionRequest.Defer to create a WebViewDeferredPermissionRequest which can be used after user input. For more information, please refer to the following links.
https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/web-view https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/WebView

document.getElementById("webview").addEventListener("MSWebViewPermissionRequested", managePermissionRequest)
function managePermissionRequest(e) {
        if (e.permissionRequest.type == "media") {
                e.permissionRequest.allow();
        }
}

Courthouse answered 7/11, 2016 at 13:48 Comment(0)

Recommended topics

Hot tags