Support Canvas Publish Without Camera Input Source

[rahul78275]

Hello Community members

Currently, the Ant Media sample code for publishing canvas streams assumes the presence of a camera input source (navigator.mediaDevices.getUserMedia).

My use case requires publishing multiple videos combined in a single HTML canvas to the Ant Media Server — without relying on a physical camera input.

Current workaround:

I made these changes and it works

// Captured canvas stream 

const layer = stage.getLayers()[0];
const canvas = layer.getCanvas()._canvas;
stream = canvas.captureStream(25); 

While initializing the WebrtcAdaptor, pass the canvas stream directly in WebRTCAdaptor's localStream.

var mediaConstraints = { video: false,  audio: false  };

webRTCAdaptor = new WebRTCAdaptor({
      localStream: stream,
      mediaConstraints: mediaConstraints,
      callback: (info, obj) => {
      }        
})

In navigatorUserMedia method in media_manager.js return the localStream

return navigator.mediaDevices.getUserMedia(tempMediaConstraints).then((stream) => {

    if (mediaConstraints.audio == "dummy")
    {
	    stream.addTrack(this.getSilentAudioTrack());
    }
    
    //if black frame is desired as video, add it to stream. 
    //Stream shouldn't have video because video is set to false in tempMediaConstraints above.   				
    if (mediaConstraints.video == "dummy")
    {
	    stream.addTrack(this.getBlackVideoTrack());
    }
    
	if (typeof func != "undefined" || func != null) {
	    func(stream);
	}

// For canvas publish, Handle here with conditional check like mediaConstraints.video == "canvas" 
    return this.localStream;
	// return stream;

Has anyone in the community already implemented something similar — i.e., publishing a canvas or composited multi-video stream to Ant Media without using a camera source?
If yes, could you please share your approach or any reference code snippets?