To test the app, from the root of the application folder, run:
$ npm run dev
Or, run this:
$ yarn dev
This will launch our application. From the home page, click on Create Thread and create a new thread named Video API Test, or any name you like. Once we create a new thread, and navigate to the view thread page, we should see the new reply section, as shown here:
When we click on Reply with Video, we should see a popup where you can record a video and then preview it and download it. Once we click on the record button, we should see the browser asking the user permissions to capture audio and video:
Once permission has been given, the recording begins:
Now, when we click on Reply, the video will get uploaded to our server first, and then it will upload the same video to Video Intelligence API to get the Explicit Content Annotations and Segment Label Annotations. If everything is as expected, this video is uploaded to Cloudinary, a public URL of this video is fetched, and the description for this video is constructed and sent back. This is how the final message will look:
The labels appear on the left side of the message. You can try recording various videos and test the complete flow end to end.
To wrap up this chapter, we are going to push the code to Heroku.