Web SDK CSS with `ionic` + `angular` (not `react`)

Client Web SDK
#1

I’ve got a basic implementation of the Web SDK working with my ionic+angular app. I can join a meeting and see video, but so far the SDK not recognize my camera in Chrome (more elsewhere).

But the CSS to get the Zoom window to behave nicely within an angular app was very challenging––and still not complete.

Am I doing it wrong or missing something?

here’s an example of the CSS I had to add to get the zoom window to stay within a flexbox container:

<div class="flex-wrap zoom">
  <div id="zoom-container">
      // zoomContainerEl.appendChild(zoomMtgRootEl);
      <div id="zmmtg-root" class="hydrated"></div>
      // reactModals = document.getElementsByClassName('ReactModalPortal');
      // Array.from(reactModals).forEach( el=>zoomContainerEl.appendChild(el) );
    </div>

  <ion-content>
    // ionic+angular markup
    </div>
<div>

/**
 * Zoom CSS fixes
 */
#zmmtg-root#zmmtg-root {
  position: relative;
  border-radius: 10px;
  display: none;
  &.hydrated {
    display: block;
  }
  &.portrait {
    margin: 0 auto;   // center
    min-height: 211px;
    height: 100%;
    max-width: calc( 100% - 40px);
  }
  &.landscape {
    margin: 20px auto 0;   // center
    max-width: calc( 100% - 16px);
    height: calc(100% - 40px);
  }
  @media (max-width: 767px) {
    // portrait
    & {
      margin: 0 auto;   // center
      min-height: 211px;
      height: 100%;
      max-width: calc( 100% - 40px);
    }
  }
  @media (min-width: 768px) {
    // landscape
    & {
      margin: 20px auto 0;   // center
      max-width: calc( 100% - 16px);
      height: calc(100% - 40px);
    }
  }

  .meeting-app {
    &, .active-main {
      width: 100% !important;
      height: 100% !important;  
    }
  }
  .meeting-client {
    &, .meeting-client-inner {
      position:unset;
    }
    #wc-content {
      canvas {
        width: 100% !important;
        height: 100% !important;
      }
      // contains meeting video stream
      position: unset;
      #wc-container-left > div {
        // vertical center video
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      #sv-active-speaker-view {
        // sv=="speaker-view" or spotlight video?
        .active-main {
          // height: 100% !important;
          .active-avatar {
            height: 50%;
          }
          canvas#sv-active-video {
          }
          canvas#active-my-canvas {
            position: absolute;
            left:0;
            z-index: 2;
          }
        }
      }
      #wc-footer.footer {
        height: 32px;
        border-radius: 0 0 10px 10px;
        #wc-footer-left {
          min-width: 116px;
          .join-audio {
            width: 48px;
            min-width: 48px;
          }
        }
        .footer-button__button {
          width: 48px;
        }
        .footer__leave-btn {
          line-height: 100%;
        }
      }
    }
    #dialog-join.diaout-layer {
      // contains 'join audio by computer' button
      width:unset !important;
      bottom: unset !important;
      position: relative;
    }
  } // end: .meeting-client-inner
}

// unset react/zoom CSS
body.undo-zoom-react.undo-zoom-react {
  min-height: unset;
  min-width: unset;
}

// fit to container
.ReactModalPortal.ReactModalPortal {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  .ReactModal__Overlay {
    position: relative !important;
    height: 100%;
  }
  .suspension-canvas-layer {
    canvas#suspension-active-video {
      // marked as [zoom username]
      // incomplete
    }
    canvas#suspension-my-canvas {
      // selfie video for [player.displayName]
      // incomplete
    }
    video#suspension-my-video {
      // incomplete
    }
  }
}

body > .ReactModalPortal.ReactModalPortal{
  display:none;
}


.flex-wrap.zoom {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  height: 100%;
  #zoom-container {
    position: relative;
    display: none;
    &.hydrated {
      display: block;
    }
  }
}

.flex-wrap.zoom .ReactModalPortal {
  // does NOT work here, must be in variables.scss
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  .ReactModal__Overlay {
    position: relative;
    height: 100%;
  }
}

@media (max-width: 767px) {
  // portrait
  .flex-wrap.zoom {
    flex-direction: column;
    height: 100%;
    width: 100%;  // check
    justify-content: center;
    #zoom-container {
      margin: 5px 0;
      width: 100%;
      flex: 1;
      min-height: 221px;
    }
    ion-content {
      flex-grow: 3;
      > ion-grid:first-child {
        padding-top: 0;
        ion-col:first-child {
          padding-top: 0;
        }
      }
    }
  }
}

@media (min-width: 768px) {
  // landscape
  .flex-wrap.zoom {
    flex-direction: row;
    width: 100vw;
    height: 100%;
    #zoom-container {
      height: 100%;
      flex: 3;
    }
    ion-content {
      min-width: 375px;
      flex: 2;
    }
  }
}
/**
 * END Zoom CSS fixes
 */

#2

Hey @mlininkl,

Thanks for sharing the CSS you used to adjust the Web SDK sizing.

For the camera issue, please try serving your site over https, that should fix the issue.

-Tommy

#3