This commit is contained in:
yumoqing 2024-08-23 17:51:34 +08:00
parent 5dd0ba3e58
commit d6564f1d03
2 changed files with 25 additions and 21 deletions

View File

@ -21,6 +21,23 @@ body {
background-color: #f5f5f5; background-color: #f5f5f5;
border: 1px solid #888888; 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 { .griddata {
display: grid; display: grid;

View File

@ -38,33 +38,20 @@ bricks.RTCClient = class extends bricks.VBox {
this.videobox.add_widget(this.localVideo); this.videobox.add_widget(this.localVideo);
this.videobox.add_widget(this.remoteVideo); this.videobox.add_widget(this.remoteVideo);
this.add_widget(this.videobox); this.add_widget(this.videobox);
this.videosize_switch();
this.pc; this.pc;
this.onlineList= []; this.onlineList= [];
this.init_websocket(); this.init_websocket();
} }
videosize_switch(){ videosize_switch(){
if(this.local_small){ 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 {
this.local_small = true; this.local_small = true;
this.remoteVideo.set_style('width','100%'); this.localVideo.set_css('smallvideo');
this.remoteVideo.set_style('height','100%'); this.remoteVideo.set_css('bigvideo');
this.remoteVodeo.set_style('zIndex', 0); } else {
this.localVideo.set_style('width','25%'); this.local_small = false;
this.localVideo.set_style('height','25%'); this.localVideo.set_css('bigvideo');
this.localVodeo.set_style('zIndex', 2); this.remoteVideo.set_css('smallvideo');
this.localVodeo.set_style('position', 'absolute');
this.localVodeo.set_style('bottom', '5px');
this.localVodeo.set_style('right', '5px');
} }
} }