Accessing mobile Camera through Gdevelop Pt. 2

How do I...?
1

So I’m attempting to ultimately make a QR code reader in Gdevelopment as part of a game for my senior thesis project.
I’ve been following this thread for how to access the mobile/computer camera through Gdevelopment: [Solved] Access camera on Mobile

BUT, I cannot seem to get their solution to work no matter what I do. I get this error: DOMException: could not start video source.

I’ve done literally everything I can think of to fix this error, but nothing is working and I have absolutely no idea why it would be happening. Please help, I’ve now wasted 14 hours of my life on this one stupid error and I’d love to fix it. I’ve attached what I have so far below (it is only a small very very very simple part of what they did on the other thread since I can’t get anything to work)

//create HTML elements
console.log("made elements");
const VideoRenderer = document.createElement("video");
const VideoCanvas = document.createElement("canvas");
const PictureTexture = document.createElement("img");

//create identifiers and attributes
console.log("made ids");
VideoRenderer.id = "camera--view";
VideoCanvas.id = "camera--sensor";
PictureTexture.id = "camera--output";

VideoRenderer.autoplay = true;
VideoCanvas.width = 480;
VideoCanvas.height = 720;
PictureTexture.src = "//:0";

//add elements into html doc
console.log("added to html doc");
document.body.appendChild(VideoRenderer);
document.body.appendChild(VideoCanvas);
document.body.appendChild(PictureTexture);

//getting elements from HTML
console.log("set constraints");
//var constraints = {video:true}; 
var cameraView = document.getElementById("camera--view");
var cameraCanvas = document.getElementById("camera--sensor");
var cameraImage = document.getElementById("camera--output");

//asking for permissions
navigator.permissions.query({name: 'camera'})
.then((permissionObj)=> {
    console.log(permissionObj.state);
})
.catch((error)=> {
    console.error('ANOTHERFUDGINGERROR:', error);
})

//check if the media source is available
function cameraStart() {
    console.log("reached cameraStart");
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia){
        navigator.mediaDevices.getUserMedia({video: {facingMode: 'user'}})
            .then(function(stream){
                console.log("reached stream");
                cameraView.srcObject = stream;
            })
        .catch(function(error){
            console.error("Oops. Something BROKE", error);
        });
    }
    else {
        console.log("SONOFABATTHEYRENOTAVAILABLE");
    }
}
2

Your code looks about right, except for the fact that cameraStart is not called and that the permissions querying part is redundant. It works for me if I add a call to cameraStart at the end. I guess that you have a setting that disallows your browser from using your camera, either in your system or browser settings.

1 Like
3

Thank you for responding!! I ended up figuring it out and it was two separate issues which is why I couldn’t access the camera in any preview mode. 1. Chrome blocks all ‘unsafe’ connections and overrides all of your settings so I fixed that on the experimental page and 2. I have to run GDevelop through the terminal on my macbook because of their ridiculous permissions system and then I can actually use the camera.

I actually have another question, I can’t seem to get the code to actually display the camera feed versus just updating with a static image every 5 seconds or so. At first, I was using the structure of the code from the other forum post which never worked and then I tried the structure of requestAnimationFrame() with the step function and that doesn’t work either. Any ideas?

4

Would you share this as an extension? Seem like a powerful tool.

1 Like