Not able to start live transcription when doing starting the app using start:hot script and not able to play the video when starting the app with start script

What happened and what did you expect to happen?

Hi , I am using the repo from chimeSDK -> demo -> browser , I want to render the video and be able to run the live trancription at the same time but the repo behaves very strangely.

when I start the app with start script which ultimately runs node script/webpack-wrapper.js --serve I am able to use the live transcription and not able to play the video in the video element but then I run the app with start:hot script which ultimately uses webpack serve --config ./webpack.config.js I am not able to run the live transcription but able to play the video in the video element I used in html.

This is webpack wrapper.js

  /*
  * This script exists because npm 7 (a) no longer supports npm_config_* (see
  * NPM RFC 21), and (b) turns invocations like `npm run build --app=foo` into
  * calls like `tsc && webpack foo`, which is totally busted.
  */

  const spawn = require('cross-spawn');

  const argv = process.argv;

  console.info('ARGV:', argv);

  const command = 'webpack';
  const args = ['--config', './webpack.config.hot.js'];
  const options = {
    env: {
      ...process.env,
    },
  };

  const serve = argv.indexOf('--serve') !== -1;

  console.info('Should start local server:', serve);

  // This won't be present with npm 6.
  // Exclude file paths.
  const remainingArgs = argv.filter(v => v !== '--serve');
  const lastIndex = remainingArgs.length - 1;
  let possibleApp;
  if (lastIndex >= 2) {
    possibleApp = remainingArgs[lastIndex];
    if (!possibleApp.startsWith('/')) {
      if (possibleApp.startsWith('app=')) {
        possibleApp = possibleApp.substring(4);
      }
      options.env.npm_config_app = possibleApp;
    }
  }

  console.info('Possible app:', possibleApp);

  const webpack = spawn(command, args, options);

  webpack.stdout.on('data', (data) => console.log(data.toString()));
  webpack.stderr.on('data', (data) => console.error(data.toString()));
  webpack.on('close', (status) => {
    console.info('Webpack existed with status', status);

    if (serve) {
      console.info('Starting server.');
      if (possibleApp) {
        process.env.npm_config_app = possibleApp;
      }
      require('../serve.js');
    } else {
      process.exit(status);
    }
  });

This is webpack.config.hot.js

// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0

/**
 * This file is a fork of webpack.config.js. 
 * My apologies. Please make changes in both places if applicable.
 * 
 * It's a fork because they need separate dev/source-map properties so that we can test CSP.
 * 
 * TODO: use tooling to share a base config.
 */

/* eslint-disable */
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
/* eslint-enable */

module.exports = env => {
  console.info('Env:', JSON.stringify(env, null, 2));
  console.info('App:', process.env.npm_config_app);
  const app = env.app || process.env.npm_config_app || 'meetingV2';
  console.info('Using app', app);
  return {
    devServer: {
      hot: true,
      devMiddleware: {
        index: `${app}.html`
      },
      onListening: (server) => {
        // Just so that the code in server.js isn't confused about
        // which app finally made it through the gauntlet.
        process.env.npm_config_app = app;
        const { serve } = require('./server.js');
        serve('127.0.0.1:8081');
      },
      static: {
        publicPath: '/',
      },
      port: 8080,
      proxy: {
        '/join': 'http://127.0.0.1:8081',
        '/deleteAttendee': 'http://127.0.0.1:8081',
        '/end': 'http://127.0.0.1:8081',
        '/fetch_credentials': 'http://127.0.0.1:8081',
        '/audio_file': 'http://127.0.0.1:8081',
        '/stereo_audio_file': 'http://127.0.0.1:8081',
        '/update_attendee_capabilities': 'http://127.0.0.1:8081',
        '/batch_update_attendee_capabilities_except': 'http://127.0.0.1:8081',
        '/get_attendee': 'http://127.0.0.1:8081',
      }
    },
    plugins: [
      new HtmlWebpackPlugin({
        inlineSource: '.(js|css)$',
        template: __dirname + `/app/${app}/${app}.html`,
        filename: __dirname + `/dist/${app}.html`,
        inject: 'head',
      }),
      new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [new RegExp(`${app}`)]),
      new webpack.EnvironmentPlugin({
        IS_LOCAL: process.env.npm_config_is_local === 'true' ? 'true' : 'false'
      })
    ],
    entry: [`./app/${app}/${app}.ts`],
    resolve: {
      extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'],
    },
    output: {
      path: __dirname + '/dist',
      filename: `${app}-bundle.js`,
      publicPath: '/',
      libraryTarget: 'var',
      library: `app_${app}`,
    },
    module: {
      rules: [
        {
          test: /\.(svg)$/,
          type: 'asset/source'
        },
        {
          test: /\.(scss)$/,
          use: [{
            loader: 'style-loader',
            options: {
              insert: 'head',
            },
          }, {
            loader: 'css-loader',
          }, {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  "autoprefixer"
                ]
              }
            },
          }, {
            loader: 'sass-loader',
          }]
        },
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
        },
      ],
    },
    mode: 'development',
    performance: {
      hints: false,
    },
  };
};

Have you reviewed our existing documentation?

[X] GitHub issues
[X] FAQs page
[X] README page
[X] Feature-specific guides

Reproduction steps

add the video element with any source in meetingV2.html file

  and run the app using `npm run start` the app will not play the video , but you can run the live transcription
  run teh app using `npm run start:hot` the app will play the video , but you cannot run the live transcription

Amazon Chime SDK for JavaScript version

not sure

What browsers are you seeing the problem on?

all the browsers

Browser version

Meeting and Attendee ID Information.

No response

aws / amazon-chime-sdk-js