Video Chat Integration

Updated on 17 Sep 2020
5 Minutes to read

Print
Share
Dark
Light
PDF

Article Summary

Share feedback

Thanks for sharing your feedback!

If you are looking to enable ScreenMeet's Live video chat product with Cobrowse. Here are the following steps to enable setup.

On your website server please create a new url for the combined Cobrowse and Live chat experience and use the following template.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src="https://cobrowse.screenmeet.com/videoAssist.js"></script>
    <link rel="stylesheet" href="https://cobrowse.screenmeet.com/videoAssist.css" type="text/css" />
  </head>
  <body>
    <div id="screenMeetLiveContainer">
      <div id="screenMeetLiveContainerHeader"></div>
      <iframe id="screenMeetLivePortal" allow="camera *;microphone *"></iframe>
    </div>
    <iframe id="screenMeetCobrowseContainer" src=""></iframe>
    <iframe
      id="cbSessionCarrier"
      width="1"
      height="1"
      style="display: none"
      referrerpolicy="origin"
      src="https://edge.screenmeet.com/v3/cobrowse/multidomain"
    ></iframe>
    <div id="screenMeetClickMask"></div>
  </body>
</html>

Once you have created that url, i.e https://www.example.com/assist , go to the ScreenMeet console as an Admin for your organization and edit the organization -> Cobrowse settings.

In the Cobrowse settings, change the Combined Session Url to point to the new url and then click Save Configuration.

Customization

The template given is mostly a bare html page with just enough elements to accomplish combined Cobrowsing plus persistent Live chat. There are a few elements in the live chat integration which can be stylized. In the template we include a css file which has the necessary styles for these elements but one could pick and choose. Please read the provided css file for reasonable defaults.


https://cobrowse.screenmeet.com/videoAssist.css

Essential Elements

Element's with these id's are required by the Cobrowse implementation to host a combined Cobrowse plus Live experience. If they are not present on the page then it will likely break the experience.

screenMeetCobrowseContainer - This iframe is where the Cobrowse session is placed. It ideally should occupy the majority of the screen, but it certainly could be trimmed to add room for other controls, links, or branding.

screenMeetLiveContainer - This is the floating control for the Live video chat. It is the most customizable element in terms of style. It is important that it is positioned absolute and has a positive z-index so that it may float over the Cobrowse interface. It's height, width, and starting position are configurable with css. The ScreenMeet Live product does have a minimum size require of at least 325px by 325px;

screenMeetLiveContainerHeader - This is the draggable header which appears over the Live video chat. It's color, shape, and size are configurable with css.

closeLiveButton - This button is added dynamically to the ScreenMeetLiveContainerHeader. It is a div element which you can style with this css selector: .cb-video__close.cb-video__close--custom

.cb-video__close {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background-image: url('https://cobrowse.screenmeet.com/icons/close.svg');
  background-repeat: no-repeat;
  background-size: cover;
}

.cb-video__open {
  height: 20px;
  width: 30px;
  margin-right: 10px;
  background-image: url('https://cobrowse.screenmeet.com/icons/camera.svg');
  background-repeat: no-repeat;
  background-size: cover;
}

openLiveButton - When the live video element has been closed by the user they may rejoin the session by clicking this. It is a div element which you can style with this css selector: .cb-video__open.cb-video__open--custom

screenMeetLivePortal - This iframe hosts the ScreenMeet Live video chart url generated.

screenMeetClickMask - This is a very particular element which is present in the page to prevent the user drag events from falling through to Cobrowse iframe below and disrupting the user from repositioning the live chat. During a drag event it blocks all pointer-events.If you customize the styles of the screenMeetLiveContainer make sure that the z-index of this element is smaller so that dragging and dropping is not interrupted. This is the default and recommend styling for it.

#screenMeetClickMask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  box-sizing: border-box;
  pointer-events: none;
}

Events

