Page Comparison

Let’s wrap up the Vidispine VidiCore 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 VidiCore 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 post

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 ShapeAction.vue within the components folder. Import the necessary components and functions within the script tags. For this part we need VdtTranscode, VdtVidinetQC and VdtShapeExport.

...

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

...

For instructions on how to properly pass a URL to the API call, see the Vidispine VidiCore 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.

...

That was the frontend part of it. To have a location to export to, you also need to create a new export location in VidispineVidiCore. Creating the export location is done using an API call to your Vidispine VidiCore instance with a description of the export location, for example in an S3 bucket like below.

...

<template>
  <div class="buttons">
    <b-btn
      v-b-modal.TranscodeModal
      size="md">
      Transcode
    </b-btn>
    <b-btn
      v-b-modal.QcModal
      size="md">
      Quality Control
    </b-btn>
    <b-btn
      v-b-modal.ExportModal
      size="md">
      Export
    </b-btn>
    <b-modal
      id="TranscodeModal"
      title="Transcode"
      lazy>
      <VdtTranscode
        :item-id="item.metadata.id"
        :filename="item.metadata.filename"
        :tags="tags"
        :cost-estimate-url="transcodeUrl"
        :start-transcode-url="transcodeUrl"
        :job-status-url="jobUrl"
        :abort-job-url="jobUrl"/>
    </b-modal>
    <b-modal
      id="QcModal"
      title="Quality Control"
      button-size="md"
      lazy>
      <VdtVidinetQC
        :item-id="item.metadata.id"
        :shape-id="shape.id"
        :shape-tag="shape.tag"
        :resources="resources"
        :cost-estimate-url="qcUrl"
        :start-qc-url="qcUrl"
        :job-status-url="jobUrl"
        :abort-job-url="jobUrl"/>
    </b-modal>
    <b-modal
      id="ExportModal"
      title="Export"
      button-size="md"
      lazy>
      <VdtShapeExport
        :item-id="item.metadata.id"
        :shape-id="shape.id"
        :tag="shape.tag"/>
        :export-location-url="exportLocationUrl"
        :start-export-url="startExportUrl"
        :job-status-url="jobUrl"
        :abort-job-url="jobUrl"
        :poll-interval="4000"/>
    </b-modal>
  </div>
</template>

<script>
import axios from 'axios';
// eslint-disable-next-line
import { VdtTranscode, VdtVidinetQC, VdtShapeExport } from '@vidispine/vdt-vue-components/es';
import shapeApi from '../api/shape.api';

export default {
  name:'Actions',
  components: {
    VdtTranscode,
    VdtVidinetQC,
    VdtShapeExport,
  },
  props: {
   item: {
      type:Object,
      required:true,
    },
    shape: {
      type:Object,
      required:true,
    },
  },
  data() {
    return {
      transcodeUrl:'/api/transcode',
      qcUrl:'/api/vidinet/qc',
      jobUrl:'/api/job/',
      tags: [],
      resources: [],
    };
  },
  watch: {
    shape() {
       shapeApi.getShapeTags(this.shape.id).then((response) => {
         this.tags=response;
      });
    },
  },
  mounted() {
    shapeApi.getShapeTags(this.shape.id).then((response) => {
      this.tags=response;
    });
    axios.get('/api/resource?resourceType=vidinet').then((response) => {
      this.resources=response.data.resource;
    });
  },
};
</script>

<style lang="scss" scoped>
.buttons {
  display: grid;
  grid-template-columns: 1fr1fr1fr;
  grid-column-gap: 1em;
}
</style>

Now what?

This should have given you some insight into how to build applications using the Vidispine VidiCore API and the Vidispine VidiCore Development Kit. Even though this tutorial is finished, we already have a few new parts based on this same simple application to show you what else can be done.

You can also clone the full code for the Vidispine VidiCore Content Viewer running in your Vidispine VidiCore API Starter Edition to learn more about how to build using VDT.

...