Video streaming and optimization for DigitalOcean Spaces with ImageKit video API

DigitalOcean is a popular cloud service provider that provides developers, startups, and SMBs with a reliable infrastructure-as-a-service platform. It has emerged as a popular, economical, and easier-to-use alternative to full-service cloud providers like AWS, Google Cloud, and Microsoft Azure.

DigitalOcean provides an object storage service as a part of its cloud infrastructure called DigitalOcean Spaces. It provides an S3-compatible API for uploading and getting files from its object storage.

If you have videos created by your team or uploaded by your users, you can use the S3-compatible API by DO Spaces to upload the files.

If the file is set to public access, as shown in the screenshot below, you will get a file URL once it gets uploaded.

You can use this file's URL directly in your websites and apps to load the video file on the user's device. Here is an example of using it in a video tag to load the video on an HTML page.

<video>
	<source src="https://xxxxxxxxx.sgp1.digitaloceanspaces.com/test-video.mp4" />
</video>

The above URL is masked, but a similar video file URL for the actual file can be used to load content in a video tag.

When you do this, the browser issues multiple range requests to access the video in smaller parts. These requests are completed with a 206 status code indicating a partial response from the server (that matches the browser's requested segment).

However, DigitalOcean Spaces is primarily an object storage. Though we can deliver video content, as shown above, it is not the "streaming" like Youtube and Netflix.

These websites use Adaptive Bitrate Streaming, where a bigger video file is broken into smaller chunks and encoded at different bitrates. The bitrate used then depends on the user's device and network conditions.

Apart from not supporting Adaptive Bitrate Streaming, DigitalOcean Spaces also lacks the ability to:

DigitalOcean Spaces cannot compress video files - If you upload a 50MB video, you would not be able to reduce its file size on DigitalOcean, even if your user is experiencing high latency on his network.
It cannot convert video formats. Formats such as AVI and MOV cannot be loaded directly in the browser and must be converted to web-safe formats like MP4 and WebM.
One cannot adapt videos for mobile directly from DigitalOcean Spaces. Or add watermarks, or create video thumbnails. Without external tools, there is simply no way to transform a video within DigitalOcean.

Given that there exists no other tool in the DigitalOcean ecosystem to stream and optimize videos, the only alternative is to learn everything about video encoding and optimizations on your own and build something in-house. Or you could spend 5 minutes configuring your DigitalOcean Spaces bucket with ImageKit's real-time video API and start streaming optimized video content to your user's device.

Let's use the 15MB test-video.mp4 that we loaded to DigitalOcean above and see how we can optimize it with ImageKit.

Using ImageKit for streaming optimized videos from DigitalOcean Spaces

ImageKit is a real-time media optimization, transformation, and management solution that allows us to stream and optimize videos in near real-time with minimum effort.

You can attach your DigitalOcean Spaces storage to ImageKit and start delivering optimized media in minutes. It uses AWS Cloudfront as a CDN for media delivery, so you don't have to worry about content delivery times for your users either.

You can sign up for a free ImageKit account from here. It offers free 500 seconds of video processing and 20GB of data output every month.

Attaching DigitalOcean Spaces storage to ImageKit

ImageKit can attach to any S3-compatible storage like DigitalOcean spaces and access objects even if they are set to private. It is relatively straightforward where we need to specify the bucket name, access and secret keys, and the bucket endpoint. Read more details about attaching S3-compatible storage with ImageKit.

We must then attach this external storage to a URL endpoint in our dashboard, making it accessible via ImageKit. ImageKit does not copy any content from your bucket. Instead, it just accesses the original file when you request it via a URL.

With our storage now attached to ImageKit, let's see how we can optimize the original video for delivery on our user's device.

Streaming optimized video with ImageKit and DigitalOcean Spaces

Using the URL below, we can access our video stored in DigitalOcean using ImageKit.

When requested using this URL, ImageKit automatically identifies the requesting device and its video format support. It then uses this information to convert the original video to WebM or MP4, the two most widely used web-safe video formats.

Using format-specific compression algorithms, it also compresses the video without disturbing its visual quality.

Unlike other third-party tools, which involve extensive setup or understanding of the video encoding process, these video optimizations are accessible in the ImageKit dashboard. You need to turn on the settings, and ImageKit takes care of the rest.

When we deliver our sample video via ImageKit, its size drops from 14.7MB to just 9.1MB when delivered in WebM format on Chrome.

This is a 40% improvement in the video size and streaming experience we can offer with DigitalOcean storage just by using ImageKit. And with the integrated CDN in ImageKit, the video load time is also super fast.

Transforming videos for different use cases with ImageKit

ImageKit offers a unique URL-based real-time video API, making it easy to adapt videos to different devices and placeholders. You can resize and crop videos and create video snippets or thumbnails in real-time.

These transformations helps you create a complete video experience on the client's device without any other external product or coding.

To resize our video to a 200px width, we have to add the video transformation parameter tr=w-200 to our URL, as shown below.

https://ik.imagekit.io/ikmedia/videodemo/test-video.mp4?tr=w-200

ImageKit automatically converts the video to WebM format (the content-type header in the screenshot above is video/webm), and the video gets compressed to just 184KB.

We can also convert our video to a vertical video to adapt to platforms like Instagram reels or vertical product videos by specifying the appropriate height and width transformations directly in the video URL. ImageKit takes care of cropping the video in real-time and returns the size we requested. For a 400 x 640 vertical video requested using the URL below, we get the video size at 2.3MB.

https://ik.imagekit.io/ikmedia/videodemo/test-video.mp4?tr=w-400,h-640

Taking it a step further, we can watermark our video and control how the watermark gets placed in real-time using the URL-based video transformation parameters. The example below is of an image placed on the underlying video, but you could also add text or another video on top of a base video.

https://ik.imagekit.io/ikmedia/videodemo/test-video.mp4?tr=w-400,h-640,l-image,i-logo_HuFO6vJ2x.png,lx-10,ly-10,w-200,l-end

Adaptive bitrate streaming for videos with DigitalOcean Spaces and ImageKit

Adaptive bitrate streaming is a technique that involves encoding videos at different bitrates and using them according to the user's network speed or device changes. Streaming services such as Netflix and Youtube extensively use this, and most of us would have experienced this adjustment in quality ourselves.

ImageKit makes it super simple to use DASH and HLS - the two most popular Adaptive Bitrate Streaming protocols with our videos hosted on DigitalOcean Storage. Like all other video optimizations and transformations in ImageKit, Adaptive Bitrate Streaming can also be used in seconds, and in real-time, by making small URL changes.

For example, we can get an HLS stream ready at 360p, 480p, and 720p resolutions by modifying our video URL, as shown below.

https://ik.imagekit.io/ikmedia/videodemo/test-video.mp4/ik-master.m3u8?tr=sr-360_480_720

When accessed for the first time, ImageKit will automatically start transcoding our video into different resolutions in the background and return the manifest file - ik-master.m3u8 - for HLS streaming.

We can load the above URL directly in an HLS video stream player. That's it! Our adaptive bitrate streaming setup is ready.

We can see in the screenshot below that the browser first started with a couple of 360p video segments for a fast load time before switching up the resolution to 720p because the user's device could load a higher resolution video.

Since video files are large, generating manifest files at multiple resolutions for Adaptive Bitrate Streaming is time-consuming. To improve the development experience and provide certainty as to when the asset is ready, ImageKit offers video webhooks.

These webhooks allow us to listen to events indicating the completion of this transcoding process. These webhooks are optional, and the process of generating ABS manifests, as explained above, remains the same whether or not we use them.

{
  "type": "video.transformation.ready",
  "id": "a03031b5-ad5f-4985-8cf5-4de67630f6d7",
  "created_at": "2022-06-20T12:00:11.703Z",
  "request": {
    "x_request_id": "fa98fa2e-d6cd-45b4-acf5-bc1d2bbb8ba9",
    "url": "http://ik.imagekit.io/demo/sample-video.mp4?tr=f-webm,q-10",
    "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:101.0) Gecko/20100101 Firefox/101.0"
  }
  ....
  other fields
  ....
}

Conclusion

DigitalOcean Spaces is the object-storage solution in the cloud provided by DigitalOcean. It is widely popular amongst developers and startups. Like any other object storage, we can upload video files to it and load them on the user's device.

However, without any other feature for video optimization, streaming, or transformations, it leaves much to be desired.

ImageKit is a real-time media optimization, transformation, and management product that simplifies streaming optimized videos directly from your Spaces storage.

Once the storage is attached, we can use the URL-based real-time video API to optimize videos automatically, convert them to the right format, adapt them to web and mobile, and deliver adaptive bitrate streams using DASH and HLS protocols.

ImageKit offers a great free plan with almost 500 seconds of SD video processing and 20GB of video streaming every month. Sign up now and use ImageKit with DigitalOcean Spaces for video streaming on websites and apps.

推荐订阅源

ImageKit.io Blog