DEV Community: Gabriel Diem

How to download Google Meet meeting recordings set to view-only mode

Gabriel Diem — Tue, 17 Sep 2024 17:40:22 +0000

So you were (or weren't) part of a meeting done with Google Meet that was recorded and the link you have, which is probably the automatic one sent by the Meet app, is set to view-only mode and can't download it straight away with an option the the hamburger menu nor there's a button to do it.

So how can you do it? It's important to know that the methods going around are not stable in time, given that we try to understand what the Google API's are doing so we can get the video and audio entirely in a common format, e.g. mp4.

We will review the previous method, which is not currently working, and the current method that is currently working.

Previous method [not working currently]: downloading videoplayback with the browser's developer tool

When online video meetings exploded in popularity, this method was quickly found. You basically followed these steps:

Open the browser's Developer Tools, with right click or via some option in the browser menus.
Open the Network tab, reload the page, and search for an element called videoplayback.
Right click into it and copy its URL.
Open the URL in a new tab and you will see a raw, loaded by the browser, video with audio that you can download directly with the browser.

It was pretty simple, thought the download speed usually was unstable and it could be slow. But, it does not work anymore.

Current working method: download video and audio separately with the browser's developer tool

It seems that the Youtube-like player that Google Drive has to play the videos now works with more chunking of the audio and video, in separate channels, so the video chunks arrive by themselves and the audio chunks as well.

What we are going to do is: get the video file (with no audio), get the audio file, and then join both in a single video (with audio) file with ffmpeg.

Getting the video file

Open the browser's Developer Tools, with right click or via some option in the browser menus.
Open the Network tab, reload the page, and search for an element called videoplayback. You will notice that several of these elements keep appearing, this is the chunking I was talking about before.
Right click into one and copy its URL. If you try to download from that URL directly, you won't be able to get the video nor the audio, you will probably download a .txt file if you try.
Copy the URL into a text editor, we are going to remove some parts. The URL looks something like this:

https://rr5---sn-x1xe55.c.drive.google.com/videoplayback?expire=123456&ei=111_111-aaaaaaaa&ip=111:111:11a:888:5d3f:888:8fed:888&id=aaa123&itag=140&source=webdrive&requiressl=yes&xpc=Eaaa111==&mh=j7&mm=32,26&mn=sn-x1xe7n76,sn-nja7sner&ms=su,onr&mv=m&mvi=5&pl=49&sc=yes&ttl=transient&susc=dr&driveid=111aaa111&app=explorer&eaua=111aaa&mime=video/mp4&vprv=1&prv=1&rqh=1&gir=yes&clen=111222333&dur=111.352&lmt=111222333&mt=111222333&fvip=1&subapp=DRIVE_WEB_FILE_VIEWER&txp=0000224&sparams=expire,ei,ip,id,itag,source,requiressl,xpc,ttl,susc,driveid,app,eaua,mime,vprv,prv,rqh,gir,clen,dur,lmt&sig=111222333-aaa1112223344aaqqbb==&lsparams=mh,mm,mn,ms,mv,mvi,pl,sc&lsig=111222333-aaa1112223344aaqqb&alr=yes&cpn=111aaa&c=WEB_EMBEDDED_PLAYER&cver=1.20240912.01.00&range=1948616-2433307&rn=11&rbuf=119815&ump=1&srfvp=1

First, we need to locate the mime attribute and check if what we found is the video or audio:

(...)eaua=111aaa&mime=video/mp4&vprv=1&p(...)

Given that it is mime=video/mp4 we have effectively found the video. If it's not, and it's audio instead, we need to pick another videoplayback element and repeat until found the video one. It will not work if you manually replace the mime tag, you need to get another element.

There is a range attribute in the query string, which we are going to remove, including all the stuff that comes after it.

Remove the text at the end as shown:

https://rr5---sn-x1xe55.c.drive.google.com/videoplayback?expire=123456&ei=111_111-aaaaaaaa&ip=111:111:11a:888:5d3f:888:8fed:888&id=aaa123&itag=140&source=webdrive&requiressl=yes&xpc=Eaaa111==&mh=j7&mm=32,26&mn=sn-x1xe7n76,sn-nja7sner&ms=su,onr&mv=m&mvi=5&pl=49&sc=yes&ttl=transient&susc=dr&driveid=111aaa111&app=explorer&eaua=111aaa&mime=video/mp4&vprv=1&prv=1&rqh=1&gir=yes&clen=111222333&dur=111.352&lmt=111222333&mt=111222333&fvip=1&subapp=DRIVE_WEB_FILE_VIEWER&txp=0000224&sparams=expire,ei,ip,id,itag,source,requiressl,xpc,ttl,susc,driveid,app,eaua,mime,vprv,prv,rqh,gir,clen,dur,lmt&sig=111222333-aaa1112223344aaqqbb==&lsparams=mh,mm,mn,ms,mv,mvi,pl,sc&lsig=111222333-aaa1112223344aaqqb&alr=yes&cpn=111aaa&c=WEB_EMBEDDED_PLAYER&cver=1.20240912.01.00 <<REMOVE FORM THE RIGHT OF THIS>>&range=1948616-2433307&rn=11&rbuf=119815&ump=1&srfvp=1

Now with the clean URL we can paste it in a new tab an download the video (with no audio) directly from the browser:

Getting the audio file

Same steps that the video file but the mime tag should be audio/mp4:

Open the browser's Developer Tools, with right click or via some option in the browser menus.
Open the Network tab, reload the page, and search for an element called videoplayback.
Right click into one and copy its URL.
Copy the URL into a text editor, we are going to remove some parts. The URL looks something like this:

https://rr5---sn-x1xe55.c.drive.google.com/videoplayback?expire=123456&ei=111_111-aaaaaaaa&ip=111:111:11a:888:5d3f:888:8fed:888&id=aaa123&itag=140&source=webdrive&requiressl=yes&xpc=Eaaa111==&mh=j7&mm=32,26&mn=sn-x1xe7n76,sn-nja7sner&ms=su,onr&mv=m&mvi=5&pl=49&sc=yes&ttl=transient&susc=dr&driveid=111aaa111&app=explorer&eaua=111aaa&mime=audio/mp4&vprv=1&prv=1&rqh=1&gir=yes&clen=111222333&dur=111.352&lmt=111222333&mt=111222333&fvip=1&subapp=DRIVE_WEB_FILE_VIEWER&txp=0000224&sparams=expire,ei,ip,id,itag,source,requiressl,xpc,ttl,susc,driveid,app,eaua,mime,vprv,prv,rqh,gir,clen,dur,lmt&sig=111222333-aaa1112223344aaqqbb==&lsparams=mh,mm,mn,ms,mv,mvi,pl,sc&lsig=111222333-aaa1112223344aaqqb&alr=yes&cpn=111aaa&c=WEB_EMBEDDED_PLAYER&cver=1.20240912.01.00&range=1948616-2433307&rn=11&rbuf=119815&ump=1&srfvp=1

First, we need to locate the mime attribute and check if what we found is the video or audio:

(...)eaua=111aaa&mime=audio/mp4&vprv=1&p(...)

Given that it is mime=audio/mp4 we have effectively found the video. If it's not, and it's video instead, we need to pick another videoplayback element and repeat until found the video one. It will not work if you manually replace the mime tag, you need to get another element.

Remove range tag as shown:

https://rr5---sn-x1xe55.c.drive.google.com/videoplayback?expire=123456&ei=111_111-aaaaaaaa&ip=111:111:11a:888:5d3f:888:8fed:888&id=aaa123&itag=140&source=webdrive&requiressl=yes&xpc=Eaaa111==&mh=j7&mm=32,26&mn=sn-x1xe7n76,sn-nja7sner&ms=su,onr&mv=m&mvi=5&pl=49&sc=yes&ttl=transient&susc=dr&driveid=111aaa111&app=explorer&eaua=111aaa&mime=audio/mp4&vprv=1&prv=1&rqh=1&gir=yes&clen=111222333&dur=111.352&lmt=111222333&mt=111222333&fvip=1&subapp=DRIVE_WEB_FILE_VIEWER&txp=0000224&sparams=expire,ei,ip,id,itag,source,requiressl,xpc,ttl,susc,driveid,app,eaua,mime,vprv,prv,rqh,gir,clen,dur,lmt&sig=111222333-aaa1112223344aaqqbb==&lsparams=mh,mm,mn,ms,mv,mvi,pl,sc&lsig=111222333-aaa1112223344aaqqb&alr=yes&cpn=111aaa&c=WEB_EMBEDDED_PLAYER&cver=1.20240912.01.00 <<REMOVE FORM THE RIGHT OF THIS>>&range=1948616-2433307&rn=11&rbuf=119815&ump=1&srfvp=1

Now with the clean URL we can paste it in a new tab an download the audio (with no video) directly from the browser:

https://rr5---sn-x1xe55.c.drive.google.com/videoplayback?expire=123456&ei=111_111-aaaaaaaa&ip=111:111:11a:888:5d3f:888:8fed:888&id=aaa123&itag=140&source=webdrive&requiressl=yes&xpc=Eaaa111==&mh=j7&mm=32,26&mn=sn-x1xe7n76,sn-nja7sner&ms=su,onr&mv=m&mvi=5&pl=49&sc=yes&ttl=transient&susc=dr&driveid=111aaa111&app=explorer&eaua=111aaa&mime=audio/mp4&vprv=1&prv=1&rqh=1&gir=yes&clen=111222333&dur=111.352&lmt=111222333&mt=111222333&fvip=1&subapp=DRIVE_WEB_FILE_VIEWER&txp=0000224&sparams=expire,ei,ip,id,itag,source,requiressl,xpc,ttl,susc,driveid,app,eaua,mime,vprv,prv,rqh,gir,clen,dur,lmt&sig=111222333-aaa1112223344aaqqbb==&lsparams=mh,mm,mn,ms,mv,mvi,pl,sc&lsig=111222333-aaa1112223344aaqqb&alr=yes&cpn=111aaa&c=WEB_EMBEDDED_PLAYER&cver=1.20240912.01.00

Combining the video with the audio

So, we have now an .m4a audio file and an .mp4 video file. You will need ffmpeg installed to combine the files into a single video with audio. You can google how to install it into Google, or visit the official site: ffmpeg.org/download.html and check how to get it for your operating system.

Once you have it, run this simple command to fuse the files into one:

ffmpeg -i video.mp4 -i audio.m4a -c:v copy -c:a aac output.mp4

And that's it! Now you have a complete file of the Google Meet recording. I hope it helped!

Grub-customizer won't change your GRUB theme in Kali Linux? Try this

Gabriel Diem — Sat, 01 Jul 2023 22:13:12 +0000

If you are familiar with desktop Linux distributions, maybe you are dual booting with another OS, you may have used at some point in time the grub-customizer program to change the appearance of the GRUB (GRand Unified Bootloader) screen. As a casual Linux user it has been my main way of customizing grub when dual booting Ubuntu with Windows.

I recently switched laptops and Linux distro to Kali with KDE Plasma and fired grub-customizer as usual. I was surprised to find out that it didn't change the grub theme, despite the grub config file literally using the pre-made theme downloaded from Gnome-look.

Long story short, after some mostly unfruitful investigation and digging into the grub files spread around my Kali installation I concluded that 3 main files have to be modified in order to effectively have the theme changed and they are:

/boot/grub/grub.cfg
/etc/default/grub
/etc/default/grub.d/kali-themes.cfg

Grub-customizer did change the first file and updated it with the proper theme.txt location from the theme I downloaded, let's call it myTheme.

After noticing that I manually changed the GRUB_THEME entry in /etc/default/grub with the correct theme location, which was /boot/grub/themes/myTheme/theme.txt.

Then I did the same thing with the /etc/default/grub.d/kali-themes.cfg file and surprise, surprise, it worked!

By this point, the grub theme was fully changed and properly adjusted to my liking. There was a little weird thing happening though, after selecting an OS in the grub screen, no matter if it was Kali or Windows, a default Kali theme image was shown for a second or so, which I wanted to change to not show anything and just load the OS. The workaround to solve this was to load a pure black image (all black pixels) before loading the theme in the /etc/default/grub.d/kali-themes.cfg which I find a little weird because the theme.txt of myTheme already defines a background image. Anyway, the file would contain something like this:

GRUB_BACKGROUND="/boot/grub/themes/kali/black.png"
GRUB_THEME="/boot/grub/themes/myTheme/theme.txt"

And done! The theme got changed and no weird image flashes disturbed my grub screen, so I was happy with the result 😊.

[Solved] React app bundled with Parcel would not deploy correctly in GitHub Pages

Gabriel Diem — Wed, 08 Feb 2023 20:01:39 +0000

I was learning ReactJS, making my first dynamic-ish frontend and I was happy enough with that little project as a first React project. It worked perfectly in the local dev server provided by Parcel. I bundled the project and run a simple HTTP Python local server with the command:

python -m http.server 3000

It worked perfectly.

So I was ready to deploy the app in GitHub Pages, see if I could even do that. I pushed the changes and the dist folder as well, configured a default GitHub Actions script for a static webapp deployment and waited. It did not work, the js and css files were not being received and the console showed a couple of 404 errors. I found out that the page was trying to pull files from my root url, that being https://gabrieldiem.github.io. So I tried making a couple of changes to the GitHub Actions script but I couldn't make it work.

After that I turned to a package called gh-pages, which pushed the bundled files to a new branch and deployed the Github Pages website from there, and I gave it a try.

First I tried deploying a simple create-react-app app to know what I was trying to do was even possible (I was not using create-react-app btw). And it worked! So it had to be something about my bundling config.

I found out that I had to add to the package.json the entry:

"homepage": "http://gabrieldiem.github.io/Portfolio_like_project"

With Portfolio_like_project being the repo name. So I bundled the project as I was doing before with the script:

"build": "parcel build src/index.html"

And set up the gh-pages required scripts:

"predeploy": "npm run build",
"deploy": "gh-pages -d dist"

I gave it another try, same as before, it did not work again.
Then I tried a couple things with absolute routes and ended up in a GitHub issue of the Parcel repo saying that Parcel and absolute routes don't mix well. So I ditched that. Okay, maybe hardcoding the absolute route directly into the HTML and JS, I ditched that as well (not only because it was awful but also because it didn't work).

