Implement DeepAR on React App

Help & Questions
,
1

Hi, does anyone know how to implement DeepAR on React App? I’m not sure if deepar in NPM is outdated or if I’m not doing right. Can I have the code or sample on how to mount this DeepAR in React App?

2

Hello,The web SDK is a javascript library and you should be able to use it on a web page that works with javascript, You just need to wrap the javascript component. We don’t have an example of this but it shouldn’t be too difficult

3

FWIW, we are using the latest version in NPM in our app – 5.1.1, IIRC, which matches the SDK documentation as to what the latest version is.

This is a stripped-down version of our code:

import * as deepar from "deepar";
...
class RecordVideo extends React.Component {
    state = {
        deepARCanvas: React.createRef(),
...
        // this block called inside componentDidMount
        if (!deepAR) {
            deepAR = await deepar.initialize({
                licenseKey: DEEP_AR_API_KEY,
                canvas: this.state.deepARCanvas.current,
            });
        }

        // this block inside componentWillUnmount
        if (deepAR) {
            deepAR.stopVideo();
            deepAR.shutdown();
            deepAR = null;
        }

        // this block inside render()
                            <canvas
                                ref={deepARCanvas} ...

Hopefully this helps!

1 Like