Feat/sticker

[mpirescarvalho]

First, good job with the project!
This PR adds the possibility to send WEBP images as stickers.

That's how you would send stickers:

const webpBase64Data = 'UklGRlxWAABXRUJQVlA4WAoAAAAQAAAAgAMAFgIAQUxQSFQ0AAAB...';

client.on('message', async msg => {
    if (msg.body.startsWith('dp!sticker')) {
        const stickerMedia = new MessageMedia('image/webp', webpBase64Data, 'image.webp' );
        client.sendImageAsSticker(msg.from, stickerMedia);
    }
});

It's also possible to send using chat objects:

const chat = await msg.getChat();
const stickerMedia = new MessageMedia('image/webp', webpBase64Data, 'image.webp' );
chat.sendImageAsSticker(stickerMedia)

You could also load the image from file just like normal images:

const stickerMedia = MessageMedia.fromFilePath('./image.webp');

IMAGES HAS TO BE IN WEBP FORMAT FOR THE STICKERS TO BE SENT PROPERLY

That's the result:

[aliyss]

I would rename this to sendStickerRaw, as there still is potential to add a sendSticker via Sticker Packs which is not yet included in this PR.

// Keep in mind: This is merely a suggestion and maybe @pedroslopez will accept as is.

[aliyss]

@mpirescarvalho

Also I found some functions that could help retrieve Information on already added Stickers if you want to add that as well:

Retrieve StickerPacks from phone:

Store.StickerPack.sync()

Check if StickerPacks are fetched from phone:

Store.StickerPack.hasFetchedData()

Retrieve Stickers from StickerPack:

Store.StickerPack.models[0].stickers.fetch()

Sticker Info:

Store.StickerPack.models[0].stickers.models[0]

Reset StickerPacks

Store.StickerPack.reset()

Reset Stickers from StickerPack:

Store.StickerPack.models[0].stickers.reset()

[mpirescarvalho]

@aliyss

Cool, I'd really apreciate if you can add that

Store.StickerPack.hasFetchedData() may also be useful to check if stickers have been fetched instead of fetching them every time a sticker is sent

Also, after using it for a while, I think sendImageAsSticker should also be renamed, as it is also possible to use it to send gifs or short videos converted to webp format (maybe sendMediaAsSticker ?). In fact the only requirements is that media has to be in WEBP format and be less than 1MB in size

Another thing is that I think client.sendImageAsSticker (or whatever the renamed name will be) should be able to send any image format. For that we would need to convert it internally, but it would require the use of external libs, and I don't know what @pedroslopez thinks about it. If he's positive I can work on it, because I’ve already implemented it in my bot

[aliyss]

@mpirescarvalho

I'm currently short on time. So I doubt I will be able to implement it soon enough on my own.

Concerning the internal conversion: I see the added value of converting images internally, however I believe it should only be done if it's via WhatsApp. I assume, that WhatsApp has their own conversion tool integrated somewhere within their code. Or at least hope so.

[pedroslopez]

Thanks for contributing!

I haven't yet had the chance to look over this properly, but just seeing it very quickly I see stickers are sent using a new function client.sendImageAsSticker(). To keep things consistent, I would prefer to send these messages in the same way other messages are sent, using client.sendMessage(). It could possibly be an option when creating the MessageMedia or an option on the sendMessage() function, like we did with sendAudioAsVoice: true (although, I think maybe MessageMedia would be a better place for it), or even creating a new model for stickers. These are just proposed solutions, but I'm open to ideas.

Again, I haven't yet looked into the implementation, so let me know your thoughts.

[mpirescarvalho]

@aliyss,
I don't think whatsapp has their own conversion tool because you can't send new stickers through whatsapp web in normal use, you can only send stickers you have imported in android/ios app first... and it seems that this constraint of media being WEBP just happens in stickers.

[mpirescarvalho]

@pedroslopez,
I would rather prefer using something like sendMediaAsSticker: true to keep options consistent with sendAudioAsVoice, but sending stickers is done by a different aproach of that used when sending messages. Of course we could just use a if inside sendMessage() and use the send sticker logic when sendMediaAsSticker === true, but sending sticker also doesn't return the message that was sent, like client.sendMessage() does.

Let me know if even then you want me to join this on sendMessage().

What about internal conversion so that it could handle formats other than webp?

[esteves67]

@mpirescarvalho Thank you so much for implementing the send sticker function 😄 👍

[pedroslopez]

