| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <title>WebUSB Serial Sample Application</title> |
| </head> |
| |
| <body> |
| <script> |
| var serial = {}; |
| |
| (function() { |
| 'use strict'; |
| |
| serial.getPorts = function() { |
| return navigator.usb.getDevices().then(devices => { |
| return devices.map(device => new serial.Port(device)); |
| }); |
| }; |
| |
| serial.requestPort = function() { |
| const filters = [ |
| { 'vendorId': 0x2fe3, 'productId': 0x0100 }, |
| { 'vendorId': 0x2fe3, 'productId': 0x00a }, |
| { 'vendorId': 0x8086, 'productId': 0xF8A1 }, |
| ]; |
| return navigator.usb.requestDevice({ 'filters': filters }).then( |
| device => new serial.Port(device) |
| ); |
| } |
| |
| serial.Port = function(device) { |
| this.device_ = device; |
| }; |
| |
| serial.Port.prototype.connect = function() { |
| let readLoop = () => { |
| const { |
| endpointNumber |
| } = this.device_.configuration.interfaces[0].alternate.endpoints[0] |
| this.device_.transferIn(endpointNumber, 64).then(result => { |
| this.onReceive(result.data); |
| readLoop(); |
| }, error => { |
| this.onReceiveError(error); |
| }); |
| }; |
| |
| return this.device_.open() |
| .then(() => { |
| if (this.device_.configuration === null) { |
| return this.device_.selectConfiguration(1); |
| } |
| }) |
| .then(() => this.device_.claimInterface(0)) |
| .then(() => { |
| readLoop(); |
| }); |
| }; |
| |
| serial.Port.prototype.disconnect = function() { |
| return this.device_.close(); |
| }; |
| |
| serial.Port.prototype.send = function(data) { |
| const { |
| endpointNumber |
| } = this.device_.configuration.interfaces[0].alternate.endpoints[1] |
| return this.device_.transferOut(endpointNumber, data); |
| }; |
| })(); |
| |
| let port; |
| |
| function connect() { |
| port.connect().then(() => { |
| port.onReceive = data => { |
| let textDecoder = new TextDecoder(); |
| console.log("Received:", textDecoder.decode(data)); |
| document.getElementById('output').value += textDecoder.decode(data); |
| } |
| port.onReceiveError = error => { |
| console.error(error); |
| document.querySelector("#connect").style = "visibility: initial"; |
| port.disconnect(); |
| }; |
| }); |
| } |
| |
| function send(string) { |
| console.log("sending to serial:" + string.length); |
| if (string.length === 0) |
| return; |
| console.log("sending to serial: [" + string +"]\n"); |
| |
| let view = new TextEncoder('utf-8').encode(string); |
| console.log(view); |
| if (port) { |
| port.send(view); |
| } |
| }; |
| |
| window.onload = _ => { |
| document.querySelector("#connect").onclick = function() { |
| serial.requestPort().then(selectedPort => { |
| port = selectedPort; |
| this.style = "visibility: hidden"; |
| connect(); |
| }); |
| } |
| |
| document.querySelector("#submit").onclick = () => { |
| let source = document.querySelector("#input").value; |
| send(source); |
| } |
| } |
| |
| </script> |
| <button id="connect" style="visibility: initial">Connect To WebUSB Device</button> |
| <br><br><label for="input">Sender: </label> <br> |
| <textarea id="input" rows="25" cols="80">WebUSB!</textarea> |
| <br><button id="submit">Send</button> |
| <br><br> |
| <label for="output">Receiver: </label> <br> |
| <textarea id="output" rows="25" cols="80"></textarea> |
| </body> |
| </html> |
