We Keep Coding

How would I send a file with Web Serial API?

I am a total newb, I just started looking into this today. I have a a chromebook running chrome Version 96.0.4664.111 (Official Build) (64-bit), and a raspberry pi pico which I have loaded python bootloader on (drag & drop). I am trying to access the pico from my browser serially to load my source code since I cannot install thawny on my chromebook. I have pieced together this javascript function that uses web serial api to connect to the pico.
const filters = [
{ usbVendorId: 0x2E8A, usbProductId: 0x0003 },
{ usbVendorId: 0x2E8A, usbProductId: 0x0005 }
];
// Prompt user to select an Arduino Uno device.
const port = await navigator.serial.requestPort({ filters });
const { usbProductId, usbVendorId } = port.getInfo();
// Wait for the serial port to open.
await port.open({ baudRate: 9600 });
const textDecoder = new TextDecoderStream();
const readableStreamClosed = port.readable.pipeTo(textDecoder.writable);
const reader = textDecoder.readable.getReader();
// Listen to data coming from the serial device.
while (true) {
const { value, done } = await reader.read();
if (done) {
// Allow the serial port to be closed later.
reader.releaseLock();
break;
}
// value is a Uint8Array.
console.log(value);
}
// Listen to data coming from the serial device.
while (true) {
const { value, done } = await reader.read();
if (done) {
// Allow the serial port to be closed later.
reader.releaseLock();
break;
}
// value is a string.
console.log(value);
}
const textEncoder = new TextEncoderStream();
const writableStreamClosed = textEncoder.readable.pipeTo(port.writable);
const writer = textEncoder.writable.getWriter();
await writer.write("hi");
// Allow the serial port to be closed later.
writer.releaseLock();
I cannot find a way to make this program upload a file, I would really appreciate it if someone could help me out.
Please excuse me if I'm being unclear or extremley stupid, I am completley new to this and I am really tired from new-years last night. Thanks!

I have found a suitable solution to my question, tinkerdoodle.cc.

NAPI Call Emit inside a c++ Lambda fucnction

