How to open torch light in mobile (or flash light) with React.Js

user_16870482 0
Viewed 635

I want to open/close the torch light of mobile when i am toggling the button below..

enter image description here

      <IconButton
        onClick={() => setFlashOn(!flashOn)}
        style={{ position: "absolute", right: 80, top: 20, zIndex: 2 }}
      >
        {flashOn ? (
          <FlashButtonIcon width={44} height={44} />
        ) : (
          <FlashButtonEmptyIcon width={44} height={44} />
        )}
      </IconButton>

At this time im only changing the fill color of the button when i am toggling it.

Is it possible with React?

material-ui reactjs javascript
2 Answers

Have you tried using @blackbox-vision/use-torch-light hook?

import React, { useState, useRef } from 'react';
import { useTorchLight } from '@blackbox-vision/use-torch-light';

const Test = (props) => {
  const [on, toggle] = useTorchLight(streamRef.current);

  return (
    <>
      <button onClick={toggle}>{on ? 'Disable Torch' : 'Enable Torch'}</button>
    </>
  );
};

If running the following installation command throws an error:

npm i @blackbox-vision/use-torch-light

You may need to install the legacy peer dependencies. This is because of mismatching React versions from your project and the dependencies of the module. In that case run:

npm i @blackbox-vision/use-torch-light --legacy-peer-deps

It relies on ImageCapture API so check the cross-browser compatibility first.

It's a tricky topic since the device torch it's a native functionality and a built-in solution through the browser will involve a stream listener which can lead to multiple error management, it's a tough one, as suggested in:

user_55853710

A simple React Native plugin to switch a flashlight on/off.

npm install --save react-native-torch
react-native link react-native-torch

Without permissions check

import Torch from 'react-native-torch';
 
Torch.switchState(true); // Turn ON
Torch.switchState(false); // Turn OFF

With extra permission check and dialog (Android only)

import Torch from 'react-native-torch';
import { Platform } from 'react-native';
 
if (Platform.OS === 'ios') {
    Torch.switchState(this.isTorchOn);
} else {
    const cameraAllowed = await Torch.requestCameraPermission(
        'Camera Permissions', // dialog title
        'We require camera permissions to use the torch on the back of your phone.' // dialog body
    );
 
    if (cameraAllowed) {
        Torch.switchState(this.isTorchOn);
    }
}

Android catch exception accessing Torch e.g. in emulator or if device doesn't have a torch

try {
    await Torch.switchState(newTorchState);
    this.setState({ isTorchOn: newTorchState });
} catch (e) {
    ToastAndroid.show(
        'We seem to have an issue accessing your torch',
        ToastAndroid.SHORT
    );
}

NOTE: iOS fails silently, on Android, you can still call without the try/catch block and it won't cause a crash

Android version has flow support.

user_129715610
Related