个人中心
gpt4 book ai didi

javascript - 带画中画功能的 WebRTC 视频通话

转载 作者：行者123 更新时间：2023-12-03 04:30:50 25 4
gpt4 key购买 nike

下面是我根据自己的需要尽可能地笨拙地定制的脚本，即进行点对点 WebRTC 调用，您可以看到自己在 Angular 落里的一个小盒子里，覆盖在发送给您的一方上全屏显示。正如您所看到的，我首先对自己有一个小小的看法，然后是您的通话伙伴的看法。但是，我如何实现具有您自己的 View 的小盒子覆盖在另一个盒子上？

<!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>

提前致谢!

最佳答案

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

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

mediaElement.style.position = 'absolute';

现在，您必须决定哪个在哪个之上。我建议使用这 3 个选项:

选项 1:插入之前

您可以使用 .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 索引

在较大的窗口(即背景窗口)上，执行以下操作:

mediaElement.style.zIndex = "1";

在较小的窗口(前面的窗口)上执行以下操作:

mediaElement.style.zIndex = "9999";
<小时/>

排列它们!

现在两个元素都已显示，将它们的样式设置为 position:absolute，您可以选择修改它们的 top 和 left 样式属性可将较小的视频窗口放置在较大的视频显示顶部的任意位置:

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

关于javascript - 带画中画功能的 WebRTC 视频通话，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43492669/

25 4 0
文章推荐： javascript - 使用 JSDoc 3 语法指定对象类的正确方法是什么？
文章推荐： ruby-on-rails - Ruby on Rails。如何在 :belongs to relationship? 中使用 Active Record .build 方法
文章推荐： python - 在 python 中使用 azure REST api 将 Runbook 创建为草稿时，我遇到了错误...!
文章推荐： unit-testing - 如何防止从使用dart中的ExpectAsync的单元测试进行？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com