@pedroslopez,
I would rather prefer using something like sendMediaAsSticker: true to keep options consistent with sendAudioAsVoice, but sending stickers is done by a different aproach of that used when sending messages. Of course we could just use a if inside sendMessage() and use the send sticker logic when sendMediaAsSticker === true, but sending sticker also doesn't return the message that was sent, like client.sendMessage() does.

Yeah, sendMediaAsSticker seems good to me- in this case I think it would be ok to internally convert images to their required format automatically as you mentioned.

However, if we're sending messages using the regular sendMessage function, it should return the sent message. Is there a way you could manually assign a message ID to the sticker message? What I did to be able to return sent messages was basically rewrite the internal function that created the message and manually generate a new ID for it.

[mpirescarvalho]

Ok, so a lots of things have changed here.

Sending Sticker

First, initial functions client.sendImageAsSticker(msg.from, stickerMedia); does not exist anymore.
As @pedroslopez requested, sending stickers is now merged into client.sendMessage() functions. That means it's now possible to send stickers from other functions like msg.reply() or chat.sendMessage().

Usage example:

const webpBase64Data = 'UklGRlxWAABXRUJQVlA4WAoAAAAQAAAAgAMAFgIAQUxQSFQ0AAAB...';

client.on('message', async msg => {
    if (msg.body.startsWith('dp!sticker')) {
        const stickerMedia = new MessageMedia('image/webp', webpBase64Data );
        client.sendMessage(msg.from, stickerMedia, { sendMediaAsSticker: true });
    }
});

Media format

Media format constraint also doesn't exists anymore (images are converted internally), so it's now possible to send any image format like jpeg to the function. You can do:

const stickerMedia = MessageMedia.fromFilePath('imagem.jpg');
client.sendMessage(msg.from, stickerMedia, { sendMediaAsSticker: true });

Videos

You can also send any videos format as stickers (though I only tested it with mp4). You should keep in mind that whatsapp stickers max size is 1MB, so anything bigger than that will not be sent, resulting in a error.

Important:
If you send a video as sticker that is not in webp format, it will try to automaticaly convert it. You need to make sure you have ffmpeg installed for this to work. Also, if you need, you can pass the ffmpeg path while instantiating whatsapp-web.js client:

const client = new Client({
    ...
    ffmpegPath: 'path/to/ffmpeg'
});

[pedroslopez]

This is great! That's exactly the way I would have hoped to implement it and it's integrated nicely.
However, the functionality doesn't seem to be working.

Trying to send stickers, it gets stuck pending:

I tried with a random image I had, as well as trying to send back a sticker that is already in WhatsApp.

[mpirescarvalho]

This is great! That's exactly the way I would have hoped to implement it and it's integrated nicely.
However, the functionality doesn't seem to be working.

Trying to send stickers, it gets stuck pending:

I tried with a random image I had, as well as trying to send back a sticker that is already in WhatsApp.

Are you getting any error message? It works nice for me:

client.on('message', async msg => {
    const webpImage = MessageMedia.fromFilePath('image.webp');
    const jpgImage = MessageMedia.fromFilePath('image.jpg');
    const receivedImage = await msg.downloadMedia();

    client.sendMessage(msg.from, webpImage, { sendMediaAsSticker: true });
    client.sendMessage(msg.from, jpgImage, { sendMediaAsSticker: true });
    client.sendMessage(msg.from, receivedImage, { sendMediaAsSticker: true });
});

[pedroslopez]

Disregard my previous message, the issue I mentioned seems to be unrelated and happens even without sending any stickers with the library.
So no, no issue in the console. Stickers just get stuck in a pending state.

Could more data be missing from the message? I know stickers have some information like sticker name and pack name, but I don't see those being set anywhere.

[mpirescarvalho]

Disregard my previous message, the issue I mentioned seems to be unrelated and happens even without sending any stickers with the library.
So no, no issue in the console. Stickers just get stuck in a pending state.

Could more data be missing from the message? I know stickers have some information like sticker name and pack name, but I don't see those being set anywhere.

Yes they have aditional information but those seems to be optional. I'm using this branch on my bot (it allows users to send images and the bot creates a sticker from it) from a week and I haven't had any problems at all.

I think we need anyone else to test it, maybe I'm missing something too.

[esteves67]

@mpirescarvalho @pedroslopez
Im having no problem with mpirescarvalho sticker branch, here it is working perfect.

@mpirescarvalho again, thanks for implementing the sticker function, it will be so much useful for me, and many others!

[pedroslopez]

Alright, the issue I was having was due to the size property not being set. This caused an issue on iOS with both sending and receiving stickers sent by the library.

I just need to test out the animated sticker portion, which I'll get to most likely tomorrow.

[pedroslopez]

LGTM!