I'm working on a N-API addon to capture video frame using windows graphic capture API , extract frame bytes and send it back to JavaScript.
I have tried the event emitter but I can't get the data.
Here is my C++ code:
#include <napi.h>
// my other include
Napi::Value startCapture(const Napi::CallbackInfo &info){
Napi::Env env = info.Env();
Napi::Function emit = info[0].As<Napi::Function>();
emit.Call({Napi::String::New(env, "start")});
auto framePool = winrt::Direct3D11CaptureFramePool::Create(
device, //d3d device
winrt::DirectXPixelFormat::B8G8R8A8UIntNormalized,
2,
itemSize);
// capture session
auto session = framePool.CreateCaptureSession(item);
// Lambda Function
framePool.FrameArrived([session, d3dDevice, d3dContext, &emit, &env](auto &framePool, auto &) {
auto frame = framePool.TryGetNextFrame();
auto frameTexture = GetDXGIInterfaceFromObject<ID3D11Texture2D>(frame.Surface());
// Extraction the byte and so on ...
emit.Call({Napi::String::New(env, "data"), Napi::String::New(env, "data ...")});
}
session.StartCapture();
emit.Call({Napi::String::New(env, "end")});
return Napi::String::New(env, "OK");
}
here my JavaScript code calling the start capture function
<!-- language-all: js -->
const EventEmitter = require('events').EventEmitter
const addon = require('./build/myaddon.node')
const emitter = new EventEmitter()
emitter.on('start', () => {
console.log('Start Recording ...')
})
emitter.on('data', (evt) => {
console.log(evt);
})
emitter.on('end', () => {
console.log('Stop Recording ...')
})
addon.startCapture(emitter.emit.bind(emitter))
Normally my output should be an infinite loop of data messages until I stop it
Start Recording …
data data
.
.
.
data
After looking to the lambda function framePool.FrameArrived it seems that it's running on a different thread than the startCapture function if I understand the lambda function concept correctly, I just wanna to found a way on how I can stream those messages to JavaScript using event Emitter or any other recommendation is well welcoming.

//instead of
Napi::Env env = info.Env();
Napi::Function emit = info[0].As<Napi::Function>();
emit.Call({Napi::String::New(env, "data"), Napi::String::New(env, "data ...")});
//try
Napi::Env env = info.Env();
Napi::Function fn = info[0].As<Napi::Function>();
emit = Persistent(fn);
emit.SuppressDestruct();
emit.Value().Call({Napi::String::New(env, "data"), Napi::String::New(env, "data ...")});

Connecting to a running process in Winappdriver using Javascript

I am fairly new to JS/Winappdriver.
The application I am trying to test is a windows based "Click Once" application from .Net, so I have to go to a website from IE and click "Install". This will open the application.
Once the application is running, I have no way to connect the application to perform my UI interactions while using JavaScript.
Using C#, I was looping through the processes looking for a process name, get the window handle, convert it to hex, add that as a capability and create the driver - it worked. Sample code below,
public Setup_TearDown()
{
string TopLevelWindowHandleHex = null;
IntPtr TopLevelWindowHandle = new IntPtr();
foreach (Process clsProcess in Process.GetProcesses())
{
if (clsProcess.ProcessName.StartsWith($"SomeName-{exec_pob}-{exec_env}"))
{
TopLevelWindowHandle = clsProcess.Handle;
TopLevelWindowHandleHex = clsProcess.MainWindowHandle.ToString("x");
}
}
var appOptions = new AppiumOptions();
appOptions.AddAdditionalCapability("appTopLevelWindow", TopLevelWindowHandleHex);
appOptions.AddAdditionalCapability("ms:experimental-webdriver", true);
appOptions.AddAdditionalCapability("ms:waitForAppLaunch", "25");
AppDriver = new WindowsDriver<WindowsElement>(new Uri(WinAppDriverUrl), appOptions);
AppDriver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(60);
}
How do I do this in Javascript ? I can't seem to find any code examples.
Based on an example from this repo, I tried the following in JS to find the process to latch on to but without luck.
import {By2} from "selenium-appium";
// this.appWindow = this.driver.element(By2.nativeAccessibilityId('xxx'));
// this.appWindow = this.driver.element(By2.nativeXpath("//Window[starts-with(#Name,\"xxxx\")]"));
// this.appWindow = this.driver.elementByName('WindowsForms10.Window.8.app.0.13965fa_r11_ad1');
// thisappWindow = this.driver.elementByName('xxxxxxx');
async connectAppDriver(){
await this.waitForAppWindow();
var appWindow = await this.appWindow.getAttribute("NativeWindowHandle");
let hex = (Number(ewarpWindow)).toString(16);
var currentAppCapabilities =
{
"appTopLevelWindow": hex,
"platformName": "Windows",
"deviceName": "WindowsPC",
"newCommandTimeout": "120000"
}
let driverBuilder = new DriverBuilder();
await driverBuilder.stopDriver();
this.driver = await driverBuilder.createDriver(currentEwarpCapabilities);
return this.driver;
}
I keep getting this error in Winappdriver
{"status":13,"value":{"error":"unknown error","message":"An unknown error occurred in the remote end while processing the command."}}
I've also opened this ticket here.
It seems like such an easy thing to do, but I couldn't figure this one out.
Any of nodes packages I could use to get the top level window handle easily?
I am open to suggestions on how to tackle this issue while using JavaScript for Winappdriver.

Hope this helps some one out there,
Got around this by creating an exe using C# that generated hex of the app to connect based on the process name, it looks like something like this.
public string GetTopLevelWindowHandleHex()
{
string TopLevelWindowHandleHex = null;
IntPtr TopLevelWindowHandle = new IntPtr();
foreach (Process clsProcess in Process.GetProcesses())
{
if (clsProcess.ProcessName.StartsWith(_processName))
{
TopLevelWindowHandle = clsProcess.Handle;
TopLevelWindowHandleHex = clsProcess.MainWindowHandle.ToString("x");
}
}
if (!String.IsNullOrEmpty(TopLevelWindowHandleHex))
return TopLevelWindowHandleHex;
else
throw new Exception($"Process: {_processName} cannot be found");
}
Called it from JS to get the hex of the top level window handle, like this,
async getHex () {
var pathToExe =await path.join(process.cwd(), "features\\support\\ProcessUtility\\GetWindowHandleHexByProcessName.exe");
var pathToDir =await path.join(process.cwd(), "features\\support\\ProcessUtility");
const result = await execFileSync(pathToExe, [this.processName]
, {cwd: pathToDir, encoding: 'utf-8'}
, async function (err, data) {
console.log("Error: "+ err);
console.log("Data(hex): "+ data);
return JSON.stringify(data.toString());
});
return result.toString().trim();
}
Used the hex to connect to the app like this,
async connectAppDriver(hex) {
console.log(`Hex received to connect to app using hex: ${hex}`);
const currentAppCapabilities=
{
"browserName": '',
"appTopLevelWindow": hex.trim(),
"platformName": "Windows",
"deviceName": "WindowsPC",
"newCommandTimeout": "120000"
};
const appDriver = await new Builder()
.usingServer("http://localhost:4723/wd/hub")
.withCapabilities(currentAppCapabilities)
.build();
await driver.startWithWebDriver(appDriver);
return driver;
}

Solution:
In WebDriverJS (used by selenium / appium), use getDomAttribute instead of getAttribute. Took several hours to find :(
element.getAttribute("NativeWindowHandle")
POST: /session/270698D2-D93B-4E05-9FC5-3E5FBDA60ECA/execute/sync
Command not implemented: POST: /session/270698D2-D93B-4E05-9FC5-3E5FBDA60ECA/execute/sync
HTTP/1.1 501 Not Implemented
let topLevelWindowHandle = await element.getDomAttribute('NativeWindowHandle')
topLevelWindowHandle = parseInt(topLevelWindowHandle).toString(16)
GET /session/DE4C46E1-CC84-4F5D-88D2-35F56317E34D/element/42.3476754/attribute/NativeWindowHandle HTTP/1.1
HTTP/1.1 200 OK
{"sessionId":"DE4C46E1-CC84-4F5D-88D2-35F56317E34D","status":0,"value":"3476754"}
and topLevelWindowHandle have hex value :)

Is there an example site that uses navigator.serial?

I noticed that Chrome Canary has an implementation of a web serial api at navigator.serial, and I'm interested in looking at it. The previous API for serial ports chrome.serial implements listener callbacks, while this new API seems to deal in streams.
I've looked at the example at https://wicg.github.io/serial/#usage-example, but it seems pretty bare bones.
<html>
<script>
var port;
var buffy = new ArrayBuffer(1);
var writer;
buffy[0]=10;
const test = async function () {
const requestOptions = {
// Filter on devices with the Arduino USB vendor ID.
//filters: [{ vendorId: 0x2341 }],
};
// Request an Arduino from the user.
port = await navigator.serial.requestPort(requestOptions);
// Open and begin reading.
await port.open({ baudrate: 115200 });
//const reader = port.in.getReader();
const reader = port.readable.getReader();
writer = port.writable.getWriter();
//const writer = port.writable.getWriter();
//writer.write(buffy);
while (true) {
const {done, data} = await reader.read();
if (done) break;
console.log(data);
}
} // end of function
</script>
<button onclick="test()">Click It</button>
</html>
I'd like to find a working example, and eventually find a way to migrate an app from chrome.serial to navigator.serial

Hey battling this as well. To enable this 'experimental api', open Canary, and punch this into the url: chrome://flags/#enable-experimental-web-platform-features
Enable that feature. Now you can use it.

Web bluetooth Notification only few response

I am learning use web bluetooth api to write web app and use chrome/chromium run it .
But the notification only response few times, I don't know why and how to debug it(to see what happened).
The bluetooth peripheral is an oximeter, use BLE to send real-time spo2, heart rate, etc. And my browser use Chromium 60.0.3112.78 built on Debian 9.1, running on Debian 9.1 (64 bit) .
Below is my javascript:
var serviceUuid = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
characteristicUuid = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" ;
// Sorry, I hide the UUID.
document.querySelector('#button').addEventListener('click', function(event) {
onStartButtonClick();
}});
async function onStartButtonClick(){
let options = {};
options.acceptAllDevices = true;
options.optionalServices = [serviceUuid];
try{
const device = await navigator.bluetooth.requestDevice(options);
device.addEventListener('gattserverdisconnected', onDisconnected);
console.log('Got device:', device.name);
console.log('id:', device.id);
console.log('Connecting to GATT Server...');
const server = await device.gatt.connect();
console.log('Getting Service...');
const service = await server.getPrimaryService(serviceUuid);
console.log('Getting Characteristic...');
myCharacteristic = await service.getCharacteristic(characteristicUuid);
myCharacteristic.addEventListener('characteristicvaluechanged',
handleNotifications);
await myCharacteristic.startNotifications();
console.log('> Notifications started');
} catch(error) {
console.log('Argh! ' + error);
}
}
async function disconnect(){
await myCharacteristic.stopNotifications();
onDisconnected();
}
function onDisconnected(event) {
// Object event.target is Bluetooth Device getting disconnected.
console.log('> Bluetooth Device disconnected');
}
var tmp_count=0;
async function handleNotifications(event) {
// I will read data by Uint8Array.
// var databuf = new Uint8Array(event.target.value.buffer);
tmp_count++;
console.log(tmp_count);
}
Console of chromium display:
03:41:49.893 (index):192 Connecting to GATT Server...
03:41:50.378 (index):195 Getting Service...
03:41:51.237 (index):198 Getting Characteristic...
03:41:51.359 (index):204 > Notifications started
03:41:51.781 (index):228 1
03:41:51.782 (index):228 2
03:42:22.573 (index):217 > Bluetooth Device disconnected
It's no response after 03:41:51.782 (index):228 2 , so I turn turn off oximeter.
What is the problem ? And what can I do ?
Thanks.

First, note that Chrome supports Android, Chrome OS, macOS at this time.
Try using some of the tips on https://www.chromium.org/developers/how-tos/file-web-bluetooth-bugs such as chrome://bluetooth-internals,
nRF Connect for Android or nRF Connect for iOS
If you can receive continuous notifications in those apps, but not in Chrome, there's a bug. Please file details on how to reproduce it, logs you've collected, there: https://crbug.com/new