Eventually found out that what could solve my problem was to add a --public-url flag to the parcel bundle script so it ended looking like this:

"build": "parcel build src/index.html --public-url /Portfolio_like_project/"

Again, not using absolute routing, instead using the relative route of the root url, which I guessed was https://gabrieldiem.github.io so adding the repo name would make the fetching request of the js and css files work properly.
This time it kind of worked. I solved the problem of the requests ending in a 404 error, so it was serving the files as it should. The problem was I still had a blank page staring at me, nothing at all was displayed.

By this time, I had already spent a couple of hours making pointless changes, debugging, bundling in different ways (with no cache access, without optimizations, etc) and reading tons of docs, Stack Overflow posts and GitHub issues. I took a little rest and came back to it. I kept investigating and found these two posts that gave me the key of what was happening:

Building a Static Single Page Application with JavaScript, for GitHub pages and more … written by Weiyuan.

So you want to host your Single Page React App on GitHub Pages? written by Brendan McIlhenny.

And the key was that besides the general routing of the application, I had also used the React components BrowserRouter, Route and Link, so it appeared that the breaking point could have been there. Spoiler alert: it was.

So I fixed the routes and prepended a /Portfolio_like_project to the destiny routes of Routes and Links, deployed it and it worked! I was happy that it was finally live and I managed to find the ways things work.

