How to get a Construct button to execute a function created within a java script?

0 favourites
  • 8 posts
From the Asset Store
Casino? money? who knows? but the target is the same!
  • I found some java script example code that WORKS GREAT for me..

    It successfully turns ON the FLASHLIGHT on the back of an Android cell phone within a Chrome browser.

    The script creates a button function, then there is HTML code that DRAWS the button itself..

    Here is the HTML code that successfully EXECUTES the java script function..

    ================================================================================

    	<html>
    		<body>
    
    <button 
     class="switch" 
     style="width: 126px; height: 64px;" > 
    </button> 
    
    		</body>
    	</html>
    

    =================================================================================

    I can successfully RUN the java script using the BROWSER PLUGIN, however...

    QUESTION: How do I program a BUTTON within Construct to EXECTUE the button function within the java script?

    Below is the java script code..

    =======================================================================================

     //Test browser support
    const SUPPORTS_MEDIA_DEVICES = 'mediaDevices' in navigator;
    
    if (SUPPORTS_MEDIA_DEVICES) {
     //Get the environment camera (usually the second one)
     navigator.mediaDevices.enumerateDevices().then(devices => {
     
     const cameras = devices.filter((device) => device.kind === 'videoinput');
    
     if (cameras.length === 0) {
     throw 'No camera found on this device.';
     }
     const camera = cameras[cameras.length - 1];
    
     // Create stream and get video track
     navigator.mediaDevices.getUserMedia({
     video: {
     deviceId: camera.deviceId,
     facingMode: ['user', 'environment'],
     height: {ideal: 1080},
     width: {ideal: 1920}
     }
     }).then(stream => {
     const track = stream.getVideoTracks()[0];
    
     //Create image capture object and get camera capabilities
     const imageCapture = new ImageCapture(track)
     const photoCapabilities = imageCapture.getPhotoCapabilities().then(() => {
    
     //todo: check if camera has a torch
    
     //let there be light!
     const btn = document.querySelector('.switch');
     btn.addEventListener('click', function(){
     track.applyConstraints({
     advanced: [{torch: true}]
     });
     });
     });
     });
     });
     
     //The light will be on as long the track exists
     
    }
    

    ====================================================================================

  • Have you tried this script in Construct 3?

    On Button clicked event -> right click on "Add action", select "Add script" and paste that JS code.

    Or, if you are using Construct 2:

    On Button clicked event -> Browser Execute Javascript "your script here"

  • Hi dop2000,

    No, I have not tried that yet.

    I don't have a subscription for Construct 3, I paid for Construct 2 and would

    prefer to find a solution using software that I can actually "own" instead of "rent".

    The problem with "renting" software is that I won't be able to modify my work product

    code without endlessly paying a monthly fee.

    Thank you for helping dop2000..

    I am hoping to find a solution using my existing "paid for" Construct 2 software..

  • Hi again dop2000,

    The script creates a button, see script below..

    I am just not sure about how to control that script created button with a button

    created within a Contruct2 project.

    Can I give this script created button a "name" or UID, or something so I can generate

    a button in Construct2 to invoke this function?

     //let there be light!
    
     const btn = document.querySelector('.switch');
     btn.addEventListener('click', function(){
     track.applyConstraints({
     advanced: [{torch: true}]
    
     });
    
    
  • I tried this script in "On button pressed" and it works on mobile.

    //Test browser support
    const SUPPORTS_MEDIA_DEVICES = 'mediaDevices' in navigator;
    
    if (SUPPORTS_MEDIA_DEVICES) {
     //Get the environment camera (usually the second one)
     navigator.mediaDevices.enumerateDevices().then(devices => {
    
     const cameras = devices.filter((device) => device.kind === 'videoinput');
    
     if (cameras.length === 0) {
     throw 'No camera found on this device.';
     }
     const camera = cameras[cameras.length - 1];
    
     // Create stream and get video track
     navigator.mediaDevices.getUserMedia({
     video: {
     deviceId: camera.deviceId,
     facingMode: ['user', 'environment'],
     height: {ideal: 1080},
     width: {ideal: 1920}
     }
     }).then(stream => {
     const track = stream.getVideoTracks()[0];
    
     //Create image capture object and get camera capabilities
     const imageCapture = new ImageCapture(track)
     const photoCapabilities = imageCapture.getPhotoCapabilities().then(() => {
    
     //todo: check if camera has a torch
    
     //let there be light!
     track.applyConstraints({
     advanced: [{torch: true}]
     });
     
     });
     });
     });
    
     //The light will be on as long the track exists
    
    }
    

    I guess it should work in C2 too, if you run it using Browser Execute Javascript action.

  • THANK YOU dop2000,

    That works GREAT !!!

    I didn't know how to get rid of the BTN within the java script.

    QUESTION: How do I turn OFF the light once it is ON?

    I created (2) buttons on a test Construct project:

    ON Button:

    On Click = Browser RUN Java Script: "The script you helped me with"

    WORKS LIGHT ON

    OFF Button

    I tried changing the the java script to

    torch: false

    However, that did not work for some reason.

    Is there something else I am missing>

  • I am wondering if the problem is caused by the fact that the example code

    I am using uses "Constants" instead of variables?

    "const photoCapabilities"

    The only way I can turn OFF the light is to RELOAD the HTML page..

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I don't know how to turn the torch off. Try the same code but with {torch: false} at the end.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)