Video Intelligence API keynote demo from Google Next 2017
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 11 commits behind sararob:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

This is not an official Google product.

Video Intelligence API Demo

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:

Architecture diagram


  • Frontend: App Engine app that displays videos and their Video API annotations, and lets you search videos by annotation



  • 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.




Setting up the local development copy of frontend

  1. Clone this repo
  2. cd into the frontend directory.
  3. Run npm install to install dependencies.
  4. Run npm start in one tab on your terminal
  5. Create a new tab and gulp dev init.
  6. Make sure npm start and gulp are running at the same time.
  7. Navigate to localhost:8080. You should see the UI without any videos - that part is next!
  8. (Optional step) If you want to see the UI with some sample video content before deploying your function and adding your own videos, copy the google-home-superbowl.mp4 file in the root directory to your video storage bucket and copy the google-home-superbowlmp4.json file to your video JSON annotation storage bucket. Run the frontend and you'll see the video with the annotations visualized.

Setting up the backend (Cloud Functions + Video Intelligence API)

Setup Project

  1. Create a Cloud project
  2. Enable the Video Intelligence API (requires being part of the private beta)
  3. Enable Cloud Functions.
  4. Generate an API key and a JSON keyfile.

Setup Storage

  1. In your project, create three Cloud Storage buckets:
    • one for your videos
    • one for the video JSON output
    • one as a staging bucket for your Cloud Function.
  2. Set permissions for your Storage Buckets
    • Make video bucket world readable - Group - allUsers - Reader
    • Make video bucket writable by service account - User - [serviceaccount] - Owner

Setup Credentials

  1. Make copy of frontend/local.sample.json named frontend/local.json
  2. Make copy of backend/local.sample.json named backend/local.json.
  3. Copy all of the info your generated service account json file into frontend/local.json and backend/local.json.
  4. Copy your generated service account json file into a file called keyfile.json and place a copy in both your frontend AND backend directories (you'll deploy these separately, one to App Engine and one to Cloud Functions).


  1. cd into backend.
  2. run gcloud config set project your-project-id.
  3. Deploy the Cloud Function:
    gcloud beta functions deploy analyzeVideo --stage-bucket your-stage-bucket-name --trigger-bucket your-video-bucket
  4. 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'.

Deploy the frontend

  1. cd into frontend.
  2. run gcloud config set project your-project-id.
  3. Deploy your app with gcloud app deploy.