DEV Community: Vitaly Kuprenko

AWS Media Services: All You Need To Know To Launch Your Media Project

Vitaly Kuprenko — Thu, 07 Feb 2019 08:46:25 +0000

The development stage of video processing solutions may cause some problems. During creating video-on-demand software or a live streaming solution, it is necessary to decide what kind of services you will utilize to make your software work. Amazon Web Services or AWS are the ones that should be considered. It’s high time to discuss how AWS Media Services can be integrated during your media project creation and how custom web application development services can help you.

What is AWS Media Services?

First of all, let’s define AWS Media Services. They are cloud solutions for video processing that give opportunities to process, store, and transmit video using Over-the-Top or OTT technology. Moreover, it’s important that the charge for services is made only when everything is applied and there is a chance to build a scalable solution for video content processing without substantial time delays.

AWS Media Services allow developers to use the following kit of solutions to create media apps and websites:

AWS Elemental MediaConnect is a good service for safe video stream transmission.
AWS Elemental MediaConvert is a service which processes video files and gives developers an opportunity to make streaming content in a video-on-demand format.
AWS Elemental MediaLive is a service for live streaming that allows converting video content for live streaming.
AWS Elemental MediaPackage is a service for preparation and protection of video content that is delivered from the web. It is able to create video streams with the help of different standards and formats(e.g. MPEG-DASH, SmoothStreaming, etc.) for different devices like TVs, mobile phones, personal computers, tablets, etc.
AWS Elemental MediaStore is an AWS storage that allows making low reading and recording delays with a large number of requests. As a result, users receive high-quality services.
AWS Elemental MediaTailor is a service that works in a real-time mode and gives an opportunity to implement advertising into the video content on a server side.

AWS Media Services makes it possible to create video-on-demand content for broadcasting. Media companies are provided with a possibility to expand the audience because of giving them web services utilizing OTT technology. In addition, AWS is able to affect price reduction on infrastructure and optimize the content delivery process for providers and broadcasters of media content.

How to use AWS Media Services for media projects

There are two use cases of media services from Amazon that you are able to utilize for your project: creating live streaming and creating a content library in video-on-demand format. Let’s discuss them more precisely.

Set up live streaming

There are several parts of the process of video broadcasting:

AWS Elemental MediaLive. A coding of video or audio streams utilizing different codecs, subtitles overlay and watermark adding.
AWS MediaStorage. It is an optimized media content storage if it’s necessary to store live video stream record. From time to time it can work improperly, so according to Amazon, it’s better to use AWS S3.
AWS Elemental Media Package. The recorded video stream can be distributed using various technologies, e.g. Apple HLS, MPEG-DASH, Microsoft Smooth Streaming, etc.
AWS CloudFront. CDN service is able to accelerate delivery in different geographical regions.

The process of live streaming development consists of several parts:

In order to make live streaming for a media project, it is necessary to create a channel in AWS Elemental MediaPackage for the processing of recorded video stream. It is able to be done with using AWS SDK or utilizing developer’s console. Creating a channel requires indicating channel ID. Nowadays at the input AWS, Elemental MediaPackage can operate only as an HLT protocol. Moreover, it’s necessary to customize endpoints. They are addresses where a streaming video can be received. These options are supported:

Apple HLS
Microsoft Smooth
CMAF or Common Media Application Format
MPEG-DASH

After these steps, it is high time to move to customization of MediaLive. First of all, it is important to make the Input (video stream source). Now MediaLive is able to get a file (MP4), a stream sent through RTMP/RTP/HLS protocols or AWS MediaConnent.

Let’s consider the example. An Input that gets a record from the screen over OBS (Open Broadcaster Software) uses RTMP protocol. After that, it’s high time to create a video stream processing channel in MediaLive. In order to do it, it’s necessary to choose a name, create IAM role, select the Input made before, and create an output group. The output group means a destination for a converted media stream.

AWS MediaLive supports these kinds of output groups:

Apple HLS;
Archivation of a video stream to S3;
RTMP (broadcasting of video stream to streaming services: YouTube, Twitch etc.);
Microsoft Smooth;
UDP/RTP.

By the way, there are opportunities to create your own output group or select necessary one utilizing a template.

I hope that you have understood everything about live streaming. So, it’s high time to look through a short guide on how to create a video-on-demand format for your media project.

Video on demand launch

AWS Elemental MediaConvert services are able to make a streaming on-demand video with the help of Amazon tools. As you already know MediaLive processes streaming video in real time, but MediaConvert integrates the videos from S3 storage and result is saved on S3.

An open source solution has several steps for developers to follow:

A source file is uploaded to S3 with a note for archiving to AWS S3 Glacier.
A source video is validated according to the metadata template for AWS MediaConvert. Moreover, all received data is saved to a database.
Jobs for video processing are made on the basis of a profile.
Video result is saved to S3.
Information from S3 is cached in CloudFront for acceleration of delivery,
CloudWatch is utilized to find errors.

Of course, the process of AWS Media Services integration is not simple. It is important to have specific skills and experience in order to integrate everything and achieve good results.

