search

vladmandic / human

Human: AI-powered 3D Face Detection & Rotation Tracking, Face Description & Recognition, Body Pose Tracking, 3D Hand & Finger Tracking, Iris Analysis, Age & Gender & Emotion Prediction, Gaze Tracking, Gesture Recognition
https://vladmandic.github.io/human/demo/index.html
MIT License
2.37k stars 323 forks source link

DOM errors when using `tfjs-react-native` #327

Closed dongshuai777 closed 1 year ago

dongshuai777 commented 1 year ago

Used in react-native

Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 10): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient. A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

I look forward to your help.

vladmandic commented 1 year ago

There is no information provided here at all, just an error message that I don't even know where from?

Please fill the issue template correctly - it's there for a reason

dongshuai777 commented 1 year ago

There is no information provided here at all, just an error message that I don't even know where from?

Please fill the issue template correctly - it's there for a reason

I'm sorry.

I see from this question that you said that this library can be used in react-native, so I tried to use it in my project.

I want to use "react-native-vision-camera" for face detection, but when I am ready to use "tfjs-react-native", the problems mentioned above will occur when I start Android.

Or could you tell me more details about the use of react-native, which has troubled me for a long time, thank you.

vladmandic commented 1 year ago

it should work, but its not tested.
and in general, tfjs-react-native is non-trivial and somewhat outdated by tfjs team.

but in any case, you should:

danyhiol commented 1 year ago

I also have an issue with react-native (expo). I think I opened a discussion about it, but can't find that discussion.

