Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

"Device camera" in WebGL

Discussion in 'Web' started by kartikeya, Mar 23, 2018.

  1. kartikeya

    kartikeya

    Joined:
    Sep 21, 2012
    Posts:
    7
    Hi,

    I'm trying to access Rear Web Cam through WebCamTexture for WebGL. so far all I have been able to find is how to get a device cam to play on RawImage. But on Mobile Browser I get only one Device-cam. I did some google and came to know that mobile browser only detect Front camera, there is some Java Script code to access Rear one.

    Is there a way to get something like this in Unity3D?? so that we can get Rear Camera as WebCamTexture inside WebGL?

    PS : On iPhone webCamTexture is not working at all. :(

    Any help will be appreciated.

    Thanks
     
    Chrixeleon likes this.
  2. Marco-Trivellato

    Marco-Trivellato

    Unity Technologies

    Joined:
    Jul 9, 2013
    Posts:
    1,654
    If you make a development build you should be able to find the webcam enumeration code in the <buildname>.framework.unityweb file. You could possibly try to modify that to detect the rear cam.
     
    kartikeya likes this.
  3. kartikeya

    kartikeya

    Joined:
    Sep 21, 2012
    Posts:
    7
    Thanks a lot Marco, It was so quick!! Can you please provide step by step solution for it, Or How that <buildname>.framework.unityweb will be usable!

    This is the code I am using for camera detection :
    https://answers.unity.com/questions/821409/switch-device-camera.html

    On Android it detect one cam, On iPhone it's dead.
     
    Last edited: Mar 26, 2018
  4. kartikeya

    kartikeya

    Joined:
    Sep 21, 2012
    Posts:
    7
    Hi Marco,
    Can you please respond soon I'm really stuck on this functionality, Don't have much experience in Java Script.

    Thanks
     
  5. kartikeya

    kartikeya

    Joined:
    Sep 21, 2012
    Posts:
    7
    Anybody!!! can help?
     
  6. kartikeya

    kartikeya

    Joined:
    Sep 21, 2012
    Posts:
    7
    Finally, I am sure, this is not about the code issue but Bug in Unity. Doesn't work at all with webGL, On iPhone its completely dead and with android failed to access another cam. We are trying another option "Unreal Engine", Lets see if it works.
     
  7. EmpireGameWorld

    EmpireGameWorld

    Joined:
    Jul 21, 2017
    Posts:
    3
    I faced same problem.
    Looking for someone who can help me?
     
  8. SgiLearn

    SgiLearn

    Joined:
    Sep 4, 2018
    Posts:
    5
    I'm also stuck trying to achieve this, as I only get the front camera to work. It does detect multiple cameras on my Android phone, but creating a WebCamTexture by referencing the WebCamDevice.name of the rear camera doesn't work. It probably fails to reference the device by name and defaults to the front camera.

    On my Android phone it finds the following WebCamDevices:
    "camera2 1, facing front"
    "camera2 0, facing back"

    And on my iPad pro:
    "device #1"
    "device #0"

    The names clearly suggest that it has found both my front and rear camera. Though, using either name results in the same front camera view.

    I would love to know if someone has successfully created a WebCamTexture using the WebCamDevice.name of the rear camera or how to achieve it some other way like Marco suggested. But I'm not sure how to do what he suggested. Thanks!
     
  9. rcornwall

    rcornwall

    Joined:
    Oct 21, 2016
    Posts:
    7
    Thanks Marco!

    So if you open "<buildname>.framework.unityweb" and go to the function:
    Code (CSharp):
    1. function _JS_WebCamVideo_Start(deviceId) {
    and change the code:

    Code (CSharp):
    1. var video = document.createElement("video");
    2. navigator.getMedia({
    3.   video: true,
    4.   audio: false
    5. }, (function(stream) {
    6.   video.srcObject = stream;
    7.   webcam.canvas.appendChild(video);
    8.   video.play();
    9.   MediaDevices[deviceId].video = video;
    10.   MediaDevices[deviceId].stream = stream;
    11.   MediaDevices[deviceId].refCount++;
    12. }), (function(err) {
    13.   console.log("An error occurred! " + err);
    14. }));
    to:

    Code (CSharp):
    1. var video = document.createElement("video");
    2. navigator.getMedia({
    3.   video: { facingMode: { exact: "environment" } },
    4.   audio: false
    5. }, (function(stream) {
    6.   video.srcObject = stream;
    7.   webcam.canvas.appendChild(video);
    8.   video.play();
    9.   MediaDevices[deviceId].video = video;
    10.   MediaDevices[deviceId].stream = stream;
    11.   MediaDevices[deviceId].refCount++;
    12. }), (function(err) {
    13.   console.log("An error occurred! " + err);
    14. }));
     
    azporispo likes this.
  10. Tzach10

    Tzach10

    Joined:
    May 3, 2018
    Posts:
    3

    Having the same problem and can't find the file you are mentioning , the only one I have which is remotly close by name is Builds.wasm.framework.unityweb
     
  11. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    953
    Perhaps a slightly nicer way to do these kinds of modifications is to edit the Unity source .js files directly. That way the changes will be present in all builds that are done, without having to manually edit each build you do. For example on Windows, look at c:\program files\Unity\Hub\Editor\2019.2.7f2\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\lib\WebCam.js, line 97 has the navigator.getMedia({...}) statement to modify.

    Then rebuilding the project in Development or Release mode should pick up the change.
     
    SgiLearn likes this.
  12. wechat_os_Qy01sfSQS4m7a0ui83VY7LKsQ

    wechat_os_Qy01sfSQS4m7a0ui83VY7LKsQ

    Joined:
    May 15, 2020
    Posts:
    1
    • Hello, may I see if the Webgl you sent can open the camera on the mobile terminal?

    • I cannot open the camera with the mobile browser, could you please give me a reference of your method?
    • millions of thanks!
     
  13. justinduy

    justinduy

    Joined:
    Dec 26, 2016
    Posts:
    7
    it worked on webgl for android but in ios it's still dead.
    I have requested camera permission but its still not working yet. Any ideas?. Thanks.
     
    Marks4 likes this.
  14. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    521
    without the "exact" it works for me.

    Indeed, it doesn't work for iOS x_X. Anyone??
     
    Last edited: Aug 14, 2020
  15. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    521
    By the Nine, somebody help with this!
     
  16. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    521
    I reported a bug to Unity...hopefully they will take a look into this issue...as I commented on the issue I reported, that code snippet that fixes the problem on Android, doesn't even run on iOS. Using latest Unity 2020.1 here.
     
  17. kimvasquez3221

    kimvasquez3221

    Joined:
    Feb 13, 2022
    Posts:
    1
    WebGL Webcamtexture works now on unity 2021.2, both android and ios, but in iOS, only front facing camera is working. Any workaround available? Thanks!
     
  18. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    521
    Try out my plugin, which solves these issues.
     
  19. ShivNandi

    ShivNandi

    Joined:
    Mar 24, 2017
    Posts:
    2
    This is the most expensive solution ever !!
     
  20. dungntk

    dungntk

    Joined:
    Sep 22, 2016
    Posts:
    7
    any update for access back camera on mobile ?
     
  21. unityruba

    unityruba

    Unity Technologies

    Joined:
    Nov 6, 2020
    Posts:
    264
    I added support for requesting webcam permissions last year and backported it to 2021.3, which made accessing webcams more stable. What version are people seeing issues with accessing the back webcam here? Has anyone tried it with 2021.3?