How to request camera access from Safari (Desktop)

Hey there, I created a simple test scene with a screen on a tree that shows the webcamtexture .

On Chrome I get the "Camera access" popup, so I can give the app access.

On Safari nothing happens, no popup, no camera showing in my scene.

The code is real minimal:

Code (CSharp):

1.     void Start()
2.     {
3.         Debug.Log("WebCamTexture.devices.Length: " + WebCamTexture.devices.Length);
4.         WebCamTexture webcamTexture = new WebCamTexture();
5.         Renderer renderer = GetComponent<Renderer>();
6.         renderer.material.mainTexture = webcamTexture;
7.         webcamTexture.Play();
8.     }

I also published the app, so you can try yourself: https://test.looc.io/forest/index.html

On Chrome, the log is `WebCamTexture.devices.Length: 1` but on Safari it is `WebCamTexture.devices.Length: 0`.

What can I do to make Safari ask for the camera access?

PS: I know when I write plain js code, I have to use `navigate.mediaDevices.getUserMedia`. Is it possible Unity still uses the deprecated `navigator.getUserMedia()`?
EDIT: Version 2020.2.2f1

 

Thanks for the quick reply, unfortunately it's the same result: https://test.looc.io/forest21/index.html
(built using 2021.1.0b4). Same code as above.

 

I was looking into the "webgl-1.framework.js" that is created in the `Build` folder.

And I think I found one culprit, in the below method `enumerateMediaDevices` it will early exit on Safari:

Code (JavaScript):

1.  var MediaDevices = [];
2.     if (typeof ENVIRONMENT_IS_PTHREAD === "undefined" || !ENVIRONMENT_IS_PTHREAD) {
3.         Module["preRun"].push(function () {
4.             var enumerateMediaDevices = function () {
5.                 var getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
6.  
7.                 console.log("getMedia: " + getMedia); // <-- added by me
8.  
9.                 if (!getMedia) return;
10.                 function addDevice(label) {
11.                     label = label ? label : "device #" + MediaDevices.length;
12.                     var device = { deviceName: label, refCount: 0, video: null };
13.                     MediaDevices.push(device);
14.                 }
15.                 if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
16.                     if (typeof MediaStreamTrack == "undefined" || typeof MediaStreamTrack.getSources == "undefined") {
17.                         console.log("Media Devices cannot be enumerated on this browser.");
18.                         return;
19.                     }
20.                     function gotSources(sourceInfos) {
21.                         for (var i = 0; i !== sourceInfos.length; ++i) {
22.                             var sourceInfo = sourceInfos[i];
23.                             if (sourceInfo.kind === "video") addDevice(sourceInfo.label);
24.                         }
25.                     }
26.                     MediaStreamTrack.getSources(gotSources);
27.                 }
28.                 navigator.mediaDevices
29.                     .enumerateDevices()
30.                     .then(function (devices) {
31.                         devices.forEach(function (device) {
32.                             if (device.kind == "videoinput") addDevice(device.label);
33.                         });
34.                     })

the line `var getMedia = navigator.getUserMedia` is null/undefined on Safari and will early abort the method `enumerateMediaDevices`.

 

Digging deeper into this (after fixing the early exit), there might be another issue related to privacy settings in Safari. The class MediaDeviceInfo has a deviceId and a label variable, yet unless you specifically allow safari access to your camera both of those variables will be empty. Compare this github issue on an unrelated project
Maybe Unity is in fact trying to enumerate the devices before calling the method that would trigger Safari to ask the user to allow access and since the variables are undefined the method:

Code (JavaScript):

1. if (device.kind == "videoinput") addDevice(device.label);

from webgl-1.framework.js will add undefined.
Check out the following screenshot, on Chrome the label of my camera is `FaceTime HD Camera (Built-in) (05ac:8511)` on Safari the label gets created to be `device #0`.
Thing is, on Chrome, Unity seems to call the `_JS_WebCamVideo_GetNumDevices`
and gets a `1` back. In Safari the js method `_JS_WebCamVideo_GetNumDevices` doesn't seem to be called at all. The c# Start() method above calls "Debug.Log("WebCamTexture.devices.Length: " in safari the log says `0`, which is weird given that MediaDevices clearly now has one entry, after the path to the if-clause from my previous post.
I'm out of ideas for now how to proceed.

 

PS: The build.framework.js file created by 2020.2.2f1 and the code discussed here look the same, with the same results.
PPS: I also noticed after `Input Manager initialize...` on Chrome the method "_JS_WebCamVideo_GetNumDevices" is called when the `WebCamTexture.devices.Length` is accessed from inside unity. In Safari, the log in "_JS_WebCamVideo_GetNumDevices" never triggered even though `WebCamTexture.devices.Length` is called.
The code inside unity that sits between my Monobehaviour component and this js code isn't accessible, but I recon something is happening in there that prevents the methods `_JS_WebCamVideo_GetNumDevices`, `_JS_WebCamVideo_GetDeviceName` and `_JS_WebCamVideo_Start` from being called.

PPPS:
If I do drop the code from the `_JS_WebCamVideo_Start` method:

Code (JavaScript):

1.     navigator.getMedia = function (constraints, success, error) {
2.         navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
3.     };
4.     var video = document.createElement("video");
5.     navigator.getMedia(
6.         { video: true, audio: false },
7.         function (stream) {
8.             video.srcObject = stream;
9.             // webcam.canvas.appendChild(video);
10.             video.play();
11.             MediaDevices[0].video = video;
12.             MediaDevices[0].stream = stream;
13.             MediaDevices[0].refCount++;
14.         },
15.         function (err) {
16.             console.log("An error occurred! " + err);
17.         }
18.     );    

into the preRun - enumerateMediaDevices method, it in fact triggers the Safari-Video-Permission-Popup, so we just need a way of making Unity call _JS_WebCamVideo_Start when running in Safari.

 

Thank you @jukka_j for clarifying though, at least I know that help is on the way

 

Hey @jukka_j , I gave it another try today.

Alpha version 2021.2.0a5 works ( https://test.looc.io/forest/index.html ), the camera access popup happens.
But beta version 2021.1.0b8 still does not work ( https://test.looc.io/forest21/index.html ), no camera access request happens.
I published to demo apps for test purposes.

 

Tried again with 2021.1.0b11 and still no popup in Safari (but works in Chrome, as before) https://test.looc.io/forest21/index.html

 

Hey @Bersaelor, I made an asset to fix all the problems related to accessing the device camera on webgl: https://assetstore.unity.com/packages/tools/camera/devicecamerawebgl-180966