WARN  The kernel 'Identity' for backend 'webgl' is already registered
 WARN  The kernel 'IFFT' for backend 'webgl' is already registered
 WARN  The kernel 'Imag' for backend 'webgl' is already registered
 WARN  The kernel 'IsFinite' for backend 'webgl' is already registered
 WARN  The kernel 'IsInf' for backend 'webgl' is already registered
 WARN  The kernel 'IsNan' for backend 'webgl' is already registered
 WARN  The kernel 'LeakyRelu' for backend 'webgl' is already registered
 WARN  The kernel 'Less' for backend 'webgl' is already registered
 WARN  The kernel 'LessEqual' for backend 'webgl' is already registered
 WARN  The kernel 'LinSpace' for backend 'webgl' is already registered
 WARN  The kernel 'Log' for backend 'webgl' is already registered
 WARN  The kernel 'Log1p' for backend 'webgl' is already registered
 WARN  The kernel 'LogicalAnd' for backend 'webgl' is already registered
 WARN  The kernel 'LogicalNot' for backend 'webgl' is already registered
 WARN  The kernel 'LogicalOr' for backend 'webgl' is already registered
 WARN  The kernel 'LRN' for backend 'webgl' is already registered
 WARN  The kernel 'LRNGrad' for backend 'webgl' is already registered
 WARN  The kernel 'Max' for backend 'webgl' is already registered
 WARN  The kernel 'Maximum' for backend 'webgl' is already registered
 WARN  The kernel 'MaxPool' for backend 'webgl' is already registered
 WARN  The kernel 'MaxPool3D' for backend 'webgl' is already registered
 WARN  The kernel 'MaxPool3DGrad' for backend 'webgl' is already registered
 WARN  The kernel 'MaxPoolGrad' for backend 'webgl' is already registered
 WARN  The kernel 'MaxPoolWithArgmax' for backend 'webgl' is already registered
 WARN  The kernel 'Mean' for backend 'webgl' is already registered
 WARN  The kernel 'Min' for backend 'webgl' is already registered
 WARN  The kernel 'Minimum' for backend 'webgl' is already registered
 WARN  The kernel 'MirrorPad' for backend 'webgl' is already registered
 WARN  The kernel 'Mod' for backend 'webgl' is already registered
 WARN  The kernel 'Multinomial' for backend 'webgl' is already registered
 WARN  The kernel 'Multiply' for backend 'webgl' is already registered
 WARN  The kernel 'Neg' for backend 'webgl' is already registered
 WARN  The kernel 'NonMaxSuppressionV3' for backend 'webgl' is already registered
 WARN  The kernel 'NonMaxSuppressionV4' for backend 'webgl' is already registered
 WARN  The kernel 'NonMaxSuppressionV5' for backend 'webgl' is already registered
 WARN  The kernel 'NotEqual' for backend 'webgl' is already registered
 WARN  The kernel 'OneHot' for backend 'webgl' is already registered
 WARN  The kernel 'OnesLike' for backend 'webgl' is already registered
 WARN  The kernel 'Pack' for backend 'webgl' is already registered
 WARN  The kernel 'PadV2' for backend 'webgl' is already registered
 WARN  The kernel 'Pow' for backend 'webgl' is already registered
 WARN  The kernel 'Prelu' for backend 'webgl' is already registered
 WARN  The kernel 'Prod' for backend 'webgl' is already registered
 WARN  The kernel 'RaggedGather' for backend 'webgl' is already registered
 WARN  The kernel 'RaggedRange' for backend 'webgl' is already registered
 WARN  The kernel 'RaggedTensorToTensor' for backend 'webgl' is already registered
 WARN  The kernel 'Range' for backend 'webgl' is already registered
 WARN  The kernel 'Real' for backend 'webgl' is already registered
 WARN  The kernel 'RealDiv' for backend 'webgl' is already registered
 WARN  The kernel 'Reciprocal' for backend 'webgl' is already registered
 WARN  The kernel 'Relu' for backend 'webgl' is already registered
 WARN  The kernel 'Relu6' for backend 'webgl' is already registered
 WARN  The kernel 'Reshape' for backend 'webgl' is already registered
 WARN  The kernel 'ResizeBilinear' for backend 'webgl' is already registered
 WARN  The kernel 'ResizeBilinearGrad' for backend 'webgl' is already registered
 WARN  The kernel 'ResizeNearestNeighbor' for backend 'webgl' is already registered
 WARN  The kernel 'ResizeNearestNeighborGrad' for backend 'webgl' is already registered
 WARN  The kernel 'Reverse' for backend 'webgl' is already registered
 WARN  The kernel 'RotateWithOffset' for backend 'webgl' is already registered
 WARN  The kernel 'Round' for backend 'webgl' is already registered
 WARN  The kernel 'Rsqrt' for backend 'webgl' is already registered
 WARN  The kernel 'ScatterNd' for backend 'webgl' is already registered
 WARN  The kernel 'SearchSorted' for backend 'webgl' is already registered
 WARN  The kernel 'Select' for backend 'webgl' is already registered
 WARN  The kernel 'Selu' for backend 'webgl' is already registered
 WARN  The kernel 'Sigmoid' for backend 'webgl' is already registered
 WARN  The kernel 'Sign' for backend 'webgl' is already registered
 WARN  The kernel 'Sin' for backend 'webgl' is already registered
 WARN  The kernel 'Sinh' for backend 'webgl' is already registered
 WARN  The kernel 'Slice' for backend 'webgl' is already registered
 WARN  The kernel 'Softmax' for backend 'webgl' is already registered
 WARN  The kernel 'Softplus' for backend 'webgl' is already registered
 WARN  The kernel 'SpaceToBatchND' for backend 'webgl' is already registered
 WARN  The kernel 'SparseFillEmptyRows' for backend 'webgl' is already registered
 WARN  The kernel 'SparseReshape' for backend 'webgl' is already registered
 WARN  The kernel 'SparseSegmentMean' for backend 'webgl' is already registered
 WARN  The kernel 'SparseSegmentSum' for backend 'webgl' is already registered
 WARN  The kernel 'SparseToDense' for backend 'webgl' is already registered
 WARN  The kernel 'SplitV' for backend 'webgl' is already registered
 WARN  The kernel 'Sqrt' for backend 'webgl' is already registered
 WARN  The kernel 'Square' for backend 'webgl' is already registered
 WARN  The kernel 'SquaredDifference' for backend 'webgl' is already registered
 WARN  The kernel 'Step' for backend 'webgl' is already registered
 WARN  The kernel 'StridedSlice' for backend 'webgl' is already registered
 WARN  The kernel 'StringNGrams' for backend 'webgl' is already registered
 WARN  The kernel 'StringSplit' for backend 'webgl' is already registered
 WARN  The kernel 'StringToHashBucketFast' for backend 'webgl' is already registered
 WARN  The kernel 'Sub' for backend 'webgl' is already registered
 WARN  The kernel 'Sum' for backend 'webgl' is already registered
 WARN  The kernel 'Tan' for backend 'webgl' is already registered
 WARN  The kernel 'Tanh' for backend 'webgl' is already registered
 WARN  The kernel 'Tile' for backend 'webgl' is already registered
 WARN  The kernel 'TopK' for backend 'webgl' is already registered
 WARN  The kernel 'Transform' for backend 'webgl' is already registered
 WARN  The kernel 'Transpose' for backend 'webgl' is already registered
 WARN  The kernel 'Unique' for backend 'webgl' is already registered
 WARN  The kernel 'Unpack' for backend 'webgl' is already registered
 WARN  The kernel 'UnsortedSegmentSum' for backend 'webgl' is already registered
 WARN  The kernel 'ZerosLike' for backend 'webgl' is already registered
 ERROR  TypeError: undefined is not an object (evaluating 'navigator.userAgent.match')
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

