StreamDeck+ is a well-known utility in video productivity tools and is loved by many. For those unfamiliar, a StreamDeck is a customizable keypad with dynamic LCD keys that provide tons of functionality at the touch of a button. Initially designed for video streamers, its versatility has made it an essential tool for anyone seeking to streamline their workflow.
From launching applications to controlling multimedia, my StreamDeck quickly became integral to my daily routine. The initial excitement of integrating this device into my workspace was unparalleled. I initially controlled my lighting setup and home automation with my StreamDeck.
But what if it also allows me to control my video calls?
Imagine one button to mute, another to turn off the camera, and another to leave the call without fumbling through multiple windows. However, reality soon set in, and my enthusiasm was met with a significant obstacle. While there are plugins available for StreamDeck that support the biggest video meeting provider’s native apps, there was a problem.
The Disappointment: Browser-Based Meetings
To my dismay, I discovered that StreamDeck's functionality was unavailable in browser-based calls. Despite the promise of seamless integration, a StreamDeck needs some help controlling Zoom, Teams, and Google Meet through web browsers.
This limitation stems from the fact that many of StreamDeck's powerful plugins and scripts were designed with desktop applications in mind, leaving those relying on web versions of such tools behind. The smooth, efficient experience I hoped for looked like a far-fetched dream without hope of ever becoming a reality.
Some plugins are available for each big video platform. Still, it is a hit-or-miss experience at best, and it would require me to install a StreamDeck plugin for each meeting platform and accompanying button configuration on my StreamDeck. Even then, it only works for desktop clients, and the experience for browser-based clients is worse.
Enter MuteDeck: A Beacon of Hope
Just as I was about to resign to my setup's shortcomings, I stumbled upon MuteDeck. This neat software utility bridges the gap between the web browser and desktop-based video calls and my StreamDeck. MuteDeck offers features that enhance audio and video control during calls; it works exceptionally well for desktop versions of Google Meet, and Microsoft Teams. However, it also achieves the same results as its browser-based counterparts.
With MuteDeck, I can now mute and unmute my microphone, toggle my camera, and even manage other meeting functions—all directly from my StreamDeck. The software translates the actions into commands that the web-based applications can understand, enabling a glorious future of maximum online meeting control using my StreamDeck.
Why MuteDeck?
As it turns our, to get a StreamDeck and web browser application to work together, communication needs to be established between the two. Doing this directly has some challenges, how to get a StreamDeck plugin to directly communicate with a browser application with the right tab within said browser application? This is where MuteDeck comes in.
MuteDeck runs a local network service that listens to requests from both the StreamDeck plugin and a browser extension. MuteDeck is the intermediate between the two, bridging the process and discovery gap. To make things work even better, long polling web service requests are used. Any status changes or commands will immediately be relayed to the counterpart on the other side of the gap. This works from the StreamDeck device to the browser tab and vice versa.
Not to worry about that local network service. It is only available link local, other entities on the same network as your laptop can not connect to this service.
MuteDeck is the glue and it does its job very well. It supports Zoom, Teams, Google Meet, others out of the box. Both native and web versions.
All you need to do is install these three things:
- MuteDeck app
- MuteDeck StreamDeck plugin
- MuteDeck Chrome Extension
We verified that the MuteDeck Chrome extension works in Google Chrome, Arc Browser, and Brave Browser.
But Wait, What About Stream Video?
I wanted to see if I could integrate with Stream Video, too. This required a custom solution, so I looked into how Martijn, the creator of MuteDeck, achieved his results. The key element is the MuteDeck Chrome Extension. This tiny Chrome Extension connects the StreamDeck MuteDeck plugin to browser-based meetings. All I need to do is replicate this behavior, and I can achieve maximum control over my Stream Video-based meetings, too!
Trying Our Custom Chrome Extension
To try our custom Chrome Extension on our web demo instance, you need to do a few things.
- Download and install the MuteDeck app
- Install the StreamDeck plugin.
- Clone the StreamMuteDeck Chrome Extension repository to a local folder: https://github.com/GetStream/StreamMuteDeck
- Copy the file
config.js.exampletoconfig.js. - Install the StreamMuteDeck Chrome Extension from your file system into your Chrome-based browser.
Installing and configuring the MuteDeck app and StreamDeck plugin shouldn’t be too hard. However, installing an unpacked extension might require some explanation. Also, we will not release our extension to the Chrome Extension Store because it might make end users think it works for any website using Stream Video. (It does not.) But if you use Stream Video in your product, it should be straightforward to pick up our Chome Extension source code and adjust it to your situation.
Our StreamMuteDeck extension only works on our Video SDK web demo instance and our internal video calling system implemented using Stream Video, because the extension requests permissions for specific website URLs. When you’re following the steps below to build and distribute your own custom Chrome Extension, you’ll change the website URL to match your website.
To install the StreamMuteDeck Chrome Extension:
- Navigate to chrome://extensions/ on a Chrome browser.
- Enable the “Developer mode” toggle at the top right.
- Click the button at the top left called “Install Unpacked Extension”
- In the file dialog that opens, navigate to the directory where you cloned the StreamMuteDeck Chrome extension repository.
Distributing Your Own Custom Chrome Extension
Would you want to enable your end users to control your integration with Stream Video as well?
We’ve made it extremely simple for you to build and distribute a custom Chrome Extension tailored to your website. Download the template extension, change the website URL inside the config.js file, update the manifest details, and distribute it to your end users.
After you’ve set up Stream Video on your website, take our Stream MuteDeck Chrome Extension and modify it to match your website. A developer familiar with JavaScript should be able to execute this task. You can create a custom version of our Chrome Extension for MuteDeck, which gives your users control over meetings held on your platform. You can change the extension's name, add your logo, and ensure it works on your website using the manifest.json file.
To learn more about all the steps in creating Chrome Extension, please visit Google’s Chrome Extension developer documentation.
After successfully integrating your website with your custom Chrome Extension, now is the time to give it to your users and make their meetings more efficient by distributing it on the Chrome Extension marketplace.
Conclusion: A Seamless Experience
Integrating MuteDeck and a Chrome Extension lets my StreamDeck work in all my meetings. Whether managing browser-based calls on Zoom, Teams, Google Meet, or Stream Video, the StreamDeck now offers a seamless, efficient experience I love.
For those facing similar frustrations, explore MuteDeck and consider creating a Chrome Extension to bring your video calling implementation to a StreamDeck near you. The required technical know-how is relatively minor, but the productivity and ease of use rewards are well worth the effort.