This is not an official Google product.
This is the code for the Video Intelligence API demo presented at Google Cloud Next 2017. See a video of the presentation here. Big thank you to Alex Wolfe for his contributions to this app.
The code for the app is split into frontend and backend repos. Here's what it looks like:
- Frontend: App Engine app that displays videos and their Video API annotations, and lets you search videos by annotation
- App Engine
- jQuery
- ES6
- Sass
- Local Storage
- lodash
- Navigo (Routing)
- Canavsjs
- Webpack - JS Compilation
- Gulp - Build Process
- Google Cloud Function that calls the Video API everytime a new video is added to a bucket
- It stores the JSON response output a separate GCS bucket.
- Clone this repo and
cd
into thefrontend
directory. - Run
npm install
to install dependencies. - Run
npm start
in one tab on your terminal andgulp dev
on another. Make sure these are running at the same time. - Navigate to
localhost:8080
. You should see the UI without any videos - that part is next!
- Create a Cloud project and enable the Video Intelligence API (requires being part of the private beta) and Cloud Functions. Generate an API key and a JSON keyfile.
- In your project, create three Cloud Storage buckets: one for your videos, one for the video JSON output, and one as a staging bucket for your Cloud Function.
- Put all of the info from steps 5 & 6 into
frontend/local.json
andbackend/local.json
. Copy your keyfile into a file calledkeyfile.json
and place it in the frontend AND backend directories (you'll deploy these separately, one to App Engine and one to Cloud Functions). cd
intobackend
. Deploy the Cloud Function with the following command (replace with the name of your buckets):gcloud beta functions deploy analyzeVideo --stage-bucket your-stage-bucket-name --trigger-bucket your-video-bucket
- With your function deployed, try uploading a video to your video storage bucket. When the Video API finishes processing it, you should see the annotation JSON file in your annotation bucket. To see the video in your UI: navigate to localhost:8080/profile, then click 'clear local storage' and 'get videos'.
- To deploy your App Engine app,
cd
intofrontend
. Install the gcloud CLI if you haven't already. Make sure it's set to the correct project by running:gcloud config set project your-project-id
. Then deploy your app withgcloud app deploy
.