[SOLVED] Sharing images using livekit and nextjs

Sharing images using livekit and nextjs

I have a video conference app that have all the basic functionalities. I'm now trying to add a feature where users can upload images and then by clicking one of them it gets shared to all users(kind of screen sharing but instead of your screen you share the image you clicked on). Is it possible to do this using livekit and nextjs? I've tried to change the video track but I was not able to figure it out and the livekit docs are not that good actually.

Solution

One way to achieve this would be to use a HtmlCanvas to render the picture into. You could then capture a video stream from that canvas with canvas.captureStream(). The returned MediaStreamTrack can be passed into room.localParticipant.publishTrack(myCanvasCapturedTrack).

const canvas = document.createElement('canvas');
const myFrameRate = 10;
// TODO render the picture into the canvas
const mediaStream = canvas.captureStream(myFrameRate);
const videoTrack = mediaStream.getVideoTracks()[0];
room.localParticipant.publishTrack(videoTrack);