We're developing software to connect with Zebra printers on React web application. But we couldn't be successful at this and the zebra sources are outdated!
We couldn't use their SDK because it was outdated and when I imported that webpack gave us so many errors that couldn't compile that code. I'm using this SKD wrapper now: https://www.npmjs.com/package/zebra-browser-print-wrapper
I'm getting network error when I'm trying to print using zebra printer.
instrument.ts:159 GET http://localhost:9100/available net::ERR_BLOCKED_BY_CLIENT
Error: TypeError: Failed to fetch
at o.<anonymous> (21.5eb25857.chunk.js:sourcemap:2:2238456)
at 21.5eb25857.chunk.js:sourcemap:2:2237749
at Object.throw (21.5eb25857.chunk.js:sourcemap:2:2237854)
at c (21.5eb25857.chunk.js:sourcemap:2:2236607)
I'm using the sample code in the NPM js package that I've shared.
Zebra software and devices are configurated and working but it doesn't work when I'm trying to connect to it using web application.
Does anyone know how to work with it?
I haven't used the wrapper from NPM but it is possible to integrate that library straight into the react project.
My approach is just to download the Browser Print JavaScript Library from Zebra and import the script in the <head> of the html.
In addition, the device running the browser has to install a native SDK to pair with the printer and send commands. For example, if the web page is running on a chrome browser on Android, you must install the Browser Print SDK for Android on that mobile device first.
Steps:
Download the Browser Print SDK and the Browser Print JavaScript Library, you will need to submit a request from their website
Install the Browser Print App on your device and pair it with the printer
After downloading the JS library, unzip the zebra-browser-print-js-v30216.zip and copy the files BrowserPrint-Zebra-1.0.216.min.js and BrowserPrint-3.0.216.min.js to your react project's /public directory
If you are using Create React App, add the following to <head>
...
<head>
<script src="%PUBLIC_URL%/BrowserPrint-Zebra-1.0.216.min.js" />
<script src="%PUBLIC_URL%/BrowserPrint-3.0.216.min.js" />
</head>
...
Use the device that has the SDK (for example, the Android phone that has installed the Browser Print App) to visit the webpage
Then in the React component, you can use window.BrowserPrint to access the library.
The phone will show up a notification to you to ALLOW or BLOCK the domain name to access the SDK, choose ALLOW then all is done
Screenshot:
Related
We have developed an application with react native expo and when we upload the application to the google store the application freezes and does not run. After some research we tried to run our application with Android studio and we get the following error
“com.android.bundle.errors.EvalIssueException: The android Grandle plugin only kotlin-android extension Grandle plugin version. The following dependencies do not satisfy the required verssion:
Project ‘:expo’ -> org.jetbrain.kotlin:kotlin-grandle-plugin:1.6.10
”
The error is most probably occurred because the application is using expo and does not build react native in a native environment. Does any body know how we can solve this problem. Should we change from react native expo to bare react native?
We uploaded successfully the application to the google store and after we download it to our mobile phone, the application did not load and freezed in a white screen. Also the application does not run with android studio and we can not fix this problem.
I searched whole stackoverflow to fix it, but cant. So... I need to use NPM module in browser (index.html).
Getting error "require is not defined" if using
<script src="./script.js"></script>
in html file, and using const { WebcastPushConnection } = require('tiktok-livestream-chat-connector'); in script.js.
Tried to use browserify, and when i use outputed js script getting error "require.resolve is not a function"
Can anyone help?
tiktok-livestream-chat-connector is described, by its website, as:
A Node.js module to receive and decode livestream events like comments and gifts in realtime from TikTok LIVE by connecting to TikTok's internal WebCast push service.
At no point in its documentation does it mention compatibility with web browsers.
Browserify (and similar tools) can bundle up CommonJS modules into a single file so that they can run in environments which don't support CommonJS modules (e.g. browsers). They can't polyfill all the Node.js features that browsers don't support (like the ability to make raw socket network connections).
If a module needs to run on Node.js then you can't just move it to the browser.
You could write a program for Node.js that runs as a web service and operates as a bridge to whatever the module does. The the browser could connect to your web service with WebSockets or Ajax requests. The project links to an example of one.
I am now learning cordova and i wanna know something.
Example, I have index.html & index.js in my cordova project.
I will build app and install it in my phone.
So the question is those two files index.html & index.js will be in app package folder inside phone local storage?
Thanks
Yes, the files show up in a hidden area on Android and iOS. Anyone with a rooted phone can see them. Don't store security keys in your code.
All Cordova really is is on Android and iOS is a reference to the embedded browser available on both systems and hook to load whatever page you specify in the config.xml. You can even set the config.xml starting file to be your webpack dev server. Therefore your html and JS files have to exist somewhere for the web browser to open them.
I got source code from my android developer, then I loaded it using android studio. There is no process sync, the code just loaded successfully.
After that, I tried to produce new APK. Unfortunately the tool does not appear in my android studio, but when I load different source code, the tool appears (generate a signed apk).
I already cleaned and rebuilt the project, but the result is the same. It's not showing generated signed apk.
I searched in build.gradle, inside app folder, and I also found this in configs:
apply plugin: 'com.android.application'
apply plugin: 'io.fabric'
rebuild the project
Doesn't generate a new singed APK. Go to > Build > Generate Singed Bundle/APK....
Be sure that you open project with your android studio well.
If it, not an android studio project. You should go to. File -> New -> Import Project...
I'd like to know why there isn't a npm / yarn package to Twilio Client Javascript SDK 1.4.
I'm trying to use their voice service, following this tutorial, but in React Native.
Is this package for browser usage only? How could I have access to Twilio.Client on react-native?
I already implemented a programmable-chat with success, using the provided packages twilio-chat and twilio-common.
Meanwhile, is there any way of importing a remote file or using a local javascript file (twilio.min.js) to a react-native app?
Thanks in advance.
EDIT:
Further research lead me to believe that this SDK only work for browsers since it has to deal with audio events, connection status etc.
Correct me if I'm wrong.
I'm now trying to implement react-native-twilio-programmable-voice
.