Frame.io is a cloud-based collaboration hub that allows video professionals to share files, comment on clips real-time, and compare different versions and edits of a clip. With the addition of our custom actions feature, developers can extend Frame.io's capabilities by adding their own features (referred to as custom actions).
This is an example application which shows how to create a custom action for Frame.io. Frame.io custom actions allow you to build integrations directly into Frame.io as programmable UI components. This enables a whole class of workflows that can be triggered by users within the app, leveraging the same underlying events routing as Frame.io webhooks. You can read more about custom actions in the Custom Actions Overview documentation.
Currently, custom actions are available for assets, and are displayed in the contextual / right-click dropdown menu available on any asset. An Asset is a robust representation of a file in S3, and its context in Frame.io, including transcodes, user/team/project context, and metadata. You can read about Assets in the Uploading Assets guide. In the Frame.io app, a custom action appears as shown in the image where Test is the name of the custom action:
You can create multiple custom actions, and they will all appear in the same area as the Test custom action.
In this example, we'll present the user with a form asking them to provide their name and favorite color. On submission, we'll present the user with a confirmation message.
For more information about how custom actions work, check out our documentation.
- Developer account with Frame.io - https://developer.frame.io
- Note that you will need Team Manager permissions to create Custom Actions for your team.
- Web server with a publicly accessible address - we recommend trying:
NOTE: If you just want to see the sample run, we've set up a version for you here: Custom Actions with Glitch If you choose to use this version, make sure you put the trailing slash in at the end of the address when you set up your custom action at developer.frame.io like so: https://frameio-custom-action.glitch.me/
You must configure your custom action in the Custom Actions area of developer.frame.io. Follow the instructions provided here: Setup.
NOTE: For Glitch, you must include a trailing slash when adding your URL to the Custom Action area. For ngrok, you'll need to add /actions to the end of your ngrok address.
$ npm install
$ npm start
By default the application runs on port 3000, however this can be overridden by setting the PORT environment variable.
If you need help getting ngrok to work, you can check out our troubleshooting guide for ngrok. (It has a few tips for Glitch as well.)