The Interactive & Immersive HQ

Common Cables.GL Challenges

It’s common for new users of Cables.GL to run into problems, especially when dealing with external devices like microphones and webcams. Often, these issues are actually due to browser permissions and settings rather than Cables.GL itself. In this post, we’ll take a look at some common challenges you may come across as you start to push further with your Cables.GL patches, and what you can do to solve them.

Permissions: One of the Most Common Cables.GL Challenges

As you start working with external devices in Cables, you’ll no doubt run into a request from your browser to grant permission for Cables to use that device.

Usually, all it takes is a simple click to allow Cables access to the device and you’re on your way, but sometimes things don’t work as intended. Maybe you accidentally clicked Block, closed out of the permissions window before making a choice, or the browser isn’t set up to use the correct device.

Regardless of the reason, if you’re not able to access a webcam, audio device, or other external device, the first place to check is browser permissions.

common challenges cables.gl
Cables.GL requesting camera access in Chrome
common challenges cables.gl
Cables.GL requesting camera access in Firefox

Not all browsers manage permissions in the same way, and have different user interfaces for modifying settings. We’ll take a look at permissions in two commonly used browsers, Firefox and Chrome.

Allowing Cables.GL to Access Webcam/Microphone in Firefox

Note that although the steps covered in this section are focused on the webcam, they are the same for microphones/audio devices as well.

Let’s start by adding a Webcam Texture Op to the Patch Editor. In Firefox, this will immediately open the permission request popup. We’ll cover what to do if the request doesn’t pop up in the next section.

Firefox, unlike Chrome, gives you the ability to select the particular device that you’re giving Cables.GL permission to access right in the pop up. This is super handy!

Before you click Allow, make sure to select the device you want to use from the drop down menu. If you want to save your choice (so that you don’t have to approve access again when you reopen the browser), click the Remember this decision checkbox.

common challenges cables.gl
Cables.GL Requesting Camera Access in Firefox

Now that we’ve covered all of the prerequisites, click Allow. If all goes well, you should now have access to your webcam!

Checking and Changing Permissions in Firefox

Let’s say you accidentally clicked Block instead of Allow in the permission dialog, the permission pop up never appeared, or you selected the wrong camera or microphone. What now?

In all of these scenarios, it’s easiest to remove any permissions that have already been set up for Cables. Fortunately, this is very simple to do in Firefox and doesn’t even require a visit to the settings page! Directly to the left of the website URL, you should see a camera or microphone icon. Click on this icon to see the current permissions settings for the device. You can remove any permission setting (allow/block) by clicking the X on the right.

common challenges cables.gl
Editing Webcam Permissions in Firefox

Editing permissions for the microphone works in exactly the same way. Clicking on the microphone icon will show you the current permissions and allow you to remove any that you want to change.

common challenges cables.gl
Editing Microphone Permissions in Firefox

Once you remove a blocked permission, you will see the message “You may need to reload the page for changes to apply”.

common challenges cables.gl

Before you refresh the page, make sure you save any unsaved changes to your project first!

Once you refresh, you should see the permissions dialog pop up again, and you can now choose the device you want to use from the drop down menu and allow Cables.GL to access it.

Allowing Cables.GL to Access Microphone/Webcam in Chrome

When you add a MicrophoneIn or WebcamTexture op to the network in Chrome, you’ll see a permissions pop up appear which is similar to the one in Firefox. Unlike Firefox, however, you’re only presented with two options: Allow or Block. Chrome will automatically select the device it thinks you want to use (likely tied to system settings). You can change the device, but it takes a little more menu diving, as we’ll cover in the next section.

common challenges cables.gl
Microphone Permission Request in Chrome

Editing Permission Settings in Chrome

In some situations clicking Allow may be enough for you to start working with the webcam or microphone. If you have multiple audio devices or webcams, or simply want to change your permission settings, you’ll start by heading to the right side of the address bar, where you’ll see a camera icon. Click on the camera icon to view the current devices the page is accessing, and the permission settings for that device.

common challenges cables.gl

If you accidentally blocked access to the microphone or webcam, you can change it here by selecting the “Always allow https://cables.gl to access your microphone/webcam” option and clicking Done. You may need to refresh the page for the settings to take effect. Make sure you save any unsaved changes to your project first.

common challenges cables.gl
Editing Microphone Permissions in Chrome

Selecting a Different Microphone/Webcam in Chrome

If you want to change the device that Chrome is accessing, click the Manage button, which will take you to the settings page for the device. At the top, there will be a drop down list where you can select the particular microphone/webcam that you want to use.

common challenges cables.gl
Changing Audio Device in Chrome

Once you’ve selected the correct device, you can close the settings window and head back to Cables.GL. You should now be able to use the device!

Get Our 7 Core TouchDesigner Templates, FREE

We’re making our 7 core project file templates available – for free.

These templates shed light into the most useful and sometimes obtuse features of TouchDesigner.

They’re designed to be immediately applicable for the complete TouchDesigner beginner, while also providing inspiration for the advanced user.

Audio Tip: Double Check that Cables.GL Can Access the Right Device

One thing to note about the MicrophoneIn op in Cables.GL is that it will show you all of the audio devices connected to your computer, regardless of which device your browser has allowed Cables to access. If you haven’t given Cables.GL access to the correct device, it will not be able to receive any audio from that device. If you’re running into audio issues (like not receiving any audio from a mic) always double check your browser’s permissions settings first.

common challenges cables.gl
Audio Input Parameter of the MicrophoneIn Op

Still Running into Audio Issues?

Check out this page in the Cables.GL documentation that has more advanced info and troubleshooting tips: https://cables.gl/docs/faq/audio_browsers/audio_browsers.

Wrap-Up

Hopefully this post has given you a better idea of how you can start troubleshooting common issues that you may run into while working with Cables.GL. Fortunately, a lot of seemingly complex problems come down to browser settings that you can fix very easily once you know where to look. Happy experimenting!