3

I currently have a canvas where users can draw in. What I'm doing then is this:

var canvas = $('#can')[0];
var ctx = canvas.getContext('2d');
var stream = canvas.captureStream(60);

var video = $('#video')[0];
video.srcObject = stream;

So I get the canvas, and use the captureStream method to get a live stream of the content of the canvas and then put it into a html video tag as srcObject.

What I want to achieve now, is that that live stream (saved in the variable stream) is sent to a udp multicast address, so I could receive it with MPV or another video player.

Are then any approaches you can give to me on how I could getting started with this? Or is there an easy way to do this?

Preview
  • 35,317
  • 10
  • 92
  • 112
nameless
  • 1,483
  • 5
  • 32
  • 78
  • The MediaStream you get from `canvasElement.captureStream()` is just the same (with a few more methods) as the one you get from e.g gUM. Then, you generally use WebRTC to *share* this stream with other end-points. But WebRTC isn't made for multipart/broadcasting, so your *broad* question becomes an dupe of this one : https://stackoverflow.com/questions/18318983/webrtc-scalable-live-stream-broadcasting-multicasting where it is recommended to use an gateway server-side, which will implement the broadcast. – Kaiido May 27 '17 at 02:37

1 Answers1

1

Even if it's technically not over UDP, since you added that it could be another kind of web player as long as you can read the stream, you should look at what you can do using WebRTCs.

That's what webtorrent uses for their transport protocol in the browser, and you might be able to leverage that and use it as the player.

One good example of how it could be implemented is shown on this page, by using captureStream and sending it to another video element. It will require to enable some experimental flags in theChrome settings though, don't really know if it might be a no-op in your use case.

If you look at this answer regarding UDP broadcasting, that is advising to use SRTP instead if that's really what you desire to do. The one referenced by @Kaiido is also a good resource to get started on the subject.

You can also havea look to nile.js.

Preview
  • 35,317
  • 10
  • 92
  • 112