When starting and ending a cobrowse plus video chat session the client will be redirected to the combined session assist page, and returned to their current context after the cobrowse session has ended. However, if a page has an active "beforeunload" listener which prompts the user to prevent them from navigating away then the cobrowse plus video chat experience is broken. To prevent this broken behavior it is necessary to add some additional code to the page to register handlers for cobrowse events. Here are some examples, Callbacks have wider browser support including IE 11, promises are somewhat nicer to work with. The event for redirect will include the destination url. If the callback is not called, or an error is put into the first argument of the callback

window.Cobrowse.modal.commandQueue.push(() => {
  window.Cobrowse.modal.eventManager.addEventCallback('redirect', (event, callback) => {
    //disable beforeunload handlers
    window.removeEventListener("beforeunload", yourUnloadHandler);
    callback(null, true);
  })
})

Or if you prefer a promise based workflow.

window.Cobrowse.modal.commandQueue.push(() => {
  window.Cobrowse.modal.eventManager.addEventListener('redirect', async (event) => {
    //disable beforeunload handlers
    window.removeEventListener("beforeunload", yourUnloadHandler);
    return true
  })
})

type CBEvent = {
    kind: string;
};
type CBListener = <T extends CBEvent>(event: T) => Promise<void>;

type CBCallback = <T  extends CBEvent>(event: T, cb: (err: Error | null | undefined, success?: any) => void) => void;

type CBRedirectEvent = {
  kind: "cbRedirect";
  url: string;
}

interface Window {
  Cobrowse: {
    modal?: {
      eventManager: {
        addEventCallback(eventName: string, handler: CBCallback): void;
        addEventListener(eventName: string, listener: CBListener): void;
      }
    }
  }
}

CSS

body {
  margin: 0px;
  background-color: black;
}

#screenMeetLiveContainer {
  box-sizing: border-box;
  position: absolute;
  background-color: black;
  z-index: 100;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 40px -5px rgba(0,0,0,0.6);
  transition-property: width, height, top, left, transform;
  transition-duration: .5s;
  width: 350px;
  height: 420px;
}

#screenMeetLiveContainer.cb-videoclosed {
  height: 60px;
  width: 90px;
}

.cameraIconFlexbox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 90px;
  height: 60px;
}

@media only screen and (max-width: 500px) {
  #screenMeetLiveContainer.cb-videomaximized {
    transform: scale(.65, .65);
    transform-origin: 0% 0%;
  }
}

@media only screen and (max-width: 500px) {
  .start-position.cb-videomaximized {
    left: 10px;
    top: calc(100% - 285px);
  }
}

.start-position {
  left: 10px;
  bottom: 10px;
}

.cb-videominimized {
  height: 100px;
  width: 100px;
}



#screenMeetLiveContainerHeader {
  box-sizing: border-box;
  background-color: #334759;
  cursor: move;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 8px;
}

#screenMeetLivePortal {
  box-sizing: border-box;
  width: 100%;
  margin: 0px;
  background-color: black;
  position: absolute;
  border: 0px;
  height: 380px;
}

.cb-videominimized #screenMeetLivePortal,  #screenMeetLiveContainer.cb-videominimized {
  height: 100px;
  width: 100px;
}

#screenMeetCobrowseContainer {
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  border: 0px;
}

#screenMeetClickMask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  box-sizing: border-box;
  pointer-events: none;
}

.cb-video__close {
  width: 24px;
  height: 24px;
  margin-left: 5px;
  background-image: url('https://cobrowse.screenmeet.com/icons/close_icon.svg');
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}

.cb-video__minimize {
  width: 24px;
  height: 24px;
  background-image: url('https://cobrowse.screenmeet.com/icons/min_icon.svg');
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}


.cb-video__open {
  height: 30px;
  width: 45px;
  margin-right: 20px;
  background-image: url('https://cobrowse.screenmeet.com/icons/camera.svg');
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}

.cb-videooverlay {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 400;
  cursor: pointer;
}

.cb-videomaximized .cb-videooverlay {
  pointer-events: none;
  margin-top: 48px;
}

.cb-videominimized .cb-videooverlay {
  pointer-events: auto;
}



.header-title {
  margin-right: auto;
  margin-left: 5px;
  font-family: sans-serif;
  color: white;
}

Was this article helpful?

What's Next

Multiple Domain and Subdomain support