Question

下面是一个我根据自己的需要笨拙地定制的脚本，这是一个点对点的WebRTC调用，你可以看到自己在角落里的一个小盒子里，覆盖在发送给你的派对上全屏显示。正如你所看到的，我对自己有一个小视图，然后是你的呼叫伙伴的视图。但是，我如何实现具有您自己视图的小方框是另一方面的重叠？

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, 
minimum-scale=1.0">


</head>
<body>


  <section class="make-center">




    <div id="videos-container"></div>
  </section>
<script src="/dist/RTCMultiConnection.min.js"></script>
<script src="/socket.io/socket.io.js"></script>

<!-- custom layout for HTML5 audio/video elements -->
<script src="/dist/getMediaElement.js"></script>
<script>


// ......................................................
// ..................RTCMultiConnection Code.............
// ......................................................

var connection = new RTCMultiConnection();

// by default, socket.io server is assumed to be deployed on your own URL
connection.socketURL = '/';

// comment-out below line if you do not have your own socket.io server
// connection.socketURL =     
'https://rtcmulticonnection.herokuapp.com:443/';

connection.socketMessageEvent = 'video-conference-demo';

connection.session = {
    audio: true,
    video: true
};

connection.sdpConstraints.mandatory = {
    OfferToReceiveAudio: true,
    OfferToReceiveVideo: true
};

connection.videosContainer = document.getElementById('videos-container');

connection.onstream = function(event) {

    var width = parseInt(connection.videosContainer.clientWidth);
   if (event.type === 'remote') { 
   var mediaElement = getMediaElement(event.mediaElement, {
        title: event.userid,
        buttons: [],
        width: width,
        showOnMouseEnter: false
    });
    connection.videosContainer.appendChild(mediaElement);
}
if (event.type === 'local') { 
   var mediaElement = getMediaElement(event.mediaElement, {
        title: event.userid,
        buttons: [],
        width: width / 8,
        showOnMouseEnter: false
    });
    connection.videosContainer.appendChild(mediaElement);
}



    setTimeout(function() {
        mediaElement.media.play();
    }, 5000);

    mediaElement.id = event.streamid;
};

connection.onstreamended = function(event) {
    var mediaElement = document.getElementById(event.streamid);
    if (mediaElement) {
        mediaElement.parentNode.removeChild(mediaElement);
    }
};


// ......................................................
// ......................Handling Room-ID................
// ......................................................



(function() {
    var params = {},
        r = /([^&=]+)=?([^&]*)/g;

    function d(s) {
        return decodeURIComponent(s.replace(/\+/g, ' '));
    }
    var match, search = window.location.search;
    while (match = r.exec(search.substring(1)))
        params[d(match[1])] = d(match[2]);
    window.params = params;
})();

var roomid = '';

var hashString = location.hash.replace('#', '');
if (hashString.length && hashString.indexOf('comment-') == 0) {
    hashString = '';
}

var roomid = params.roomid;
if (!roomid && hashString.length) {
    roomid = hashString;

}

if (roomid && roomid.length) {
    (function reCheckRoomPresence() {
        connection.checkPresence(roomid, function(isRoomExists) {
            if (isRoomExists) {
                connection.join(roomid);
                return;
            }
  if (!isRoomExists) {
                connection.open(roomid);
                return;
            }

            setTimeout(reCheckRoomPresence, 30000);
        });
    })();


}

//    to make it one-to-one
            connection.maxParticipantsAllowed = 1;
           connection.onRoomFull = function(roomid) {
              connection.closeSocket();
              connection.attachStreams.forEach(function(stream) {
                stream.stop();
              });


            };

</script>




<script src="/dist/common.js"></script>
</body>
</html>

提前致谢！

Answer 1

我怀疑您的问题是.appendChild将您的DOM元素添加到容器中的顺序。

首先，将元素设置为position:absolute，以便它们可以放在彼此的顶部：

mediaElement.style.position = 'absolute';

现在，你必须决定哪个最重要。我建议使用这3个选项：

选项1：insertBefore

您可以使用.insertBefore设置哪个DOM元素在另一个之前或之后。

首先，我建议你将两个变量都作为脚本的全局变量，然后你可以使用.insertBefore将第二个元素设置在第一个元素之上。

例如：

var mediaElement1;
var mediaElement2;

....

mediaElement1 = getMediaElement(event.mediaElement, {
    ....
});
connection.videosContainer.appendChild(mediaElement1);

// And then use the 1st element as a reference to insertBefore:
....
connection.videosContainer.insertBefore(mediaElement2, mediaElement1);

选项2：Element.insert

您也可以使用Element.insert代替.appendChild：

Element.Insert(mediaElement, connection.videosContainer);
....
Element.Insert(mediaElement, connection.videosContainer);

选项3：z-index

在较大的窗口，后台的窗口，执行此操作：

mediaElement.style.zIndex = "1";

在较小的窗口，前面的窗口，执行此操作：

mediaElement.style.zIndex = "9999";

安排他们！

既然显示了这两个元素，并将它们设置为position:absolute样式，您可以选择修改其top和left样式属性，以便将较小的视频窗口放置在您喜欢的位置更大的视频显示的顶部：

mediaElement.style.top = 10 + 'px';
mediaElement.style.left = 20 + 'px';

WebRTC视频通话与画中画

1 个答案:

选项1：insertBefore

选项2：Element.insert

选项3：z-index

安排他们！