navigator.userAgent.match In my case, most of the code comes from here. I adapted that code with expo-camera.

dongshuai777 commented 1 year ago

I have also tried to use expo, but I haven't been able to solve the error messages like you for a long time. So I use react-native-vision-camera, but there is still no substantive progress. There are still many errors, like compatibility problems.

danyhiol commented 1 year ago

@dongshuai777 did you get the same errors? I manage to create a reproduction here.

vladmandic commented 1 year ago

this indicates you're loading multiple versions of tfjs.
with tfjs-react-native you need to be careful which modules you're importing

import * as tf from '@tensorflow/tfjs'; // must be imported before tfjs-react-native
import '@tensorflow/tfjs-react-native';

does just this work? if you still get is already registered, then you cant use @tensorflow/tfjs bundle and need to import individual packages instead.

then at the end add

import { Human } from '@vladmandic/human/dist/human.esm-nobundle.js'; // you cannot use regular one as it already bundles tfjs
danyhiol commented 1 year ago

@vladmandic your solution solved is already registered error. But I am still getting TypeError: undefined is not an object (evaluating 'navigator.userAgent.match') according to the build doc

2022-07-18 08:21:09 STATE: Compile: { name: 'human/browser/esm/nobundle', format: 'esm', platform: 'browser', input: 'src/human.ts', output: 'dist/human.esm-nobundle.js', files: 74, inputBytes: 647823, outputBytes: 302893 }

NOTE I also updated the repo.

vladmandic commented 1 year ago

i just pushed update on github (not on npmjs) to make all navigator calls safe, if you can try...

danyhiol commented 1 year ago

Updated the repo with the new commit. It fixes the previous issue (navigator...). At least the code gets executed:

LOG  15:22:28.782 Human: version: 3.0.3
 LOG  15:22:28.786 Human: tfjs version: 4.2.0
 LOG  15:22:28.786 Human: environment: {"agent": "NodeJS undefined", "backends": [], "browser": true, "cpu": {"flags": []}, "node": false, "offscreen": false, "platform": "undefined undefined", "tensorflow": {}, "tfjs": {"version": "4.2.0"}, "wasm": {}, "webgl": {}, "webgpu": {}}
 LOG  human version: 3.0.3 | tfjs version: 4.2.0
 LOG  options: minConfidence:0.6 minSize:224 maxTime:30000 blinkMin:10 blinkMax:800 threshold:0.5 distanceMin:0.4 distanceMax:1 mask:false rotation:true order:2 multiplier:25 min:0.2 max:0.8
 LOG  initializing webcam...
 LOG  loading human models...
 WARN  Aborted(no native wasm support detected)
 WARN  Initialization of backend wasm failed
 WARN  Make sure the server can serve the `.wasm` file relative to the bundled js file. For more details see https://github.com/tensorflow/tfjs/blob/master/tfjs-backend-wasm/README.md#using-bundlers
 WARN  Possible Unhandled Promise Rejection (id: 0):
