Skip to content

💻 ➡️ Code for initiating screen capture/share in Chrome for an iframed application

License

Notifications You must be signed in to change notification settings

ostrichegret/iframe-screenshare

 
 

Repository files navigation

iFrame Screenshare

Greenkeeper badge Build Status npm version

Purpose

Google Chrome uses the chrome.desktopCapture extension API to enable capturing screens or windows (which can then be used in combination with WebRTC) for screen sharing. In order to use these APIs to enable screen capture from a cross-origin iframe, it's less straightforward. This package does the work of implementing the logic for messaging between parent and frame windows, and between the parent window and the chrome extension. It also goes a step forward with logic for inline installation via the chrome runtime API.

Example

A consumer facing website for a company called Examples'ᴙ'Us at https://examplesrus.com embeds PureCloud (at https://mypurecloud.com) in a popover frame for enabling customer service chat and screen sharing. Because Chrome requires an extension for screen capture, Examples'ᴙ'Us wants the extension to be branded for their company, not for PureCloud, because their customers should associate it with them, not with PureCloud. Thus, Examples'ᴙ'Us deploys a branded (whitelabel) extension to the Chrome WebStore, and uses iframe-screenshare to connect the wires.

How it works

Take our previous example: Examples'ᴙ'Us branded extension enabling screen capture for screen sharing in an embedded PureCloud popover iframe.

iframe-screenshare

API

Parent Window

// webstore url for inline installation is optional
const webstoreUrl = 'https://chrome.google.com/webstore/detail/hkgejheiebikekdmadhjgohfofafldbe';

import { initializeScreenShare } from 'iframe-screenshare';
// or `const { initializeScreenShare } = require('iframe-screenshare');`
initializeScreenShare(webstoreUrl);

or

<script src="/iframe-screenshare.min.js" type="text/javascript"></script>
<script type="text/javascript">
  iframeScreenshare.initializeScreenShare()
</script>

Child Frame

import { requestScreenShare } from 'iframe-screenshare';
// or `const { requestScreenShare } = require('iframe-screenshare');`
requestScreenShare();

or

<script src="/iframe-screenshare.min.js" type="text/javascript"></script>
<script type="text/javascript">
  iframeScreenshare.requestScreenShare()
</script>

About

💻 ➡️ Code for initiating screen capture/share in Chrome for an iframed application

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 85.3%
  • HTML 8.4%
  • Shell 6.3%