Depuis sa version 77 Chrome s’est doté d’une nouvelle api assez intéressante : la Web Serial Api. Celle-ci permet la communication avec le port série directement depuis une page web.
Au départ uniquement disponible avec Canary (la version développeur de Chrome), l’api est maintenant accessible via une option expérimentale (et devrait devenir standard d’ici quelques versions).
Cette api est encore en développement, mais elle est suffisamment fonctionnelle pour vous permettre de communiquer avec des micro-contrôleurs. Et notamment de flasher des cartes Arduino !
Comment ça marche ?
Pour le moment (Chrome 79), la Web Serial Api n’est disponible qu’en activant cette option :
chrome://flags/#enable-experimental-web-platform-featuresDe plus, pour des raisons de sécurité, l’api ne sera effective qu’en https ou localhost.
Je n’ai pas trouvé de documentation exhaustive, mais il existe un draft avec quelques exemples de code. Un codelab de Google est également disponible avec quelques billes pour utiliser l’api.
Un peu de code
Je ne vais pas trop m’étaler sur le sujet, car cet article est plus un reminder qu’un tuto, mais en vrac voici quelques info pour bidouiller avec cette api.
Vérifier que l’api est disponible
const isAvailable = () => navigator && navigator.serialConnecter un device
const connect = async () => {
try {
const port = await navigator.serial.requestPort(requestOptions)
await port.open({ baudrate: 57600 })
return port
} catch(e) {
throw new Error('Operation canceled')
}
}La méthode requestPort ouvrira une modale du navigateur listant les différents devices disponibles. Je ne sais pas si cela est amené à changer mais il semble actuellement impossible de faire une connexion auto…
De plus, la connexion sera perdue après un rafraîchissement de la page.
Lire / Ecrire sur le port série
Les méthodes read / write permettent d’envoyer des byteArray sous forme de buffer. Mais grâce au TextEncoder il est facile d’envoyer / recevoir des chaines de caractères :
// pour écrire une chaine
const write = (port, str) => {
const writer = port.writable.getWriter()
writer.write(new TextEncoder('utf-8').encode(str + '\n'))
}
// pour lire une chaine
const read = async (port) => {
const {value, done} = await port.readable.getReader().read()
if (value && !done) {
return new TextDecoder('utf-8').decode(value).trim()
}
return null
}Déconnecter le device
const disconnect = async (port) => {
port.readable.getReader().releaseLock()
port.writable.getWriter().releaseLock()
await port.close()
}Si la méthode read est en attente de lecture, vous aurez besoin de l’annuler afin d’éliminer les erreurs dans la console. Pour ce faire, tout simplement appeler :
port.readable.getReader().cancel()C’est bien tout ça, mais je croyais qu’on allait flasher des Arduino ?
Exact ! Mais on ne va pas rentrer dans le détail du comment ça marche, parce que ça n’a pas vraiment de rapport avec la Web Serial Api…
Il existe une librairie nommée avrgirl-arduino qui permet d’uploader des .hex (fichiers compilés) sur des cartes Arduino. Cette librairie fonctionne très bien depuis NodeJS et a priori (je n’ai pas testé) peut fonctionner dans des Chrome Apps.
En me basant sur cette librairie, j’ai donc pu bricoler un truc en mode proof-of-concept permettant de prendre un fichier .hex et de l’uploader sur un Arduino via la Web Serial Api. Ça marche, mais c’est assez limité pour le moment (ça ne fonctionne que sur des Uno et Nano avec l’ancien bootloader…)
C’est dispo ici : https://github.com/kaelhem/avrbro
Voilà, c’est tout pour aujourd’hui. Vu que c’est mon premier article, je ne m’attends pas à avoir des masses de lecteurs, mais si tu tombes ici par hasard, n’hésites pas à laisser un commentaire, ça m’encouragera peut être à en faire d’autres !
Peace !