Best ideas how to improve a website using open source libraries on Github

Vitaly Kuprenko — Mon, 11 Jun 2018 16:20:55 +0000

JavaScript libraries are a useful tool for developers and designers since they can bring really powerful functional capabilities for web applications or websites by making their design smarter. Every day more and more new alternatives appear in such open source services like GitHub. How to choose the library worth your attention? This article analyzes the most effective free JS libraries. Information and techniques from these sources will make your website more interesting and popular.

D3.JS

D3.js is often called the most powerful open source JavaScript library for data visualization. It is collaborating with SVG for the rendering of graphs, charts, and dynamic visualization. Not so long ago it was widely used by such websites as NYTimes, Uber, and Weather.com.

D3 meets W3C web standards supported almost in all Web browsers. Despite it doesn’t include some preliminary built charts and graphs, it offers numerous samples and such useful features like “Input” and “Output”. It also processes in debugging and making powerful animated conversions.

CREATE.JS

It is a kit of JS libraries with open source code and tools for development of an abundant interactive content for open web technologies.

Create.js includes:

Easel.js for working with HTML5 Canvas elements.

The library makes it possible to create a high-performance interactive 2D content in HTML5. It provides with the multifunctional display list to animate graphics. It also provides a reliable interactive model for sensory and mouse interactions. Apart from being good for games, it is also perfect for generative art, advertising, data visualization and other highly developed graphic experiences. It works well on its own and as a part of Create.js: SoundJS, PreloadJS, and TweenJS. Deprived of external dependencies, it is compatible with almost any framework.

Tweet.js for web animation development

Library’s API is very simple but very powerful tool that allows users to create complicated animation easily. It supports animation of numeric properties of the object and CSS styles properties.

Sound.js for working with digital media

This JavaScript library is developed for working with audio. It creates a coherent interface for loading audio and audio playback in various browsers and devices. For now, it supports WebAudio, HTML5 Audio, Cordova/PhoneGap и Flash Fallback.

Preload.js coordinates loading of assets

It represents unified API for loading of different types of files, automatic detection of XHR (XML-HTTP-Request) availability as an alternate option for extended download. It includes plugin model to help with downloading in other libraries such as SoundJS as well.

CHART.JS

Chart.js is a library with an open source code for development of graphs, bar charts, charts and other linear graph elements using JavaScript and Canvas API. It represents 8 chart types and allows mixing them. Furthermore, it provides amazing ready options for animation as well. It can be installed with ease and customized.

THREE.JS

The library makes it possible to create an interactive 3D graphics in JavaScript. On account of using OpenGL low-level support tools, part of the code in WebGL can be implemented directly on the graphics card. Library’s website contains many complete samples. You can create a background sensitive to motions, user 3D web graphics, dynamic elements of the interface and other interesting things.

Visit it on GitHub.

GSAP

GSAP (GreenSock Animation Platform) is an advanced solution for animation highly evaluated by the world’s largest enterprises like Ford, Nike, Adobe, Microsoft, Samsung etc.

Its characteristics are a low entry threshold, detailed documentation, high performance, flexibility and compatibility with old browsers. GSAP has one important advantage - the library can animate not only CSS or Canvas but also any numeric variable of any JS-object.

On the other hand, GSAP is relatively heavy, therefore, it is better to use other analogs for creation of a small HTML elements animation like appearance, vanishing, flip etc.

Bounce.js

The JS library for the development of impressive animation using CSS. It allows applying to monitors various types of motion, rotation, scalability and converting on the CSS3 basis. The library can function in all browsers that support 3D converting and animation of key frames.

This library is free and has MIT license that makes it a good alternative to other libraries in case you don’t need a long list of animation types or just want to try yourself in visual arts.

Find the library on GitHub.

Skeleton

It is an adaptive CSS library that enriches simple HTML project with a stylish and interesting design. You will need only a few classes and Skeleton automatically stylizes all elements in your project. The library is very light, it contains a simple grid of 12 columns and main components.

You can get acquainted with it on GitHub.

Moment.js

Manipulations with dates in JavaScript are not a simple task both for beginners and for advanced developers. Moment.js library allows you to simplify your job substantially if you work as a JavaScript programmer. Moment.js is a light JS library to parse, process and format of dates not expanding Data prototype.

Moment.js website has a table containing available parameters that can be used for dates processing.

Elevator.js

It is a simple library that allows to make scrolling with Up button in an original way. Page scrolling is performed slowly to the vintage standby melody.

Check it on GitHub.

Math.js

Math.js is a large mathematical library for JavaScript and Node.js. It includes definitions of mathematical expressions with the support of symbolical calculations. Apart from containing a large set of integrated functions and constants, it offers integrated solution for working with different types of data such as large numbers, complex numbers, fractions, units, matrices etc.

Each library can offer you something interesting. Some of them are large and complicated while some can offer you just a couple of functions. But if you like working with JavaScript, use of these libraries will help you diversify your project. As for our company, our developers use many of projects listed above. And we are always ready to apply them during the development of your new project.