Вставить логотип в прямую трансляцию antmedia через холст

Я слежу за блогом по адресу https://antmedia.io/how-to-merge-live-stream-and-canvas-in-webrtc-easily/, в котором объясняется, как встроить логотип в прямую трансляцию antmedia. Однако я не мог понять, как инициализировать localStream с помощью javascript SDK, как показано в блоге. В частности, где находится реализация initWebRTCAdaptor ():

     //initialize the webRTCAdaptor with the localStream created.

     //initWebRTCAdaptor method is implemented below

     initWebRTCAdaptor(localStream);

Был бы очень полезен полный рабочий образец.


webrtc html5-canvas ant-media-server
person davidwaf    schedule 08.07.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Кажется, что сообщение в блоге не полностью обновлено. Позвольте мне рассказать, что нужно сделать, чтобы у вас появилась эта функция.

Просто добавьте параметр localStream в конструктор WebRTCAdaptor. Во-вторых, используйте приведенный ниже код вместо initWebRTCAdaptor

Чтобы увидеть полный код, пожалуйста, взгляните на эту суть. https://gist.github.com/mekya/d7d21f78e7ecb2c34d89bd6ec5bf5799

Убедитесь, что вы используете собственное изображение в image.src. (Используйте локальные изображения)

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);
  });
person faraway    schedule 09.07.2020