Page Comparison

This is the first part of the four-part tutorial for building media application based on the Vidispine VidiCore Development Kit. The tutorial is hands-on, with code examples, and will result in a very simple media supply chain, from an import of files to export/transcoding of the same files.

In this series, you will learn to set up and build your first super-simple media application using the Vidispine VidiCore Development Kit. When you are done you will have the world’s simplest media supply chain using the Vidispine VidiCore API as a backbone, running on your laptop/desktop/server.

Getting started

Before you can get started with the coding fun you need to have a Vidispine VidiCore API running somewhere, and obtained a license to the Vidispine VidiCore Development Kit to get access to the Github repository. The quickest and simplest way to get a Vidispine VidiCore API is to head over to VidinetVidiNet and spin up one yourself. There is a $300 credit applied automatically, which will take you through this tutorial. When the Vidispine VidiCore API is up you can request a VDT license directly from the Vidinet VidiNet dashboard. If you want to learn more about our ecosystem we also recommend our Vidinet VidiNet webinar series.

Preparations

Ok, you have your license as well as access to Github, now we just need to make sure you have everything necessary installed on your computer. You can find the instructions either in the VDT repository or in the Vidispine knowledge base. It is also a good idea to keep the API documentation and the VDT documentation open in a browser window. If you run into trouble, let us know and our support team will help you out or have a look here.

Setting up a VDT Boilerplate

We will set up part of the Vidispine VidiCore Development Toolkit, more specifically a fully working project boilerplate on Django 2 and Vue.js. It should work for both MacOS and Linux. but there might be a few differences, which we will point out. This guide assumes that you have installed everything pointed out in the getting started section above.

Installing/cloning the VDT Django template

The next part assumes that you have a Github user with access to the VDT parts of the Vidispine Github repository and that you either have set up SSH access using a public key, or have a working username/password.

...

git clone git@github.com:vidispine/vdt-vue-django-template.git ./vdt-vue-django-template
vue-init ./vdt-vue-django-template new-vdt-app

Setting up the VDT Django template

The next step is to set up the Django VDT template. This will create a new virtual environment and launch the setup script included in the vdt-vue-django-template. The setup script will run and install all the packages and dependencies required to run the application.

...

Let the installer run and enjoy a nice cup of coffee. During the course of the setup, the system will prompt you for for some information:

• Vidispine VidiCore API URL, e.g., the one you created to get a VDT license (do not add a trailing “/”)

• Your Vidispine VidiCore credentials (do not leave them empty)

• The option to create a development server config (you should)

...

Open your browser and enter the URL above. If everything works as intended and the setup finished correctly, you should get a notification that Vue and Django are running and that Vidispine VidiCore is active.

If you can see the above web page you’re done with the first step in this tutorial. In this blog post, we learned how to set up and configure the vdt development environment. That’s it! Now you have a fully functional project boilerplate based on Django 2 and Vue.js and you are ready to continue to the next part in the series.   

In How to build media applications with Vidispine VidiCore Development Toolkit (PT2), we will configure the development server and our project to implement the vdt-vue-components and then use few of them to list all storages for our instance, list all importable files for the selected storage and import the selected files from that storage.

 Related pages