Hey!

https://www.outsystems.com/forums/discussion/72798/how-to-play-a-video-in-reactive-from-the-source-entity/

https://www.outsystems.com/forums/discussion/68398/want-to-upload-multiple-videos-for-particular-topic/

https://www.outsystems.com/forums/discussion/51178/upload-and-show-video-using-video-widget-in-mobile/

You have a lot of information/answers if you search first on the forum. What did you try to do until now to solve your question? Did you research? Did you try to implement any kind of solution? In which step are you blocked?

Kind Regards,

Márcio

Hi Mohamed,

In general, videos are huge compared to normal data and even images. Therefor it's highly discouraged to store videos in a database. The better choice is to store them on an online video service like Vimeo or YouTube, which also allows for easier playback.

There is better way to do it, like @Kilian Hekhuis said. But If you already have had this situation you can do this:

1 - First convert you binary to base64 using a server action BinaryToBase64

2 - Create a HTMLElement of type video with unique class to retrieve on JS

3 - Create JS Action that convert base64 to blob and put in the video element

// convert base64 to blob

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {

  const byteCharacters = atob(b64Data);

  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {

    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);

    for (let i = 0; i < slice.length; i++) {

      byteNumbers[i] = slice.charCodeAt(i);

    }

    const byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);

  }

  const blob = new Blob(byteArrays, {type: contentType});

  return blob;

}

// put the convert blob on HTML Video Element

const recordedVideo = document.querySelector('.my_video');

const superBuffer = b64toBlob($paramater.b64Data, 'video/webm');           

recordedVideo.src = null;            

recordedVideo.srcObject = null;            

recordedVideo.src = window.URL.createObjectURL(superBuffer);            

recordedVideo.controls = true;            

recordedVideo.play();         

  

For upload a Video in database you can look in the article of @Márcio Carvalho 

Any solution that uploads videos through the OutSystems server and stores it in the OutSystems database is a not performant solution that impacts your platform performance.

The traffic from uploading from your browxser to an external storage like AWS S3 or AzureBlob should be done using JavaScript SDK for example with Mircosoft Streaming Media Services. This avoids huge data traffic through the outsystems servers. Also it allows uploading on the background not blocking your application from usage.

As per Daniel comment, it's not recommended to store the videos as blob (binary data) in database. Instead try to use storage services like AWS s3, and use some technique like pre-signed URL to upload the file in proper and secure way:

https://docs.aws.amazon.com/AmazonS3/latest/userguide/PresignedUrlUploadObject.html

Hi,

@Mohamed Zubair Ahmed 

You can visit this discussion https://www.outsystems.com/forums/discussion/30806/silk-ui-control-video/ .

Thanks,

Sonali Verma