SingleEntryJS is a very simple HTML and JS boilerplate app using the Socket Mobile JavaScript Capture Module. If you are looking for the React project example, the repo can be found here.
It shows how to use the Socket Mobile CaptureJS SDK to receive the decoded data from the Socket Mobile devices into an input box.
The connection state of the Socket Mobile device is shown in a status field at the top of the app.
- You will need your Socket Mobile developer ID as well as an app ID. Your developer ID can be found under your developer profile when you log into the Socket Mobile Developer Portal. Then you need to create your appKey. For platform, select Web. For Language/Capture Client, select JavaScript. Your bundleId needs to be in the format of
socketmobile.com.yourappname. - The scanner needs to be paired with your devices in Application Mode. This can be done using the Socket Mobile Companion app (recommended), which can be downloaded from the App Store. To pair your scanner in Application Mode without using Companion app, follow the instructions at: ConfigureInAppMode.
You shouldn't need to install anything in order to use this boilerplate. However, if you want to temporarily host your app securely, you can install ngrok and follow the directions from this blog post (link to my blog post about using SimpleHTTPServer and ngrok).
To run the web app on your laptop, connect an android device to the same machine so you can use adb. Then, use the Socket Mobile Companion app to connect your scanner to your attached device. Once you have successfully connected your scanner to your device, configure your credentials for your app (see below) and then in your project root, run adb forward tcp:18481 tcp:18481 in the command line.
Your generated appInfo should look something like the below...
let appInfo = {
appId: "web:socketmobile.com.singleentryjs",
developerId: '289d7d25-20ea-eb11-bacb-000d3a5b57ef',
appKey: 'MC4CFQDTXgyqNtrLf0MODRcyn2slp3K4/wIVAMe4pKxYfyqGbvVeqv46nqMcEC/P'
};
The capture initialization takes place in an DOMContentLoaded event listener to ensure the cdn is loaded before you try to use the SocketMobile prefix.
window.addEventListener('DOMContentLoaded', ()=>{
var capture = new SocketMobile.Capture();
capture.open(appInfo, onCaptureEvent)
.then(result => {
console.log('opening Capture result: ', result);
updateStatus(`opening Capture result: ${result}`)
})
.catch(err => {
var val;
// error code to watch for to check if the Companion service is running
if(err === SocketMobile.SktErrors.ESKT_UNABLEOPENDEVICE){
val='not able to connect to the service, is it running?'
console.log('no able to connect to the service, is it running?');
}
else {
val = `opening Capture error: ${err}`;
}
console.log(val)
updateStatus(val, err)
});
})
Finally, onCaptureEvent is used to handle the data that comes back from a successfully opened capture instance and apply three conditionals; detecting devices, removing devices and processing scanned data.
const onCaptureEvent = (e, handle) => {
const {CaptureEventIds, Capture} = SocketMobile
if (!e) {
return;
}
switch (e.id) {
case CaptureEventIds.DeviceArrival: //detecting devices; scanner connects to companion/device
...
break
case CaptureEventIds.DeviceRemoval: //removing devices; scanner connects to companion/device
...
break
case CaptureEventIds.DecodedData: //processing captured data; executed when you scan a code
...
break
}
}
We've provided some logic to handle adding devices, removing devices, scanning items and storing those scan results (and connected devices) and adding them to the DOM. Below is what your boilerplate should look like after connecting a scanner and scanning a few tags.
You can check out the live JS demo here.