I am making a website with a p5 canvas that uses your webcam and displays it on the canvas. I am using the ml5 image classifier of MobileNet, and I also want it to display the results from google vision. I found the node.js package @google-cloud/vision, and as node.js isn't compatible with the browser, I had trouble making it work. Can you help me?
I tried using webpack, with this config:
const path = require('path');const nodeExternals = require('webpack-node-externals');const fs = require('fs');module.exports = { entry: './node_modules/@google-cloud/vision/build/src/index.js', target: 'web', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /(fs|require)/, loader: 'loader.js', }, { test: /\.js$/, loader: 'babel-loader', exclude: /(fs|require|node_modules)/, }, ], }, resolve: { fallback: { stream: require.resolve('stream-browserify'), buffer: require.resolve("buffer"), crypto: require.resolve("crypto-browserify"), assert: require.resolve("assert"), path: require.resolve("path-browserify"), querystring: require.resolve("querystring-es3"), os: require.resolve("os-browserify"), url: require.resolve("url"), https: require.resolve("https-browserify"), http: require.resolve("stream-http"), fs: require.resolve('browserify-fs'), child_process: require.resolve('cross-spawn'), zlib: require.resolve("browserify-zlib"), }, modules: ['node_modules', ], }, externals: [nodeExternals()], mode: 'production',};I expected to be able to import the bundle.js into my html, and then use the ImageAnnotator function as if it was already imported. Instead, I received errors that fs and child-process were not defined. I couldn't fix that error, so I tried other bundlers like rollup, parcel, and browserify, but none of them worked. I tried using the require.js library of r.js but that didn't work either.To view my code, the website is at:Github Website