Unable to open scanner in embedded remix app.

[SuryanshuTiwari]

I have been working on a project where I need to implement shopify scanner. I have tried both lagacy API and the new api but to no avail.

I am using Remix and the app is embedded.

This is my code

import {Group, Scanner, Features} from '@shopify/app-bridge/actions';

config = {
        apiKey: 'apiKey',
        host: new URLSearchParams(window.location.search).get("host"),
        forceRedirect: true
    };

var app = createApp(config);

var features = Features.create(app);

features.subscribe(Features.Action.REQUEST_UPDATE, function (payload) {
          if (payload.feature[Scanner.Action.OPEN_CAMERA]) {
            var available = payload.feature[Scanner.Action.OPEN_CAMERA].Dispatch;
            // If the Camera Scanner actions were enabled, open a Scanner
            if (available) {
              scanner.dispatch(Scanner.Action.OPEN_CAMERA)
            }
          }
        });
        // Dispatch an action to request access to Scanner actions
        features.dispatch(Features.Action.REQUEST, {
          feature: Group.Scanner,
          action: Scanner.Action.OPEN_CAMERA
        });

When I console.log('handleClick',Scanner.Action.OPEN_CAMERA);

This is what I get

handleClick APP::SCANNER::OPEN::CAMERA

For some reason the console.log inside the features.subscribe is not printing anything.

Any help is greatly appreciated.