Comments (6)
I suppose it worked so I close the issue. @ghostlexly when someone takes time to help you to solve an issue, you should at least say thank you, your mother should have taught you that.
from jeelizfacefilter.
First, Hi
NextJS runs JavaScript code on the server side.
But some browser APIs like WebGL or MediaStream API cannot run on the server side. Jeeliz FaceFilter relies on WebGL and MediaStream API. So you need to tell NextJS to force execution on the client side.
To run code on the client side with NextJS you can use dynamic.
At the beginning of the component importing the AR component
( the AR Component is AppCanvas - https://github.com/jeeliz/jeelizFaceFilter/blob/master/reactThreeFiberDemo/src/js/components/AppCanvas.js )
import dynamic from 'next/dynamic'
Then:
const AppCanvasDyn = dynamic(
() => {
return import("AppCanvas");
},
{ ssr: false }
);
Then in the rendering, you render < AppCanvasDyn/>
instead of <AppCanvas/>
from jeelizfacefilter.
@ghostlexly does it help to make it work with NextJS?
from jeelizfacefilter.
I suppose it worked so I close the issue. @ghostlexly when someone takes time to help you to solve an issue, you should at least say thank you, your mother should have taught you that.
Thank you brother it really helps. I was stuck on same issue almost 3 hours.
from jeelizfacefilter.
First, Hi
NextJS runs JavaScript code on the server side. But some browser APIs like WebGL or MediaStream API cannot run on the server side. Jeeliz FaceFilter relies on WebGL and MediaStream API. So you need to tell NextJS to force execution on the client side.
To run code on the client side with NextJS you can use dynamic. At the beginning of the component importing the AR component ( the AR Component is AppCanvas - https://github.com/jeeliz/jeelizFaceFilter/blob/master/reactThreeFiberDemo/src/js/components/AppCanvas.js )
import dynamic from 'next/dynamic'
Then:
const AppCanvasDyn = dynamic( () => { return import("AppCanvas"); }, { ssr: false } );
Then in the rendering, you render
< AppCanvasDyn/>
instead of<AppCanvas/>
An 'ARCanvas' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component | null' is not a valid JSX element.
error message is displayed when the yarn build command is run. @types/react": "18.2.25"
`const JEELIZVTOWIDGET = useRef();
useEffect(() => {
if (!JEELIZVTOWIDGET.current) {
import("jeelizvtowidget").then((module) => {
JEELIZVTOWIDGET.current = module.JEELIZVTOWIDGET;
init_VTOWidget({
placeHolder,
canvas,
toggle_loading,
sku: tryOnProduct.ar_model_url,
JEELIZVTOWIDGET: JEELIZVTOWIDGET.current,
});
});
} else {
JEELIZVTOWIDGET.current?.resume(true);
}
return () => {
JEELIZVTOWIDGET.current?.destroy();
// JEELIZVTOWIDGET?.pause(true);
};
}, [tryOnProduct.ar_model_url]);`
I use it this way, No problems with development and build, but I don't know if there are other problems
from jeelizfacefilter.
I suppose it worked so I close the issue. @ghostlexly when someone takes time to help you to solve an issue, you should at least say thank you, your mother should have taught you that.
I just never received the notifications for your messages, but thanks for the solution, even if it's late. I always appreciate the community's help here.
We never had the solution, my company has just removed the filter idea from the roadmap.
from jeelizfacefilter.
Related Issues (20)
- toggle_pause can't clear last face detection data HOT 3
- Refactor the dependency HOT 10
- With the latest version of threeJS library , camera video is not rendering HOT 2
- when adding NN_DEFAULT I am getting TypeError: c.toUpperCase is not a function error HOT 1
- FaceFilter face model transparency issue HOT 3
- can i use navigator.mediaDevices.getUserMedia instead of the camera HOT 1
- how to have a delay before filter is removed HOT 2
- Too much jittering when using fact filter HOT 3
- [feature request] Camera feed on an HTMLVideoElement HOT 3
- Stretched face on Android Chrome HOT 11
- Custom Image not working in facereplacement HOT 1
- README not updated for Three.js JSON HOT 1
- GlassesVTO cannot be demonstrated on Chrome HOT 4
- How could I apply face detection to still images? HOT 1
- small license question- sorry :(
- The camera can't recognize the face at a little distance HOT 2
- I have a few questions about this library HOT 16
- toggle_pause doesn't work with a specific sequence HOT 1
- Changing the neural net throws error at runtime HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jeelizfacefilter.