search

songz / cordova-plugin-opentok

Cordova Plugin for OpenTok - add webrtc video to your iOS or Android App
Other
162 stars 270 forks source link

Overlaying publisher-video element on top of subscriber-video element not working #244

Open primashah opened 6 years ago

primashah commented 6 years ago

Hi , I am working on ionic 2 cordova app.

I am trying to set publisher's Video with absolute position in a way that it sits on top of subscriber video. I tried following css and code to make it work, but the publisher video is always positioned on top left corner of IPad screen:

css

.publisher-video{
      height: 120px;
      width: 250px;
      position: absolute;
     bottom: 0px;
      right: 0px;
      z-index: 9;
}

The publisher properties used for initialisation are:

{

  width: "250px",
  height: "120px",
  resolution: "1280x720",
  publishAudio: true,
  publishVideo: true

}

The subscriber properties are: {

  width: "100%",
  height: "100%"

}

msach22 commented 6 years ago

@primashah Are you using the updated plugin ? https://github.com/opentok/cordova-plugin-opentok

alexisjcr07 commented 6 years ago

Hello, I have the same error, but in my case I am trying to show another view on the video.

my code: .ts

none(){ this.cc = 'none'; this.style = 'none'; } block(){ this.cc = 'block'; this.style = 'block'; }

    streamCreated: (event) => {

    let subscriberProperties = {width:"100%",height:"91% !important"};

    if(event.stream.videoType === 'screen') {
    this.session.subscribe(event.stream, 'screen-preview', subscriberProperties);
    this.none();
 }else 
   {
    this.session.subscribe(event.stream, 'subscriber', subOptions);
    this.block();
    OT.updateViews();

   }
  },

.html

<div id="subscriber" [class]="cc" [ngStyle]="{'display': style}">

.css

subscriber {

width: 100% !important;
top: 0;
height: 91% !important;
overflow: hidden;
position: fixed;
margin: 0px;
background: #0c0c0c;
left: 0px;

}

.none { width: 100% !important; top: 0; height: 91% !important; overflow: hidden; position: relative; margin: 0px !important; left: 0px; display: none !important;

}

.block { width: 100% !important; top: 0; height: 91% !important; overflow: hidden; position: relative; margin: 0px !important; left: 0px; display: block !important;

}

publisher {

width: 30% !important;
height: 18% !important;
overflow: hidden;
position: fixed;
margin: 0px !important;
right: 14px;
bottom: 80px;
left: auto;
z-index: 40;

}

screen-preview {

width: 100% !important;
top: 0;
height: 91% !important;
overflow: hidden;
position: fixed;
margin: 0px !important;
background: transparent !important;
z-index: 999;
left: 0px;

}

mmubasher commented 5 years ago

I am using following design and it works perfectly for me using cordova-plugin-opentok 

<div id="publisher"
     style="width: 30vh; height: 25vh; position: absolute; top: 0; left: 0; z-index: 1000; pointer-events:none;"></div>
<div id="subscriber"
     style="width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 500; pointer-events:none;"></div>