1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <title>WebUSB Serial Sample Application</title>
5  </head>
6
7<body>
8  <script>
9var serial = {};
10
11(function() {
12  'use strict';
13
14  serial.getPorts = function() {
15    return navigator.usb.getDevices().then(devices => {
16      return devices.map(device => new serial.Port(device));
17    });
18  };
19
20  serial.requestPort = function() {
21    const filters = [
22      { 'vendorId': 0x2fe3, 'productId': 0x0100 },
23      { 'vendorId': 0x2fe3, 'productId': 0x00a },
24      { 'vendorId': 0x8086, 'productId': 0xF8A1 },
25    ];
26    return navigator.usb.requestDevice({ 'filters': filters }).then(
27      device => new serial.Port(device)
28    );
29  }
30
31  serial.Port = function(device) {
32    this.device_ = device;
33  };
34
35  serial.Port.prototype.connect = function() {
36    let readLoop = () => {
37      const {
38        endpointNumber
39      } = this.device_.configuration.interfaces[0].alternate.endpoints[0]
40      this.device_.transferIn(endpointNumber, 64).then(result => {
41        this.onReceive(result.data);
42        readLoop();
43      }, error => {
44        this.onReceiveError(error);
45      });
46    };
47
48    return this.device_.open()
49        .then(() => {
50          if (this.device_.configuration === null) {
51            return this.device_.selectConfiguration(1);
52          }
53        })
54        .then(() => this.device_.claimInterface(0))
55        .then(() => {
56          readLoop();
57        });
58  };
59
60  serial.Port.prototype.disconnect = function() {
61    return this.device_.close();
62  };
63
64  serial.Port.prototype.send = function(data) {
65    const {
66      endpointNumber
67    } = this.device_.configuration.interfaces[0].alternate.endpoints[1]
68    return this.device_.transferOut(endpointNumber, data);
69  };
70})();
71
72let port;
73
74function connect() {
75  port.connect().then(() => {
76    port.onReceive = data => {
77      let textDecoder = new TextDecoder();
78      console.log("Received:", textDecoder.decode(data));
79      document.getElementById('output').value += textDecoder.decode(data);
80    }
81    port.onReceiveError = error => {
82      console.error(error);
83      document.querySelector("#connect").style = "visibility: initial";
84      port.disconnect();
85    };
86  });
87}
88
89function send(string) {
90  console.log("sending to serial:" + string.length);
91  if (string.length === 0)
92    return;
93  console.log("sending to serial: [" + string +"]\n");
94
95  let view = new TextEncoder('utf-8').encode(string);
96  console.log(view);
97  if (port) {
98    port.send(view);
99  }
100};
101
102window.onload = _ => {
103  document.querySelector("#connect").onclick = function() {
104    serial.requestPort().then(selectedPort => {
105      port = selectedPort;
106      this.style = "visibility: hidden";
107      connect();
108    });
109  }
110
111  document.querySelector("#submit").onclick = () => {
112    let source = document.querySelector("#input").value;
113    send(source);
114  }
115}
116
117</script>
118 <button id="connect" style="visibility: initial">Connect To WebUSB Device</button>
119 <br><br><label for="input">Sender: </label> <br>
120 <textarea id="input" rows="25" cols="80">WebUSB!</textarea>
121 <br><button id="submit">Send</button>
122 <br><br>
123 <label for="output">Receiver: </label> <br>
124 <textarea id="output" rows="25" cols="80"></textarea>
125</body>
126</html>
127