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

Post reply
0 favourites
  • 8 posts
From the Asset Store
Target 2.0 Slot HTML5 Construct 2 and Construct 3
$15 USD
Casino? money? who knows? but the target is the same!
bellborn's avatar
bellborn

  • 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"

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • 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..

  • I don't know how to turn the torch off. Try the same code but with {torch: false} at the end.

Post reply
  • 8 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)