CAP: Streaming Image

[Vanessa23]

Introduction

This blog will include an explanation of streaming, its benefits, and a simple way to use it throw SAP Cloud Application Programming Model (CAP).

 

Prerequisite

Have an initial application CAP Project setup.

 

 

 

What is Streaming images:

Streaming refers to the process of transmitting and displaying images in real-time or as they are being received. This concept is commonly used in various web and mobile applications to optimize image loading and display.

 

Benefits of using streaming image:

1. Faster page load time: allow web pages and mobile app to load more quickly because images are fetched and displayed as they become available. This can significantly reduce initial page load times, especially for pages with a large number of images.


2. Improved user experience:  Users see content loading progressively. They can start interacting with the page or app before all images are fully loaded.


3. Reduced bandwidth usage: Streaming images can save bandwidth because only the necessary images are fetched, rather than downloading all images at once. This is especially advantageous for users on slow or limited data connections.;


4. Lower latency: Streaming images reduce latency by fetching and displaying images as soon as they are available, leading to a more responsive user interface;


5. Dynamic content loading:  Streaming allows you to implement dynamic loading of images based on user interactions or other events;


6. Efficient resource manage: help manage server resources more efficiently because the server only needs to provide images as they are requested, rather than all at once;


7. Better user engagement: Users are more likely to stay engaged with your content if they can start interacting with it immediately, even if all images are not loaded yet. This can lead to improved user retention and conversion rates;


8. Optimized for mobile: On mobile devices, where bandwidth and screen space may be limited, streaming images are particularly valuable for ensuring a smooth user experience;


9. Adaptive loading:  You can implement adaptive loading strategies based on factors like device type, screen size, and network conditions. This ensures that users receive images appropriate for their context;


10. Reduced server load: By only serving images as needed, you reduce the server's load and decrease the risk of overloading it during traffic spikes;


11. Live updates: Streaming images can be used for live updates, such as real-time data visualizations or dashboards that continuously refresh with new information;


12. Simplified content management:  It's easier to manage and update content when you can make changes to individual images without affecting the entire page or application;

 

How to use streaming in CAP?

Create Table:

In the "schema.cds" file, let's create the "Media" table. Some fields are mandatory for streaming, such as:

- content (LargeString): For the file

- mediaType (String): For the file type

 

In order to perform streaming, it is also mandatory to have @core.IsMediaType set to true and @core.MediaType with the field we defined to store the file type (mediaType).

 

entity Media : cuid, managed {

    fileName    : String;

    description : String;

    @Core.MediaType: mediaType

    content      : LargeBinary;

    @Core.IsMediaType: true  

    mediaType : String;

}

 

After creating the table, we need to run CAP and we can create a CAP test file ('HTTPTest.http) and test it. At the top of the file, we should specify the local server to run the test:

 

### SERVICE Cap Services



@server = http://localhost:4004

 

Now, let's create our first test. We should start by creating the initial structure for our streaming:

 

### Create Picture with mediatype



POST {{server}}/streaming-test/Media

Authorization: Basic admin:

Accept: application/json

Content-Type: application/json



{

  "mediaType": "image/jpg"

}

 

Result:

 

 

Using a local image (TestImage.jpg), let's insert the image into our table.

 

UPDATE (local image path):

### Upload Binary jpg



PUT {{server}}/streaming-test/Media(3c206219-8709-49dc-b60d-b883c7f128d4)/content

Authorization: Basic admin:

Content-Type: image/jpg



< ./TestImage.jpg

 

Result:

 

 

Now we can read our image directly in the tests, using the full path to read the image, and finally using $value. The image will appear in the test result.

 

READ:

### Read Binary



GET {{server}}/streaming-test/Media(3c206219-8709-49dc-b60d-b883c7f128d4)/$value

Authorization: Basic admin:

 

Result:

 

Or we can simply test it in the browser, as you can see in the image below.

 

Result:

 

Conclusions:

In summary, streaming images offer a range of advantages, including faster loading times, improved user experiences, reduced bandwidth usage, and better resource management. These benefits are particularly valuable for websites and apps that rely heavily on images and aim to provide a responsive and engaging user experience.

The choice between streaming images and using Base64 encoding depends on your specific use case and requirements. If you need real-time processing, efficient memory usage, and scalability, streaming may be the better option. On the other hand, if simplicity, compatibility, and ease of implementation are more important, Base64 encoding may be a suitable choice. Ultimately, it's essential to consider factors like performance, resource constraints, and system compatibility when making this decision.