2 | [Chrome extension](https://chrome.google.com/webstore/detail/pop-out-jitsi-meet/boklbbjieahngbnhdmlhldjjibdnnbcn) to open [Jitsi Meet](https://jitsi.org/) videos in pop-out windows. Useful if you want to arrange your video conference across multiple monitors, or if you want to grab a clean feed of the videos with e.g. [OBS Studio](https://obsproject.com/).
3 |
4 | 
5 |
6 | ### How to use
7 | 1. Install the extension from the [Chrome Web Store](https://chrome.google.com/webstore/detail/pop-out-jitsi-meet/boklbbjieahngbnhdmlhldjjibdnnbcn).
8 | 2. Click the extension icon  in the top right of your browser toolbar.
9 | 3. Pick a nickname, and generate a hard to guess room name.
10 | 4. Choose the desired server: Server 1 [meet.jit.si](https://meet.jit.si/), Server 2 [8x8.vc](https://8x8.vc/) or Server 3 [jitsi.riot.im](https://jitsi.riot.im/)
11 | 5. Hit enter to open the main Jitsi Meet window. It will ask your for microphone and camera permission. Click "Allow", otherwise it won't work. If you click "Block", then Jitsi won't work until you manually remove the servers from these two block lists: `chrome://settings/content/camera` and `chrome://settings/content/microphone`.
12 | 6. Click a video thumbnail on the left to open it in a pop-out window.
13 | 7. Put the pop-out video where you want, maybe on a different monitor, and press enter to toggle full screen.
14 |
15 | The extension icon shows a green square while you're in a conference. Click the icon during a conference to copy the invite link, to invite others to the conference. From there you can also click the "Open" button to jump back to the main Jitsi Meet window, or "Close" to stop the conference and close all related windows.
16 |
17 | 
18 |
19 | ### Server compatibility
20 | This extension works with the Jitsi Meet servers hosted at [meet.jit.si](https://meet.jit.si/), [8x8.vc](https://8x8.vc/) and [jitsi.riot.im](https://jitsi.riot.im/).
21 |
22 | ### Browser compatibility
23 | Jitsi Meet currently only works properly in Chromium based browsers ([not Firefox](https://github.com/jitsi/jitsi-meet/issues/4758)). This extension has been developed for Google Chrome. I briefly tested it in Brave browser, but it doesn't ([yet](https://github.com/brave/brave-browser/issues/9009)) work there. May work in other Chromium based browsers like the new [Microsoft Edge](https://www.microsoft.com/edge) or [Opera](https://www.opera.com/).
24 |
25 | ### Self hosted Jitsi Meet
26 | This extension doesn't work with other instances of Jitsi Meet. If you host your own version of Jitsi Meet, or want to use other servers, then you need to fork this extension and add the desired domains to "matches" for "content_scripts" in the manifest.json file. Additionally you'd have to add the desired domains to `window.servers` in the background.js file. Optionally, you may want to host your own [invite link](https://github.com/Jip-Hop/jitsi-pop/blob/master/index.html). If you do, you also need to replace the current invite link domain with your own domain in [browser_action.js](https://github.com/Jip-Hop/jitsi-pop/blob/master/extension/src/browser_action/browser_action.js#L80) and [inject/index.js](https://github.com/Jip-Hop/jitsi-pop/blob/master/extension/src/inject/index.js#L861) and add your domain to "externally_connectable" in the manifest.json file.
27 |
28 | ### Generic extension
29 | Also check out [Pop-up Videos](https://github.com/Jip-Hop/pop-up-videos): my more generic extension to open videos, on any webpage, as pop-up windows.
30 |
31 | ### Capturing the streams
32 | The reason I made this extension is to reliably capture a clean feed from the participants in the video conference, using [OBS Studio](https://obsproject.com/). Currently window grabbing only works well on Windows (not [MacOS](https://obsproject.com/forum/threads/screen-tearing-random-glitching-w-window-capture.95181/)), so these instructions are Windows only.
33 | 1. Download, install and open [OBS Studio](https://obsproject.com/).
34 | 2. [Turn off Hardware Acceleration in Google Chrome](https://www.howtogeek.com/412738/how-to-turn-hardware-acceleration-on-and-off-in-chrome/), otherwise OBS will just [capture a black window](https://obsproject.com/forum/threads/option-to-turn-off-capture-cursor-when-recording-a-window.117388/). In the [future](https://obsproject.com/forum/threads/windows-graphics-capture-also-captures-mouse-pointer.117503/) you may keep Hardware Acceleration enabled, when using the new Windows Graphics Capture method. However at the moment that mehtod is unable to hide the mouse cursor, so in a single monitor setup that's a dealbreaker.
35 | 3. Start a conference using the extension in Google Chrome.
36 | 4. In the main Jitsi Meet window, click a video thumbnail on the left to open it in a pop-out window. Go into full screen by pressing the enter button.
37 | 5. Leave the full screen window open, and go back to OBS Studio, using e.g. ALT+TAB. In OBS, add a "Window Capture" to the "Sources". Make sure to pick the pop-out window in the "Window" dropdown. The window name follows the following pattern: "\[chrome.exe\]: Jitsi Meet | nickname". In the "Capture Method" dropdown you should choose be "BitBlt", otherwise it's not (yet) possible to hide the mouse cursor. In the third dropdown, "Window Match Priority", make sure to select "Window title must match" and uncheck "Capture Cursor".
38 | 6. Arrange the source in your scene however you like.
39 | 7. Repeat steps 4 to 6 to add more videos from the conference to OBS.
40 | 8. Keep the full screen pop-out windows running in the background. Put the Jitsi Meet main window on top to keep an overview of what's happening in the conference, and put the OBS window next to it, to control the final output.
41 |
42 | Note: for the window capture to work reliably, it's important that every participant in the conference uses a unique nickname. Else the window capture won't pick the right window each time.
43 |
44 | 
45 |
--------------------------------------------------------------------------------
/extension/src/inject/video.js:
--------------------------------------------------------------------------------
1 | const inIframe = self !== top;
2 | const inPopup = window.opener !== null && window.opener !== window;
3 |
4 | const jitsipop = (window.jitsipop = inPopup
5 | ? window.opener.jitsipop
6 | : window.parent.jitsipop);
7 |
8 | const mainWindow = jitsipop.mainWindow;
9 |
10 | var sourceVid,
11 | targetVid,
12 | displayName,
13 | participantId,
14 | videoId,
15 | enableMappertje,
16 | myMapper;
17 |
18 | const handleFirstPlay = () => {
19 | targetVid.removeEventListener("play", handleFirstPlay);
20 | const frameElement = window.frameElement;
21 | frameElement && frameElement.classList.add("firstplay");
22 | };
23 |
24 | // TODO: currently can't call iframe.contentWindow.setup(config);
25 | // inside mappertje (in modules/mapper/index.js) because main.js
26 | // is added via a script tag, and executes in a JavaScript page context,
27 | // not in the context of this extension...
28 |
29 | const syncSource = () => {
30 | if (enableMappertje)
31 | if (myMapper) {
32 | if (
33 | myMapper &&
34 | myMapper.getStream &&
35 | myMapper.getStream() !== sourceVid.srcObject
36 | ) {
37 | myMapper.setStream(sourceVid.srcObject);
38 | }
39 | } else {
40 | jitsipop.mapper({
41 | stream: sourceVid.srcObject,
42 | targetElement: document.body,
43 | initialState: jitsipop.getMappertjeState(videoId),
44 | readyHandler: (newMapper) => {
45 | myMapper = newMapper;
46 |
47 | const unloadHandler = () => {
48 | jitsipop.setMappertjeState(videoId, myMapper.getCurrentState());
49 | };
50 |
51 | myMapper.addEventListener("unload", unloadHandler);
52 | },
53 | });
54 | }
55 | else if (targetVid.srcObject !== sourceVid.srcObject) {
56 | targetVid.srcObject = sourceVid.srcObject;
57 | }
58 | };
59 |
60 | const syncVideo = () => {
61 | try {
62 | if (inPopup && (!mainWindow || mainWindow.closed)) {
63 | window.close();
64 | }
65 | } catch (e) {
66 | // In case it's a left over window and we can't access mainWindow
67 | window.close();
68 | }
69 |
70 | const newVid = jitsipop.getParticipantVideo(participantId);
71 | if (!newVid) {
72 | return;
73 | }
74 |
75 | if (sourceVid !== newVid) {
76 | if (sourceVid) {
77 | sourceVid.removeEventListener("loadedmetadata", syncSource);
78 | sourceVid.removeEventListener("pause", syncVideo);
79 | sourceVid.removeEventListener("ended", syncVideo);
80 | sourceVid.removeEventListener("suspend", syncVideo);
81 | }
82 |
83 | sourceVid = newVid;
84 | sourceVid.addEventListener("loadedmetadata", syncSource);
85 | sourceVid.addEventListener("pause", syncVideo);
86 | sourceVid.addEventListener("ended", syncVideo);
87 | sourceVid.addEventListener("suspend", syncVideo);
88 | }
89 |
90 | // Could have been in the if block above,
91 | // but I'd like to sync each time just to be sure
92 | syncSource();
93 | };
94 |
95 | const setTitle = () => {
96 | document.title =
97 | "Jitsi Meet | " + displayName + (enableMappertje ? " | Mappertje" : "");
98 | };
99 |
100 | const displayNameChangeHandler = (newDisplayName) => {
101 | displayName = newDisplayName;
102 | setTitle();
103 | };
104 |
105 | const participantIdReplaceHandler = (newParticipantId) => {
106 | participantId = newParticipantId;
107 | update();
108 | };
109 |
110 | const update = () => {
111 | participantId = jitsipop.getParticipantId(videoId);
112 | displayName = jitsipop.getFormattedDisplayName(participantId);
113 | setTitle();
114 | syncVideo();
115 | };
116 |
117 | const hashToUrlParams = (hash) => {
118 | return new URLSearchParams("?" + hash.substring(2).replace(/\//g, "&"));
119 | };
120 |
121 | const setup = () => {
122 | // Allow calling these functions from mainWindow
123 | window.displayNameChangeHandler = displayNameChangeHandler;
124 | window.participantIdReplaceHandler = participantIdReplaceHandler;
125 |
126 | const urlParams = hashToUrlParams(location.hash);
127 | videoId = urlParams.get("id");
128 |
129 | if (videoId === null) {
130 | return;
131 | }
132 |
133 | enableMappertje = urlParams.get("mappertje") === "true";
134 | videoId = parseInt(videoId);
135 |
136 | window.onunload = () => {
137 | // Remove this window from the array of open pop-outs in the main window
138 | if (mainWindow && !mainWindow.closed) {
139 | jitsipop.addOrDeleteVideo(
140 | videoId,
141 | window,
142 | inIframe ? "iframe" : "window",
143 | "delete"
144 | );
145 | }
146 | };
147 |
148 | if (!enableMappertje) {
149 | targetVid = document.createElement("video");
150 | targetVid.muted = true;
151 | targetVid.autoplay = true;
152 |
153 | if (inIframe) {
154 | document.documentElement.classList.add("iframe");
155 | targetVid.addEventListener("play", handleFirstPlay);
156 | }
157 |
158 | document.body.appendChild(targetVid);
159 | }
160 |
161 | update();
162 |
163 | // Keep source and target in sync
164 | setInterval(syncVideo, 1000);
165 |
166 | if (inPopup) {
167 | if (mainWindow && !mainWindow.closed) {
168 | jitsipop.addOrDeleteVideo(videoId, window, "window", "add");
169 | }
170 |
171 | tryRuntimeSendMessage({
172 | type: "videoWinLoad",
173 | });
174 |
175 | document.documentElement.addEventListener("keyup", (event) => {
176 | // Number 13 is the "Enter" key on the keyboard,
177 | // or "Escape" key pressed in full screen
178 | if (
179 | event.keyCode === 13 ||
180 | (event.keyCode === 27 && window.innerHeight == window.screen.height)
181 | ) {
182 | // Cancel the default action, if needed
183 | event.preventDefault();
184 | tryRuntimeSendMessage({
185 | type: "toggleFullScreen",
186 | });
187 | }
188 | });
189 | } else if (inIframe) {
190 | if (mainWindow && !mainWindow.closed) {
191 | jitsipop.addOrDeleteVideo(videoId, window, "iframe", "add");
192 | }
193 | }
194 | };
195 |
196 | if (inIframe || inPopup) {
197 | setup();
198 | }
199 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
11 | 422 | Number of open Pop-out windows: 423 | 0. 424 |
425 |426 | Select a stream in the bar on the left and click "Pop-out" to 427 | open the stream in its own window. 428 |
429 |450 | Number of open Mappertje windows: 451 | 0. 452 |
453 |454 | Select a stream in the bar on the left and click "Mappertje" 455 | to map and correct its perspective in a separate window. 456 |
457 |Select the multiview layout:
487 | 488 |Select how to mute streams:
528 | 529 |603 | With a proper nickname, your video will reliably show up in the 604 | pop-out and multiview windows for the participants in this 605 | conference room. Even when you leave and enter the room again. 606 |
607 |-
608 |
- 609 | Your nickname is used to uniquely identify your video within 610 | this conference room. 611 | 612 |
- 613 | Don't use a name that's already taken, it will cause 614 | conflicts. 615 | 616 |
- 617 | Use another name for each connection, if you connect to this 618 | room simultaneously using multiple devices or browser windows. 619 | 620 |
- 621 | Never use an empty nickname, or a nickname with only 622 | whitespace. 623 | 624 |
- Also don't use "nameless", it will cause conflicts too. 625 |