Giter Club home page Giter Club logo

google-meet-pip's Introduction

image

Google Meet PiP

A Google Chrome extension that displays a selected Google Meet participant's video in a Picture-in-Picture window.

Use Cases

  • Keep your video stream in display while presenting something else in your screen
  • Keep a selected participant visible while navigating to other tabs or applications

Limitations

  • In this version, only the participants that are displayed that are visible in the main meeting layout can be selected to be displayed in a Picture-in-Picture window

Installation

This extension can be installed from the Chrome Web Store. Install from Chrome Web Store

We can also build and load the extension manually with the following steps:

# Clone the repository
git clone [email protected]:arnellebalane/google-meet-pip.git
cd google-meet-pip

# Install dependencies
npm ci

# Build the extension
npm run build
npm run watch  # useful for development

After loading and building the project, we load the unpacked copy of this extension into our browser:

  • Go to chrome://extensions
  • Toggle the "Developer mode" on at the top-right corner of the page
  • Click on the "Load unpacked" button that appears
  • Browse to the repository from the file browser and open it
  • We should now have development version of the extension!
  • Go to https://meet.google.com/ and enjoy building and testing the extension!

Usage

After installing the extension following the Installation instructions, it will then appear in the extensions menu in our Google Chrome browser.

While in a Google Meet meeting, click on the extension's icon to display a list of participants then choose the one to display in a Picture-in-Picture window.

Contributing

Thank you for considering to contribute to this project! Below is a quick overview of how to start contributing:

  • Fork this repository into your Github account
  • Follow the installation steps above to run a development version of the extension
  • When ready, open a pull request from your fork into this repository

For more information about contributing, please read the Contributing guidelines.

License

MIT License

google-meet-pip's People

Contributors

arnellebalane avatar igorcafe avatar jaklan avatar puemos avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

dev-yol tim-klarna dva00jnd jaklan trongthanh igorcafe madhugb jeffli1993

google-meet-pip's Issues

Improve detection of meeting participants

The way meeting participants are detected right now is at follows:

  • Extension looks for all video elements on the page
  • For each of those video elements, it tries to traverse the DOM to identify the name of that participant
  • Participants with the same name are deduplicated (this is because a single participant could have multiple video elements even when they only joined once)

This current way causes some participants not appearing in the list of participants to choose from (i.e. when they don't have their camera enabled, they might not have a video element associated with them).

Some improvements that can be done are:

  • Make sure to display participants separately even if they have the same name (could happen when let's say they joined the meeting using different devices/tabs)
  • Make sure that all participants (even the ones that are not displayed in the main meeting screen) are available for selection and display in Picture-in-Picture

Doesn't work anymore

I was using it almost everyday and suddenly it stopped working.
Current version: 1.2.0
image

Close Picture-in-Picture window when no longer in meeting

When you leave the meeting while Picture-in-Picture is open, the video just freezes and doesn't close automatically. It would be great to close it when the user is no longer in the meeting (leave meeting, close tab, navigate to another page, etc.)

Can't select my video if it's not a tile

As in the title - I can select my video to display in the PiP window if it's a tile, but if not (== it's a floating window in a corner, which is the default GMeet behaviour) - it's not visible on the list. The reason is the below function:

google-meet-pip/src/lib/google-meet.js

Lines 51 to 61 in 55842e6

function getParticipantNameForVideo(video) {
// First check if this video is displayed in the main grid.
const ancestor = video.parentElement.parentElement;
let name = ancestor.querySelector('[data-self-name]');
if (!name) {
// If not, check if this video is the self video at the top-right corner.
const children = [...ancestor.parentElement.children];
name = children.find((child) => 'selfName' in child.dataset);
}
return name ? name.textContent : null;
}

and the if statement to handle that case - it just doesn't work anymore, children.find((child) => 'selfName' in child.dataset) doesn't find anything.

Fortunately there's a more generic solution to that, which also makes the function simpler - I will send it in a moment in a PR.

cc: @arnellebalane

Still works?

I tried to use the extension for the first time, downloading from Google Extensions, I couldn't use the extension!

Extension crashes when my camera is turned off

As I reported in #19, the extension stopped working after the recent releases - the PiP window immediately disappears just after showing up. Today I finally found some time to play a bit with the code and I found that:

google-meet-pip/src/lib/google-meet.js

Lines 193 to 200 in 55842e6

function syncCameraState(control) {
if (isControlActive(control)) {
navigator.mediaSession.setCameraActive(true);
} else {
navigator.mediaSession.setCameraActive(false);
exitPictureInPicture();
}
}

The meaning of the above code is simply:

If you have your camera turned off, set the camera as inactive and... close the PiP window.

which of course doesn't make sense if we display another person's video in PiP, not ourselves. Due to that the extension is unusable, but after removing theexitPictureInPicture(); line - the problem is solved.

cc: @arnellebalane

Move Picture-in-Picture actions into the Google Meet page directly

Basically a Chrome update now requires requestPictureInPicture calls to require a user gesture. So we can't call it now from the popup window of the extension. We need to move the buttons that enable Picture-in-Picture directly into the page itself so the user needs to click on it.

The current idea is to add a Picture-in-Picture button in each video in the call, and the user will click on the button for participant that they want to place in a PiP window. We will also phase out the PiP extension popup UI.

PIP implentation

how implement pip like google meet based with exciting features?

Doesn't work anymore after 1.1.1 release

Hi, when clicking "Show" button from the pop-up - the PiP window appears for less than second in the bottom right corner, then disappears and no more happens, so the extension at the moment is unfortunately unusable 😕

Enable video conferencing controls in PiP window

Hey, I would like to have something like this. Whenever I share my entire screen it is hard to mute and unmute. Is there any way to add the mute and unmute button to the pip extension. If it is possible it will be very helpful. Thank you.

Always enable the extension in any Google Meet URL

The current behavior only enables it in a Google Meet meeting URL, but there are cases where it fails:

  • Google Meet's Slack integration uses two slashes in the URL which doesn't pass the regex pattern

It should be just safe to enable the extension all the time as long as we're in Google Meet. The popup UI will display the appropriate error in case the user is not in a meeting.

Popup UI when Picture-in-Picture API is not supported

Currently when Picture-in-Picture API is not supported, the page action remains disabled and the content script will just log something to the console. This is potentially confusing for some users who might wonder why they can't enable the extension while they are in a Google Meet meeting.

To address this, the page action can be enabled regardless if PiP is supported or not. We can display custom popup UI when PiP is not supported instead.

History permission

Hi there! Why does the extension need access to the browsing history?

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.