Flutter Web HID设备访问插件web_hid的使用

Dart 对 dart:js 的封装，用于访问 Web HID API。

功能特性

• canUseHid
• getDevices/requestDevice
• subscribeConnect/unsubscribeConnect
• subscribeDisconnect/unsubscribeDisconnect
• open/close
• sendReport
• subscribeInputReport/unsubscribeInputReport
• sendFeatureReport

使用方法

canUseHid

检查当前浏览器是否支持 Web HID API。

bool canUse = canUseHid();
print('canUse $canUse');

getDevices/requestDevice

获取已连接的 HID 设备

List<HidDevice> getDevices = await hid.getDevices();
_device = getDevices[0];

请求用户选择 HID 设备

List<HidDevice> requestDevice = await hid.requestDevice(RequestOptions(
  filters: [keyboardBacklightIds],
));
_device = requestDevice[0];

subscribeConnect/unsubscribeConnect

订阅 HID 设备连接事件。

final EventListener _handleConnect = allowInterop((Event event) {});
...
hid.subscribeConnect(_handleConnect);
...
hid.unsubscribeConnect(_handleConnect);

subscribeDisconnect/unsubscribeDisconnect

订阅 HID 设备断开事件。

final EventListener _handleDisconnect = allowInterop((Event event) {});
...
hid.subscribeDisconnect(_handleDisconnect);
...
hid.unsubscribeDisconnect(_handleDisconnect);

open/close

打开 HID 设备

_device?.open().then((value) {
  print('device.open success');
}).catchError((error) {
  print('device.open $error');
});

关闭 HID 设备

_device?.close().then((value) {
  print('device.close success');
}).catchError((error) {
  print('device.close $error');
});

sendReport

发送 HID 报告。

_device?.sendReport(0, blockBytes).then((value) {
  print('device.sendReport success');
}).catchError((error) {
  print('device.sendReport $error');
});

subscribeInputReport/unsubscribeInputReport

订阅 HID 输入报告事件。

final EventListener _handleInputReport = allowInterop((event) {});
...
_device?.subscribeInputReport(_handleInputReport);
...
_device?.unsubscribeInputReport(_handleInputReport);

sendFeatureReport

发送 HID 特性报告。

_device?.sendFeatureReport(1, Uint32List.fromList([1, 0])).then((value) {
  print('device.sendFeatureReport 0 success');
}).catchError((error) {
  print('device.sendFeatureReport $error');
});

完整示例代码

以下是一个完整的示例代码，展示了如何使用 web_hid 插件与 HID 设备进行交互。

// ignore_for_file: avoid_print, avoid_web_libraries_in_flutter

import 'dart:html' show Event, EventListener;
import 'dart:js' show allowInterop;

import 'package:flutter/material.dart';
import 'package:web_hid/web_hid.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('web_hid 示例'),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
              child: const Text('检测是否支持 HID'),
              onPressed: () {
                bool canUse = canUseHid();
                print('是否支持 HID: $canUse');
              },
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  child: const Text('订阅连接事件'),
                  onPressed: () {
                    hid.subscribeConnect(_handleConnect);
                    print('订阅连接事件成功');
                  },
                ),
                ElevatedButton(
                  child: const Text('取消订阅连接事件'),
                  onPressed: () {
                    hid.unsubscribeConnect(_handleConnect);
                    print('取消订阅连接事件成功');
                  },
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  child: const Text('订阅断开事件'),
                  onPressed: () {
                    hid.subscribeDisconnect(_handleDisconnect);
                    print('订阅断开事件成功');
                  },
                ),
                ElevatedButton(
                  child: const Text('取消订阅断开事件'),
                  onPressed: () {
                    hid.unsubscribeDisconnect(_handleDisconnect);
                    print('取消订阅断开事件成功');
                  },
                ),
              ],
            ),
            ElevatedButton(
              child: const Text('打开设备'),
              onPressed: () {
                _device?.open().then((value) {
                  print('设备打开成功');
                }).catchError((error) {
                  print('设备打开失败: $error');
                });
              },
            ),
            ElevatedButton(
              child: const Text('关闭设备'),
              onPressed: () {
                _device?.close().then((value) {
                  print('设备关闭成功');
                }).catchError((error) {
                  print('设备关闭失败: $error');
                });
              },
            ),
            ElevatedButton(
              child: const Text('发送报告'),
              onPressed: () {
                _device?.sendReport(0, Uint8List.fromList([0x01, 0x02]))
                    .then((value) {
                  print('发送报告成功');
                }).catchError((error) {
                  print('发送报告失败: $error');
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

final EventListener _handleConnect = allowInterop((Event event) {
  print('_handleConnect $event');
});

final EventListener _handleDisconnect = allowInterop((Event event) {
  print('_handleDisconnect $event');
});