Error: canvas error: attempted to run in browser but DOM is not defined
L0@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:122436:60
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:122657:23
generatorResume@[native code]
asyncGeneratorStep@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21008:26
_next@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21027:29
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21032:14
tryCallTwo@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25629:9
doResolve@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25760:25
Promise@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25648:14
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21024:25
updateBackend@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:122675:40
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:123317:35
generatorResume@[native code]
asyncGeneratorStep@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21008:26
_next@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21027:29
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21032:14
tryCallTwo@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25629:9
doResolve@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25760:25
Promise@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25648:14
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21024:25
_dr@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:123319:21
dr@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:123312:21
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:123372:122
generatorResume@[native code]
asyncGeneratorStep@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21008:26
_next@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21027:29
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21032:14
tryCallTwo@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25629:9
doResolve@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25760:25
Promise@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25648:14
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21024:25
_$e@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:123419:21
$e@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:123366:21
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:137523:83
generatorResume@[native code]
asyncGeneratorStep@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21008:26
_next@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21027:29
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21032:14
tryCallTwo@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25629:9
doResolve@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25760:25
Promise@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25648:14
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21024:25
load@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:137530:32
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:99430:25
generatorResume@[native code]
asyncGeneratorStep@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21008:26
_next@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21027:29
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21032:14
tryCallTwo@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25629:9
doResolve@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25760:25
Promise@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25648:14
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21024:25
init@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:99437:26
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:99441:11
commitHookEffectListMount@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:12644:38
commitPassiveMountOnFiber@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:13666:44
commitPassiveMountEffects_complete@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:13638:40
commitPassiveMountEffects_begin@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:13628:47
commitPassiveMountEffects@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:13618:40
flushPassiveEffectsImpl@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:14847:34
flushPassiveEffects@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:14807:43
performSyncWorkOnRoot@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:14301:28
performSyncWorkOnRoot@[native code]
flushSyncCallbacks@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:5715:36
flushSyncCallbacksOnlyInLegacyMode@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:5700:29
scheduleUpdateOnFiber@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:13979:47
updateContainer@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:16065:41
render@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:16556:24
renderApplication@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:91113:78
run@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:90739:28
runApplication@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:90790:28
__callFunction@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:20178:36
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:19940:31
__guard@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:20130:15
callFunctionReturnFlushedQueue@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:19939:21
callFunctionReturnFlushedQueue@[native code]
vladmandic commented 1 year ago

All the browser demos use Dom canvas. For tfjs-react-native, you need your own front-end app and use library just as a library.

dongshuai777 commented 1 year ago

import '@tensorflow/tfjs-react-native'; import { Human } from '@vladmandic/human/dist/human.esm-nobundle.js';

I tried not to import tfjs, and no is already registered warning , but the following problem occurred.

ERROR TypeError: Cannot read property 'match' of undefined, js engine: hermes WARN Possible Unhandled Promise Rejection (id: 0): TypeError: Cannot read property 'Human' of undefined TypeError: Cannot read property 'Human' of undefined

vladmandic commented 1 year ago

import '@tensorflow/tfjs-react-native'; import { Human } from '@vladmandic/human/dist/human.esm-nobundle.js';

I tried not to import tfjs, and no is already registered warning , but the following problem occurred.

ERROR TypeError: Cannot read property 'match' of undefined, js engine: hermes WARN Possible Unhandled Promise Rejection (id: 0): TypeError: Cannot read property 'Human' of undefined TypeError: Cannot read property 'Human' of undefined

You're using version before the fix that, see notes above.

danyhiol commented 1 year ago

@vladmandic I don't use canvas or any Dom element. You can check the reproduction repo. What is taken from the example is only JavaScript-Code. Or is there some other way of doing this?

vladmandic commented 1 year ago

You're using built-in webcammethod which is browser only.

To avoid all DOM, you need to create tensor with image data and pass it to detectmethod.

danyhiol commented 1 year ago

human.webcam I guess this is the function/method to use the webcam. This is not part of my code. Only human.version human.tf.version human.load() and human.warmup() are being called. There is not even a detectionLoop method. The reproduction is minimal, just for getting the core functionality to work.

vladmandic commented 1 year ago

i'd have to reproduce locally, but working on another project at the moment so this will have to wait a little bit...

dongshuai777 commented 1 year ago

Updated the repo with the new commit. It fixes the previous issue (navigator...). At least the code gets executed:

使用新提交更新了repo。它修复了以前的问题（导航器...）。至少代码得到了执行：

LOG  15:22:28.782 Human: version: 3.0.3
 LOG  15:22:28.786 Human: tfjs version: 4.2.0
 LOG  15:22:28.786 Human: environment: {"agent": "NodeJS undefined", "backends": [], "browser": true, "cpu": {"flags": []}, "node": false, "offscreen": false, "platform": "undefined undefined", "tensorflow": {}, "tfjs": {"version": "4.2.0"}, "wasm": {}, "webgl": {}, "webgpu": {}}
 LOG  human version: 3.0.3 | tfjs version: 4.2.0
 LOG  options: minConfidence:0.6 minSize:224 maxTime:30000 blinkMin:10 blinkMax:800 threshold:0.5 distanceMin:0.4 distanceMax:1 mask:false rotation:true order:2 multiplier:25 min:0.2 max:0.8
 LOG  initializing webcam...
 LOG  loading human models...
 WARN  Aborted(no native wasm support detected)
 WARN  Initialization of backend wasm failed
 WARN  Make sure the server can serve the `.wasm` file relative to the bundled js file. For more details see https://github.com/tensorflow/tfjs/blob/master/tfjs-backend-wasm/README.md#using-bundlers
 WARN  Possible Unhandled Promise Rejection (id: 0):
