Make sure npm start and gulp are running at the same time.
Navigate to localhost:8080. You should see the UI without any videos - that part is next!
(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
Create a Cloud project
Enable the Video Intelligence API (requires being part of the private beta)
Enable Cloud Functions.
Generate an API key and a JSON keyfile.
Setup Storage
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.
Set permissions for your Storage Buckets
Make video bucket world readable - Group - allUsers - Reader
Make JSON annotation bucket writable by service account - User - [serviceaccount] - Owner
Setup Credentials
Make copy of frontend/local.sample.json named frontend/local.json
Make copy of backend/local.sample.json named backend/local.json.
Copy your Cloud project ID, storage bucket names, and API key into frontend/local.json and backend/local.json.
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).
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. If the JSON annotations aren't there, check your Functions logs for errors in the Logging tab of your Cloud console.
To see the video in your UI: navigate to localhost:8080/profile, then click 'clear local storage' and 'get videos'.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent