Problem Statement

This is a cool little project that allows you (and others) to add video/image optimization in a plugin that allows anyone who uploads such content to offer a variety of viewing/streaming solutions.

Problem:

• Images are uploaded in a single resolution, which may not be suitable for various devices (e.g., high-resolution screens or low-bandwidth mobile connections).
• Videos are often uploaded in a single resolution, forcing users to compromise between low quality (bad experience on high-speed connections) or high quality (poor experience on slow networks).

Proposed Solution (where you can help):

1. Extend the Developer Console UI by adding a way to optimize (resize, convert) the file that is being uploaded
   1. There is an UI component where this processing option can be invoked.
   2. Preprocess images and videos before uploading, on the client side
2. By solving this issue, participants will contribute to a smoother and more adaptive user experience across all platforms.

Goal/Values:

• Optimize Media for Adaptive Delivery
  • Automatically process images to generate multiple resolutions/formats optimized for different devices and bandwidths.
  • Transcode videos into various resolutions and bitrates to enable adaptive streaming based on network conditions.
• Enhance Developer Console Usability
  • Extend the Cere Developer Console UI to include intuitive controls for media preprocessing.

Deliverables

• Updated Developer Console UI with image and video processing options.
• Client-side image conversion (e.g., resize images before upload).
• Client-side video encoding (e.g., convert .mp4 to HLS with different resolutions).
• Documentation on how to use the new features.

Requirements & Constraints

• Image processing should happen client-side before upload.
• The Developer Console UI should allow users to configure resolutions/formats before uploading.
• The feature should be optional, giving developers control over how media is processed.

Technologies

• TypeScript, React

Repositories

https://github.com/Cerebellum-Network/cluster-apps

https://github.com/Cerebellum-Network/cere-ddc-sdk-js

Media Optimization Tool in Developer Console

Lead: @Nikolai

Execution: 42 Hackathon - Built-in images and video optimisation in Developer Console for Adaptive User Experience Execution