You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
#2781
Open
4 tasks done
Gagan595 opened this issue
Oct 19, 2023
· 0 comments
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,
},
};
};
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
The text was updated successfully, but these errors were encountered:
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 is webpack.config.hot.js
Have you reviewed our existing documentation?
Reproduction steps
add the video element with any source in meetingV2.html file
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
The text was updated successfully, but these errors were encountered: