Send Canvas Stream to UDP Multicast Address
I currently have a canvas that users can draw on. Then I do the following:
var canvas = $('#can')[0];
var ctx = canvas.getContext('2d');
var stream = canvas.captureStream(60);
var video = $('#video')[0];
video.srcObject = stream;
So, I get a canvas and use a method captureStream
to get a live stream of the canvas content and then put it in an html tag video
like srcObject
.
What I want to achieve now is that this direct stream (stored in a variable stream
) is sent to the udp multicast address, so I can get it using MPV
or another video player.
Are there any approaches you can give me on how I could start with this? Or is there an easy way to do this?
source to share
Even if it is technically not over UDP, since you added that it could be a different kind of web player, as long as you can read the stream, you should see what you can do using WebRTC.
Something that webtorrent uses for its transport protocol in the browser and you could use that and use it as a player.
One good example of how it might be implemented is shown on this page using captureStream
and sending it to another video element.This will require some experimental flags to be enabled in Chrome settings, but don't know if it might be non-op in your use case.
If you look at this answer regarding UDP broadcasting, then we advise you to use SRTP if that is really what you want to do. The one referenced by @Kaiido is also a good resource to get started on this matter.
You can also watch nile.js .
source to share