网页调用摄像头读取QR code

2022-12-17 17:29

2022 年也要结束了，博客不能停更。最近项目中有读取 QR 码的需求，于是便调研了下如何实现这个功能，顺便写篇博客记录下。

# 现成 React 框架

首先调研了别人封装好的现成框架，React QR Reader (opens new window)。这个框架看起来还挺流行的，可是最新版本的发布已经是 2019 年了。而且有一个致命的 BUG 就是在开启摄像头之后无法关闭。必须重新刷新页面才行，这是不能接受的。

# 低层封装框架

发现大家基本都是调用@zxing/browser (opens new window)来完成核心功能的。于是我也使用这个框架封装一个不就好了。首先安装相关依赖：

pnpm add @zxing/browser @zxing/library

具体的封装代码如下：

const QrReader: React.FC<IQrReaderProps> = ({
  videoId = 'video',
  scanDelay = 500,
  constraints = {
    facingMode: 'environment'
  },
  className = '',
  onResult
}) => {
  const stopRef = useRef(false);
  const videoRef = useRef<HTMLVideoElement | null>(null);

  useEffect(() => {
    if (videoRef.current) {
      const codeReader = new BrowserQRCodeReader(undefined, {
        delayBetweenScanAttempts: scanDelay
      });
      stopRef.current = false;
      codeReader
        .decodeFromConstraints(
          {
            video: constraints
          },
          videoRef.current,
          (result, error, controls) => {
            onResult && onResult(result, error, controls);
            if (stopRef.current) {
              controls.stop();
            }
          }
        )
        .catch(error => {
          onResult && onResult(undefined, error);
        });
    }
    return () => {
      stopRef.current = true;
    };
  }, [videoId, scanDelay, constraints, onResult]);
  return (
    <section className={cls(styles.reader, className)}>
      <div className={styles.container}>
        <ViewFinder />
        <video
          muted
          ref={videoRef}
          className={styles.video}
          style={{
            transform:
              constraints?.facingMode === 'user' ? 'scaleX(-1)' : 'none'
          }}
        />
      </div>
    </section>
  );
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

这里使用了 stopRef 来标记组件的销毁并停止调用摄像头。本身封装也不复杂，没必要使用别人封装的轮子。完整的代码在simple-qr-reader (opens new window)

# 总结

前端生态非常完善，使用现成的库就可以非常方便的实现调用摄像头读取二维码功能。

# 参考

@zxing/browser と React の組み合わせで QR Code Reader 作る (opens new window)

如何使用TypeScript进行后端开发

2022-10-29 11:47

TypeScript

我们经常使用 TypeScript 进行开发，webpack 会自动帮我们编译成浏览器可以执行的 JS 文件。相关的开发工具也很完善，但是进行后端开发的资料就比较少了，我们来讲解下如何使用 TypeScript 进行后端开发。

# 开发环境自动重新加载

前端有 HMR (opens new window) 技术可以实在自动热加载。后端实现这个功能其实也很简单。首先需要按照 nodemon 和 ts-node。我们使用 pnpm 进行包管理。

pnpm add nodemon ts-node -D

然后在 package.json 添加命令。

nodemon src/index.ts

nodemon 可以完成对文件的监控并且自动 reload，ts-node 完成对 TypeScript 的支持。并且不需要配置，nodemon 会自动调用 ts-node。

# 支持绝对路径引用

前端开发中也经常使用绝对路径，所以希望后端也能使用绝对路径。TypeScript 默认不支持绝对路径的使用，我们需要引用第三方来完成这个操作。

pnpm add ttypescript typescript-transform-paths -D

ttypescript 支持在 build 过程中添加插件来完成很多功能，绝对路径转换成相对路径就是其中一个功能， typescript-transform-paths 这个插件就是用来完成绝对路径映射的。我们需要在 tsconfig.json 中进行相关的配置。

{
  "ts-node": {
    "transpileOnly": true,
    "require": ["typescript-transform-paths/register"]
  },
  "compilerOptions": {
    "target": "ESNext",
    "module": "commonjs",
    "moduleResolution": "Node",
    "outDir": "dist",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "plugins": [{ "transform": "typescript-transform-paths" }]
  },
  "include": ["src"]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

首先在 paths 字段下，映射文件夹路径，这样就可以使用 @/posts/index.ts 这种格式来引用模块。当然路径映射在开发环境下需要 ts-node 的支持，我们在 ts-node 的 require 字段上引用我们安装的插件。最后是编译成 JS 文件的过程中添加绝对路径的支持。

ttsc -p tsconfig.json

使用增强版 ttsc 来完成路径的转换，可以看到生成的 JS 文件中已经是正常的相对路径引用了，前端的时候大多数都是 webpack 完成打包的，后端的话可以直接使用 ttsc 来完成编译过程。

# 总结

TypeScript 在类型定义上的支持可以让我们很方便开发大型项目，后端支持了 reload 和绝对路径之后开发效率也可以大大提高。

# 参考

ts-node で path alias が効かないにハマる (opens new window)

mapdoge-bot (opens new window)

如何编写Telegram Bot

2022-09-24 11:07

bot

最近在处理如何把经纬度转换成日本的 MAPCODE 的问题。在外出行的时候，经常使用的设备都是手机，如何在手机上方便的计算旅游景点的 MAPCODE 然后使用车载导航呢？我的想法是做一个 Telegram Bot，输入景点的 Plus Code (opens new window), 然后返回 MAPCODE。

# 申请 Bot

首先，你要去找 BotFather (opens new window)申请 Bot。通过简单的对话就可以创建 Bot。使用 /start 命令可以查看所有支持的指令。

输入， /newbot 就可以创建 Bot 了，通过对话模式可以设定 Bot 的名字。然后你可以得到一个属于这个 Bot 的 token，格式类似于 577XXXXX:AAEMUXqXrgRE9R2jPcOXXXXX。拿到这个 token 就可以构建 Bot 了。

# 构建 Bot API

Bot API 本质是 HTTPS API，通过构建请求来实现功能。不过构造 HTTPS 请求本身很枯燥，已经有很多现成的框架可供我们使用。本人擅长使用 JavaScript，所以选择了 telegraf.js (opens new window) 这个框架。

# Bot 代码示例

import { Telegraf } from 'telegraf';

const bot = new Telegraf(process.env.BOT_TOKEN);

bot.start(ctx => {
  const message = `I can help you to query MAPCODE with Telegram.\nYou can copy plus code from Google Maps and paste it to tell me.`;
  ctx.reply(message);
});

bot.help(ctx => {
  ctx.replyWithMarkdownV2(
    'Send me a [plus code](https://maps.google.com/pluscodes/)'
  );
  ctx.reply(`MapDoge Version ${process.env.npm_package_version}`);
});

bot.launch();

// Enable graceful stop
process.once('SIGINT', () => bot.stop('SIGINT'));
process.once('SIGTERM', () => bot.stop('SIGTERM'));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Telegram Bot 默认都支持 /start 和 /help 命令。所以我就贴出了这两个命令的简单写法。使用成熟的框架可以大大简化编写 Bot 的复杂度。

# 总结

Telegram Bot 有完善的文档和生态，编写一个 Bot 并没有想象的那么难。大家都可以尝试下，非常方便实现在手机端的一些自定义功能。

# 参考

Bot Code Examples (opens new window)

mapdoge-bot (opens new window)