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

[Gagan595]

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?

• GitHub issues
• FAQs page
• README page
• 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

Browser console logs