From d6564f1d03ff89a84a53bf04d136723c211bc1b3 Mon Sep 17 00:00:00 2001 From: yumoqing Date: Fri, 23 Aug 2024 17:51:34 +0800 Subject: [PATCH] bugfix --- bricks/css/bricks.css | 17 +++++++++++++++++ bricks/rtc.js | 29 ++++++++--------------------- 2 files changed, 25 insertions(+), 21 deletions(-) diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css index f084b1c..515bbf3 100755 --- a/bricks/css/bricks.css +++ b/bricks/css/bricks.css @@ -21,6 +21,23 @@ body { background-color: #f5f5f5; border: 1px solid #888888; } +.video-in-video { + position: relative; +} + +.bigvideo { + position: absolute; + width: 100%; + height: 100%; + z-index: 0; +} + +.smallvideo { + position: absolute; + width: 25%; + height: 25%; + z-index: 2; +} .griddata { display: grid; diff --git a/bricks/rtc.js b/bricks/rtc.js index 5b600f1..b39b11a 100644 --- a/bricks/rtc.js +++ b/bricks/rtc.js @@ -38,33 +38,20 @@ bricks.RTCClient = class extends bricks.VBox { this.videobox.add_widget(this.localVideo); this.videobox.add_widget(this.remoteVideo); this.add_widget(this.videobox); + this.videosize_switch(); this.pc; this.onlineList= []; this.init_websocket(); } videosize_switch(){ - if(this.local_small){ - this.local_small = false; - this.localVideo.set_style('width','100%'); - this.localVideo.set_style('height','100%'); - this.localVodeo.set_style('zIndex', 0); - this.remoteVideo.set_style('width','25%'); - this.remoteVideo.set_style('height','25%'); - this.remoteVodeo.set_style('zIndex', 2); - this.remoteVodeo.set_style('position', 'absolute'); - this.remoteVodeo.set_style('bottom', '5px'); - this.remoteVodeo.set_style('right', '5px'); - } else { + if(! this.local_small){ this.local_small = true; - this.remoteVideo.set_style('width','100%'); - this.remoteVideo.set_style('height','100%'); - this.remoteVodeo.set_style('zIndex', 0); - this.localVideo.set_style('width','25%'); - this.localVideo.set_style('height','25%'); - this.localVodeo.set_style('zIndex', 2); - this.localVodeo.set_style('position', 'absolute'); - this.localVodeo.set_style('bottom', '5px'); - this.localVodeo.set_style('right', '5px'); + this.localVideo.set_css('smallvideo'); + this.remoteVideo.set_css('bigvideo'); + } else { + this.local_small = false; + this.localVideo.set_css('bigvideo'); + this.remoteVideo.set_css('smallvideo'); } }