时间戳

首页 > 解决方案 > 通过画布在 antmedia 直播中嵌入 logo

html5-canvas - 通过画布在 antmedia 直播中嵌入 logo

问题描述

我正在关注https://antmedia.io/how-to-merge-live-stream-and-canvas-in-webrtc-easily/上的博客，该博客解释了如何在 antmedia 直播中嵌入徽标。但是，我不太清楚如何使用 javascript SDK 初始化 localStream，如博客中所示。具体来说，initWebRTCAdaptor()的实现在哪里：

     //initialize the webRTCAdaptor with the localStream created.

     //initWebRTCAdaptor method is implemented below

     initWebRTCAdaptor(localStream);

一个完整的工作样本将非常有帮助。

标签： html5-canvaswebrtcant-media-server

解决方案

博客文章似乎不是最新的。让我分享如何拥有此功能。

只需在构造函数中添加一个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);
  });

推荐阅读