songz / cordova-plugin-opentok

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

z-index not working and ui not updating in ionic 3 #250

Open mizanr opened 3 years ago

mizanr commented 3 years ago

I want to show subscriber behind the webview and publisher above the webview. How is this possible.. OT.OT.updateViews(); not working.

html code.


typescript

this.session = OT.initSession(this.apiKey, this.sessionId);

this.session.on({
  streamCreated: (event: any) => {
  console.log(`-----Stream created`, event);
   this.session.subscribe(event.stream, 'subscriber'); 
  },
  streamDestroyed: (event: any) => {
    console.log(`------Stream destroyed`, event);
   // console.log(`Stream ${event.stream.name} ended because ${event.reason}`);
    OT.updateViews();        
  },
  connectionCreated:(event :any) =>{
    console.log(`------connection created`, event);
   // this.session.publish(this.publisher);
  },
  sessionConnected: (event: any) => {
    console.log("------------------session connected",event);
    this.publisher = OT.initPublisher('publisher',{height:100, width:70});
    this.issessionconnected=true;
    setTimeout(()=>{
      this.session.publish(this.publisher);
      OT.updateViews(); 
    },200)
  }
});

this.session.connect(this.token, (error: any) => {
  if (error) {
    console.log(`There was an error connecting to the session ${error}`);
  }
  else{
  }
});

css file

    .videostream{
    pointer-events: none !important;
    height:100%;
    width:100%;
    bottom:0px;
    right:0px;
    #subscriber{
        // background-color:black !important;
        height:100%;
        width:100%;
        z-index:-3 !important;
        video{
            z-index:-3 !important;
        }

    }
    #publisher{

          // height:100px !important;
          // width:70px !important;
          position:absolute;
          top:70px;
          left:20px;
           z-index:-1 !important;

      video{
        // height:100px !important;
        // z-index:-1 !important;
        // width:70px !important;
      }
    }
}
maxwell09 commented 7 months ago

Check out my fork, I worked on those issues among others: https://github.com/maxwell09/cordova-plugin-opentok