Until, I run the dev local server and it crashed, which was logical because it couldn't find the files and routes pointed by the new location I prepended before. I tried a couple of workarounds and settled with the next solution:

I created a .env file which contained the relative path I wanted to add:

BASE_RELATIVE_PATH="/Portfolio_like_project"

I created a new js file which was in charge of detecting if I was in production mode and at the same time not in localhost, the code looks like this:

const isEnvProduction = process.env.NODE_ENV === 'production';

const isEnvNotLocalhost = window.location.hostname !== 'localhost' && !window.location.href.includes('127.0.0.1');

const baseRelativePath = (isEnvProduction && isEnvNotLocalhost) ? process.env.BASE_RELATIVE_PATH : '';

export default baseRelativePath;

A little note here: Parcel sets the NODE_ENV variable to 'production' or 'development' depending on the build (if it's been built and bundled, or if it's running on the dev server, respectively). So I took advantage of that. If I was in a production environment I prepended the relative path and if I wasn't I prepended an empty string.
Then all I had to do was use this basePath before every redirection, like this:

import baseRelativePath from 'path.js';

<Link to={`${baseRelativePath}/`}>Home</Link>
<Route path={`${baseRelativePath}/`} element={/*some element*/} />

After making that change I managed to make the app work in a local development, local production and remote production environment. Success!

It is not the most elegant solution though, making a template literal for every path in order to prepend this basePath sounds like something that could be solved in other way. As a React beginner I find it good enough for the moment, and I hope I can find a better way of doing this, if I do I will be pasting a link for the update here. As for now, it is staying like this.

Thanks for reading! And if you came here and I managed to help you, I'm glad I could serve you useful 😊.