Send image throw session.signal

OpenVidu v2 Issues developing apps
1

I have react-native app.
Chat messages works fine between two devices with:
session.signal({
data: JSON.stringify(data),
to: [],
type: ‘my-chat’,
})

But how can i send image?
I tried with formData, no success.

2

Don’t use signaling for this, it’s pretty restricted.
You need to use WebRTC data channels. I think that they can be hooked easily to the exposed RTCPeerConnection (through event.stream.getRTCPeerConnection()).

3

@Timor_Sulimani, I think you should convert the image into base64 and then try to send the data using signalling. @ receiver side converts a base64 encoded image string into an image.

4

This will work only for very small images otherwise the Websocket connection will fail:

Connection Closed: 1009 The decoded text message was too big for the output buffer and the endpoint does not support partial messages

This was also discussed here: Websocket reconnects after sending large signal

Also take in consideration that base64 encoding will increase the file size with 33%.

But now that I think better my solution would also probably fail because the peer connection is done with the KMS server - unless it does the data channel relaying.

5

The best way is sending the image to the backend and then downloading it from clients.

1 Like
6

@mihailj, Yes you are right and i too think the best and optimised way is to instead of sending the actual image, upload the image to the backend and just send the image URL through signalling which @micael.gallego has suggested.

7

well, I tried it before,there is a little problem.

I’ll show you a piece of code and explain after.

sendMessage = (data) => {
const { session } = this.state;
const formData = this.createDataForServer(data);
const dataForSocket = this.createDataForSocket(data);
session.signal({
data: JSON.stringify(dataForSocket),
to: ,
type: ‘my-chat’,
})
.then(async () => {
console.log(‘Message successfully sent’);
try {
await ApiService.sendMessage(formData);
} catch (err) {
console.log(‘error in sendMessage’, err);
}
})
.catch(error => {
console.error(error);
});
}

Now, see this line:
await ApiService.sendMessage(formData);
This is happenning after the message sent throw the socket,
that means that if i’ll place the get Messages here:
mySession.on(‘signal:my-chat’, (event) => {
ApiService.getMessages()
}
It get called before the sendMessage function,
Because of this, I will not get the last message.

8

The logic should be reversed, something like:

(async () => {
    await ApiService.sendMessage(formData);
    // send signal
    session.signal({
    ...
})();
9

Yes. That’s what i did, works perfect.