html5-canvaswebrtcant-media-server-sdk

Embed logo in antmedia live stream via canvas


Am following the blog at https://antmedia.io/how-to-merge-live-stream-and-canvas-in-webrtc-easily/ that explains how to embed a logo in antmedia live stream. However, I couldn't quite figure out to initialise a localStream with javascript SDK as illustrated in the blog. Specifically, where is the implementation of initWebRTCAdaptor():

     //initialize the webRTCAdaptor with the localStream created.

     //initWebRTCAdaptor method is implemented below

     initWebRTCAdaptor(localStream);

A complete working sample would be very helpful.


Solution

  • It seems that blog post is not fully up to date. Let me share what to do to have this feature.

    Just add a localStream parameter to the WebRTCAdaptor constructor. Secondly, use the below code in place of initWebRTCAdaptor

    For the full code, please take a look at this gist. https://gist.github.com/mekya/d7d21f78e7ecb2c34d89bd6ec5bf5799

    Make sure that you use your own image in image.src.(Use local images)

    var canvas = document.getElementById('canvas');
        var vid = document.getElementById('localVideo');
        var image=new Image();
    
        image.src="images/play.png";
    
        function draw() {
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');
                ctx.drawImage(vid, 0, 0, 200, 150);
                ctx.drawImage(image,50, 10, 100, 30);
            }
        }
    
    
        setInterval(function() { draw(); }, 50);
        //capture stream from canvas
        var localStream = canvas.captureStream(25);
        navigator.mediaDevices.getUserMedia({video: true, audio:true}).then(function (stream) {
            var video = document.querySelector('video#localVideo');
    
            video.srcObject = stream;
    
            video.onloadedmetadata = function(e) {
                video.play();
            };
    
        //initialize the webRTCAdaptor with the localStream created.
    
        //initWebRTCAdaptor method is implemented below
    
        localStream.addTrack(stream.getAudioTracks()[0]);
    
        initWebRTCAdaptor(false, autoRepublishEnabled);
      });