Error: canvas error: attempted to run in browser but DOM is not defined
L0@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:122436:60
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:122657:23
generatorResume@[native code]
asyncGeneratorStep@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21008:26
_next@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21027:29
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21032:14
tryCallTwo@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25629:9
doResolve@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25760:25
Promise@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25648:14
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21024:25
updateBackend@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:122675:40
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:123317:35
generatorResume@[native code]
asyncGeneratorStep@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21008:26
_next@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21027:29
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21032:14
tryCallTwo@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25629:9
doResolve@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25760:25
Promise@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25648:14
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21024:25
_dr@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:123319:21
dr@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:123312:21
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:123372:122
generatorResume@[native code]
asyncGeneratorStep@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21008:26
_next@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21027:29
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21032:14
tryCallTwo@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25629:9
doResolve@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25760:25
Promise@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25648:14
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21024:25
_$e@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:123419:21
$e@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:123366:21
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:137523:83
generatorResume@[native code]
asyncGeneratorStep@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21008:26
_next@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21027:29
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21032:14
tryCallTwo@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25629:9
doResolve@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25760:25
Promise@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25648:14
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21024:25
load@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:137530:32
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:99430:25
generatorResume@[native code]
asyncGeneratorStep@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21008:26
_next@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21027:29
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21032:14
tryCallTwo@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25629:9
doResolve@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25760:25
Promise@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:25648:14
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:21024:25
init@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:99437:26
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:99441:11
commitHookEffectListMount@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:12644:38
commitPassiveMountOnFiber@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:13666:44
commitPassiveMountEffects_complete@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:13638:40
commitPassiveMountEffects_begin@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:13628:47
commitPassiveMountEffects@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:13618:40
flushPassiveEffectsImpl@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:14847:34
flushPassiveEffects@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:14807:43
performSyncWorkOnRoot@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:14301:28
performSyncWorkOnRoot@[native code]
flushSyncCallbacks@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:5715:36
flushSyncCallbacksOnlyInLegacyMode@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:5700:29
scheduleUpdateOnFiber@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:13979:47
updateContainer@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:16065:41
render@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:16556:24
renderApplication@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:91113:78
run@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:90739:28
runApplication@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:90790:28
__callFunction@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:20178:36
<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:19940:31
__guard@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:20130:15
callFunctionReturnFlushedQueue@<URL>node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:19939:21
callFunctionReturnFlushedQueue@[native code]

How do you use the newly submitted updates in your project?yarn link?

danyhiol commented 1 year ago

yarn add "git://github.com/<username>/<package>.git#<commit>"

dongshuai777 commented 1 year ago

@danyhiol Have you made any progress lately? I can't recognize faces on the camera right now.

vladmandic commented 1 year ago

@danyhiol i'm having problems reproducing your issue locally, can you share your reproduction
(either a full project or a standalone reproduction, but needs to be complete as many items depend on environment setup)

danyhiol commented 1 year ago

@dongshuai777 did you get the same errors? I manage to create a reproduction here.

@vladmandic I already provided a reproduction repo here.

vladmandic commented 1 year ago

@dongshuai777 did you get the same errors? I manage to create a reproduction here.

@vladmandic I already provided a reproduction repo here.

sorry about that, i'll take a look

vladmandic commented 1 year ago

i've cloned your repo and yarn run web works fine on my system:

07:50:51.858 Human: version: 3.0.4
human.esm-nobundle.js:7 07:50:51.859 Human: tfjs version: 4.2.0
human.esm-nobundle.js:7 07:50:51.859 Human: environment: {browser: true, node: false, worker: false, platform: 'Windows NT 10.0; Win64; x64', agent: 'Mozilla/5.0 AppleWebKit/537.36 Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.70', …}
index.js:77 Running application "main" with appParams:
 {rootTag: '#root'} 
