DEV Community

Cover image for Stream video with open web services
Jonas Birmé for Eyevinn Video Dev-Team Blog

Posted on • Edited on

3

Stream video with open web services

Upload and play back your video files in your application using open web services in Eyevinn Open Source Cloud in five minutes or less.

Eyevinn Open Source Cloud was developed to reduce the barrier to getting started with open source and at the same time contribute to a sustainable model for open source by giving back a share of the revenue to the creator.

In this guide

  1. Get an API Access Token and setup project.
  2. Setup a video processing pipeline for streaming.
  3. Upload and process video

Prerequisites

Get an API Access Token and setup project

Navigate to Settings / API in the Eyevinn Open Source Cloud web console.

Skärmavbild 2025-01-30 kl  22 54 07

Copy this token and store in your shell's environment in the environment variable OSC_ACCESS_TOKEN.

% export OSC_ACCESS_TOKEN=<access-token-copied-above>
Enter fullscreen mode Exit fullscreen mode

Setup a NodeJS project.

% mkdir vod
% cd vod
% npm init
Enter fullscreen mode Exit fullscreen mode

Install the Javascript client SDK.

% npm install --save @osaas/client-core @osaas/client-transcode
Enter fullscreen mode Exit fullscreen mode

Create a file called vod.js and open it in your favorite editor.

Setup video processing pipeline

Add the following code to your file to setup the video processing pipeline.

const { Context } = require('@osaas/client-core');
const { createVodPipeline, createVod } = require('@osaas/client-transcode');

async function setup(context) {
  const pipeline = await createVodPipeline('devguide', context);
  return pipeline;
}

async function main() {
  const ctx = new Context();
  const pipeline = await setup(ctx);
}

main();
Enter fullscreen mode Exit fullscreen mode

Run the script.

% node vod.js
Enter fullscreen mode Exit fullscreen mode

After a few minutes it will have created a video processing pipeline.

Upload and process video

Now we can use the pipeline we created to upload and process a video. Here is a demo video you can use:

We will add the following to the main function.

  const vod = await createVod(pipeline,
    'https://testcontent.eyevinn.technology/mp4/VINN.mp4',
    ctx
  );
  console.log(vod);
Enter fullscreen mode Exit fullscreen mode

Now when we run the script it will return the following.

% node vod.js
{
  id: '52e124b8-ebe8-4dfe-9b59-8d33abb359ca',
  vodUrl: 'https://eyevinnlab-devguide.minio-minio.auto.prod.osaas.io/devguide/VINN/52e124b8-ebe8-4dfe-9b59-8d33abb359ca/index.m3u8'
}
Enter fullscreen mode Exit fullscreen mode

When the video processing has completed we can now paste the vodURL in a video player.

Skärmavbild 2025-01-31 kl  00 21 56

Next post: Creating a web video application

Tiugo image

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now

Top comments (0)

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay