Display video thumbnails in firebase chat

To upload and display video thumbnail in a firebase based chat in Sketchware, follow the steps given below.

1. On the chat page add a file picker to pick files (mime type */*).

2. Add an ImageView imageview1 for picking files.

3. In imageview1 onClick event use file picker to pick files.

4. Create a String variable path.

5. In file picker onFilesPicked event, set String path to the path of the file selected.

6. In the event of button1 onClick (send button), if String path is not empty, upload the file to Firebase storage.

7. Add a String variable thumb_String.

8. In the event Firebase storage onUpload success, if the file selected is a video, create thumbnail from the path, convert it to base64 String, and send the url of the video (using key "attachment") and the thumbnail in String form (using key "thumbnail")
 to firebaseDb.
The code used here is:
Bitmap bitmap =ThumbnailUtils.createVideoThumbnail(path, android.provider.MediaStore.Video.Thumbnails.FULL_SCREEN_KIND);

java.io.ByteArrayOutputStream stream = new java.io.ByteArrayOutputStream();
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, stream);

byte[] byteArray = stream.toByteArray();

thumb_String = android.util.Base64.encodeToString(byteArray, android.util.Base64.DEFAULT);

9. In the event onChildAdded, get the data to a List Map map1, and set it as CustomView data for ListView.

10. In the CustomView of the ListView, add an ImageView thumbs.

11. In onBindCustomView, if the List Map map1 contains key 'attachment', and the value of key 'attachment' contains .mp4 or .3gp,
then if the List Map contains key 'thumbnail', get the thumbnail and display it in ImageView 'thumbs' using following code.
byte[] imageBytes = android.util.Base64.decode(
map1.get(_position).get("thumbnail").toString(), android.util.Base64.DEFAULT);

Bitmap decodedImage = BitmapFactory.decodeByteArray(imageBytes, 0, imageBytes.length);

thumbs.setImageBitmap(decodedImage);

Else if the key 'thumbnail' is not there, display a custom image as image of ImageView thumbs. See image below.
thumbs.setImageResource(R.drawable.black_vid);


Add onClick block for ImageView thumbs. Here use Intent to move to activity containing VideoView. See image below.


12. Save and run the project.


Comments

  1. Thank you Mr Sanjeev Kumar.Your my number 1 sketchware mentor(guider)

    ReplyDelete
  2. Please make tutorials with sketchware Revolution. It has a lot of new widgets, events, components. Also it supports making custom blocks with sk block manager ! These items help everyone & save us from using source code.

    1. Sketchware Revolution : https://drive.google.com/file/d/1-5L-fliJEPB3P2JhrOXPvG5XE9WTY95j/view

    2. sk block manager :
    https://drive.google.com/file/d/1-6ENd5Ny9EnowWkHT9dsEEo-YKajHqep/view
    3. Sketchware Gold :
    https://drive.google.com/file/d/1-CUoBhUZv7-2s7i1B3lnO1kZZZCN3NEN/view

    ReplyDelete
  3. Not work bhai 😢😢😢 invalid character

    ReplyDelete
  4. Dear Mr San Sanjeev Kumar sir
    Can u show me add source directly from send button ?
    I did what you say but one error it only
    Help me sir 😥😥😥

    ReplyDelete
  5. Good morning sir, please I've been following your chat app tutorials for a long time but I always get lost at a point because new updates you make were sometimes with different projects or the tutorial starts with some new codes added already and videos were not in parts and I always find it very hard knowing which tutorial come first and what follows making it difficult to change or updates codes and how to go about it and I give up due to frustration and now I saw that a new chat up tutorial has been started from scratch again specifically the one in your playlist with the name "firebase chat in sketchware" it contains 15 videos and in the last tutorial I watched on how to add visits counter to the app there was a link to your project which I downloaded to try and learn and understand the codes and concept so that I'll be able to make changes in future to suit my preference, then I got a notification of this nice and very important update being able to send all kinds of files and not just images which I was hoping and praying that you will do a tutorial on, but watching the tutorial I notice this particular project is different from the tutorials I've been following for some time and I haven't been able to fully understand the codes yet and now I'm unable to update the app with this new update because this tutorials contain different firebase keys, variables, names and I don't know how and where to change some of them to still make the project I've already downloaded and using to still work because I tried to change some the of codes whiles watching this tutorial based on my understanding and now I'm having a lot of errors so please sir and please again can you do a video tutorial of this update again using the project you used in the "fireb chat in sketchware" tutorials

    ReplyDelete

Post a Comment

Popular posts from this blog

Create Music Player app in Sketchware

A Flash Light App in Sketchware

Admob rewarded video Ads in Sketchware

Firebase auth in Sketchware for Login Activity

Simple car racing android game in Sketchware