video-hint-end

Video hint - completed code

Get a brief description of a video using the Google Cloud Video Intelligence API.

video-hint-final.mp4

To run with a real firebase project (recommended)

Run these commands in your terminal:

1. Navigate to this web app folder and install dependencies:

cd video-hint-end
npm install
(cd functions && npm install)

2. Specify which project Firebase should use:

firebase use <name-of-your-project>
# For example: firebase use codelab-ai-extensions

3. Enable the web frameworks experiment:

firebase experiments:enable webframeworks

4. Initialize Firebase hosting:

firebase init hosting

Use default options for all prompts.

5. Deploy the Firestore and Cloud Storage Security Rules:

firebase deploy --only firestore:rules,storage

6. Deploy the Cloud Functions in the functions folder:

firebase deploy --only functions

7. An Extensions Manifest is already provided for you in this folder. However you need to edit the extensions/storage-label-videos.env file with your actual bucket name:

INPUT_VIDEOS_BUCKET=<your-bucket-name>
OUTPUT_BUCKET=<your-bucket-name>

8. You also need to edit the extensions/text-to-speech.env file with your actual bucket name:

BUCKET_NAME=<your-bucket-name>

9. To deploy the extensions used in this web app, run this command in your terminal:

Note: If you are asked Would you like to delete any other extensions, select No.

firebase deploy --only extensions

10. Edit the lib/firebase/firebase-config.js file with your Firebase configuration.

11. Back in your terminal, run the web app:

firebase emulators:start --only hosting

12. Open http://localhost:5000/ in your browser (or whatever URL is presented to your in your terminal) to see the result.

To run locally with local emulators (not recommended)

This has no AI functionality.

This is only useful for codelab authors, or learners who are unable to use a real Firebase project or real Google Cloud services.

1. In your terminal, navigate to this web app folder:

cd video-hint-end

2. Replace the .env.development file with these contents:

NEXT_PUBLIC_IS_TEST_MODE=true

3. Run this command in your terminal:

export NEXT_PUBLIC_IS_TEST_MODE=true

4. In the same terminal session from the previous step, run this command:

firebase emulators:start --project demo-codelab-video-hint

5. Edit the lib/firebase/firebase-config.js file with your emulator configuration.

6. In a new terminal tab, run these commands:

npm install
npm run dev

7. Open http://localhost:3000/ in your browser to see the result.

Video credits

This repository includes videos that are useful for uploading to try out the Video Hint app. You can find sources for the videos in the ./lib/exampleVideos.js file.