Development-level warnings: ON.
Performance optimizations: OFF.
index.tsx:59 human version: 3.0.4 | tfjs version: 4.2.0
index.tsx:65 options: minConfidence:0.6 minSize:224 maxTime:30000 blinkMin:10 blinkMax:800 threshold:0.5 distanceMin:0.4 distanceMax:1 mask:false rotation:true order:2 multiplier:25 min:0.2 max:0.8
index.tsx:71 initializing webcam...
index.tsx:73 loading human models...
human.esm-nobundle.js:7 07:50:52.019 Human: available backends: (3) ['cpu', 'webgl', 'wasm']
human.esm-nobundle.js:7 07:50:52.019 Human: setting backend: ['webgl']
human.esm-nobundle.js:7 07:50:52.019 Human: backend: webgl flags: {WEBGL_USE_SHAPES_UNIFORMS: true, WEBGL_EXP_CONV: true}
human.esm-nobundle.js:7 07:50:52.025 Human: registered kernels: ['floormod']
human.esm-nobundle.js:7 07:50:52.025 Human: configuration: {backend: 'webgl', modelBasePath: 'https://cdn.jsdelivr.net/npm/@vladmandic/human/models', cacheModels: true, validateModels: true, wasmPath: 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-wasm@4.2.0/dist/', …}
human.esm-nobundle.js:7 07:50:52.025 Human: tf flags: {IS_BROWSER: true, IS_NODE: false, CPU_HANDOFF_SIZE_THRESHOLD: 128, CANVAS2D_WILL_READ_FREQUENTLY_FOR_GPU: false, WEBGPU_CPU_HANDOFF_SIZE_THRESHOLD: 1000, …}
human.esm-nobundle.js:7 07:50:52.048 Human: load: {model: 'blazeface', url: 'indexeddb://blazeface', bytes: 538928}
human.esm-nobundle.js:7 07:50:52.050 Human: load: {model: 'liveness', url: 'indexeddb://liveness', bytes: 592976}
human.esm-nobundle.js:7 07:50:52.053 Human: load: {model: 'antispoof', url: 'indexeddb://antispoof', bytes: 853098}
human.esm-nobundle.js:7 07:50:52.057 Human: load: {model: 'facemesh', url: 'indexeddb://facemesh', bytes: 1477958}
human.esm-nobundle.js:7 07:50:52.064 Human: load: {model: 'iris', url: 'indexeddb://iris', bytes: 2599092}
human.esm-nobundle.js:7 07:50:52.080 Human: load: {model: 'faceres', url: 'indexeddb://faceres', bytes: 6978814}
index.tsx:75 initializing human...
index.tsx:76 face embedding model: faceres  
index.tsx:86 loading face database...
human.esm-nobundle.js:7 07:50:53.087 Human: compile pass: {models: Array(6), kernels: 106}
human.esm-nobundle.js:7 07:50:53.954 Human: warmup full 1873 ms

does this error occur only when you run yarn run android or also when you run yarn run web
i don't have android sdk nor i plan to go in that direction right now.

but i did notice that @tensorflow/tfjs-react-native package was not updated for over a year and has some obsolete dependencies - i'll open an issue for that with tfjs team.

danyhiol commented 1 year ago

@vladmandic it is normal for yarn web to work as the web has the DOM. But when building for mobile, there is no DOM. So the error only occurs when running yarn run android. Without android SDK or XCode, I don't see how the bug can be replicated locally. Maybe try running on a real device using Expo? (yarn start)

vladmandic commented 1 year ago

i've just added one blind change to try to detect if environment is react-native and if yes, use react-native-canvas, but...unfortunately, i don't have time right now to do full-fledged android development or test this fully.

npm install react-native-webview npm install react-native-canvas

and then in your code:

import Canvas from 'react-native-canvas';

human.env.Canvas = Canvas // monkey-patch human so it uses external canvas library
vladmandic commented 1 year ago

any updates?

vladmandic commented 1 year ago

issue will be closed soon if there are no updates.

danyhiol commented 1 year ago

@vladmandic I'll check this in-depth on the weekend and let you know.

smvorwerk commented 1 year ago

@danyhiol any luck?

dongshuai777 commented 1 year ago

I am sorry that I am busy with other work and have no time to study deeply at present, look forward to the good news from danyhiol !!

vladmandic commented 1 year ago

this issue has been idle without updates for 2 weeks now, so i'm closing it at this point - it can be reopened once there is new information.

human version 3.0.5 with a possible fix has been published.