Let's wrap up the Vidispine Development Toolkit tutorial by adding transcode, QC and export functionality to our application. After concluding this you should have a basic understanding of VDT and what you can do with the Vidispine API.Introduction Welcome to the fourth part of the Vidispine Development Toolkit tutorial. In this part, we'll add transcoding and QC functionality to the application, as well as a way to export your assets for use in other systems. When you have finished this part, you will have a complete, and very small, media supply chain, showing how you can take your assets from import to export using the Vidispine API and the VIdispine Development Toolkit.
This blog post
Set up and use the Vidispine transcoder from Vidinet (VdtTranscode)
Set up the Vidinet QC service (VdtVidinetQC)
Create a UI for exporting assets/shapes (VdtShapeExport)
Building the application Getting started All the Vue components that we are going to create should be located in [my-project]/src/components. Use the default welcome page that is visible when we have just set up the Vidispine Development Toolkit is named VidispineVersion.vue as a learning reference.
All code can be found in the companion Github repo howto-build-vdt-applications. If you haven't set up your system yet, head over to part 1 of the tutorial, part 2 to learn how to build the import component, and part 3 to learn how to list and preview items.
Setting up the transcoder Start by creating a new file called ShapeActions to go along with the rest of the Vue files in the project. Import the necessary components and functions within the script tags. For this part we need VdtTranscode, VdtVidinetQC and VdtShapeExport.
First of all, we need the transcoder up and running. The VdtTranscode component has quite a few required properties so hop on over to the VDT documentation and read up on its contents and requirements. Retrieve the item object from the parent component by declaring it as a required property and passing it on.
The URLs supplied here are exact strings containing the backend URL required to start an actual job and may vary somewhat depending on the services connected to Vidispine. The tags array is populated once a shape is selected through the mounted() function, and then updated each time the shape object updates through the watch function.
props: { item: { type: Object, required: true, }, shape: { type: Object, required: true, }, }, data() { return { transcodeUrl: /api/transcode, qcUrl: /api/vidinet/qc, jobUrl: /api/job/, tags: [], }; }, watch: { shape() { shapeApi.getShapeTags(this.shape.id).then((response) => { this.tags = response; }); }, }, mounted() { shapeApi.getShapeTags(this.shape.id).then((response) => { this.tags = response; }); }, For this example, we are utilizing Bootstrap to enable the use of modal dialogs. Navigate to your application directory through and run:
yarn add bootstrap yarn add bootstrap-vue. To make sure that the packages are correctly added to your application, also run a yarn install to update the dependencies. We also make use of the buttons included in bootstrap for better integration with the modals.
Note: If you would like to use another package or none at all, you may skip this part of the guide.
In src/index.js, add;
import { Modal, Button } from bootstrap-vue/es/components; Vue.use(Modal); Vue.use(Button); In src/assets/scss/base.scss, add;
@import bootstrap/scss/bootstrap-reboot; @import bootstrap/scss/utilities/; @import bootstrap/scss/_buttons; @import bootstrap/scss/_close; @import bootstrap/scss/_modal; Within the new ShapeActions document, add a button in the HTML template and bind the modal to it. Then add the markup for the transcode component with the required props. The lazy prop on the modal removes the HTML markup from the DOM when the modal is hidden. The ID and name of the files in this example are retrieved from the path shown below and may vary depending on the structure of the metadata. These strings are required for the API to initiate jobs with specific items or shapes.
Clicking the Transcode button will get you a dialogue where you select transcode preset, get a cost estimate of the operation, and then given the choice to do the transcode or not.
With the transcode component running, we can now go ahead and add functionality for both the Quality Control and Export components. First, create a mounted() function that handles an API call to retrieve the available resources, this is a required prop for the QC component.
For instructions on how to properly pass a URL to the API call, see the Vidispine documentation. For this API call to work, import Axios and create an empty array. Then, add two new buttons to go along with two new modals containing the components.