javascript - 如何使用 React.Js 在手机(或手电筒)中打开手电筒

Question

我想在切换下面的按钮时打开/关闭手机的手电筒..

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

此时我只在切换按钮时更改按钮的填充颜色。

React 有可能吗？

Answer 1

您是否尝试过使用 @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>
    </>
  );
};

如果运行以下安装命令抛出错误:

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

您可能需要安装遗留的对等依赖项。这是因为您项目中的 React 版本与模块的依赖项不匹配。在那种情况下运行:

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

它依赖于ImageCapture API所以首先检查跨浏览器兼容性。

这是一个棘手的话题，因为设备 torch 是一种 native 功能，通过浏览器的内置解决方案将涉及一个流监听器，这可能导致多个错误管理，这是一个棘手的话题，如建议的那样:

• Is it possible to control the camera light on a phone via a website?
• NodeJS - Turn On and Off Tourch/Flashlight in mobile Android/IPhone