cyberangles blog

Chrome 71 Update: How to Fix 'Failed to execute createObjectURL' on URL for Webcam Camera Feed Issues

In late 2018, Google released Chrome 71, bringing with it a host of performance improvements, security updates, and changes to web APIs. Among these changes was a critical deprecation that left many web developers scratching their heads: the gradual phase-out of URL.createObjectURL() for MediaStream objects, which broke webcam camera feeds in countless web applications. If you’ve encountered the error message "Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided" when trying to access a webcam in Chrome 71 or later, you’re not alone.

This blog post will demystify the root cause of this error, walk you through a step-by-step solution to fix it, and provide best practices to ensure your webcam feed works seamlessly across modern browsers.

2026-02

Table of Contents#

  1. What is the 'Failed to execute createObjectURL' Error?
  2. Why Did Chrome 71 Break Webcam Feeds?
  3. How to Fix the Error: Step-by-Step Guide
  4. Testing and Verification
  5. Common Pitfalls to Avoid
  6. Conclusion
  7. References

1. What is the 'Failed to execute createObjectURL' Error?#

The error "Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided" typically occurs when a web application tries to access a webcam feed using the navigator.mediaDevices.getUserMedia() API (to capture video/audio) and then uses URL.createObjectURL() to display the stream in a <video> element.

Example of the "Old" (Now Broken) Code:#

For years, developers used this pattern to display webcam feeds:

// Get access to the webcam
navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    const videoElement = document.getElementById('webcam-feed');
    // OLD: Use createObjectURL to generate a URL for the stream
    videoElement.src = URL.createObjectURL(stream); 
    videoElement.play();
  })
  .catch(function(error) {
    console.error('Webcam access failed:', error);
  });

In Chrome 71+, this code throws the error because URL.createObjectURL() is no longer supported for MediaStream objects.

2. Why Did Chrome 71 Break This?#

The root cause is a deliberate change in web standards. Prior to Chrome 71, URL.createObjectURL() was used to convert a MediaStream (the webcam feed) into a blob URL, which could then be assigned to the <video> element’s src attribute. However, this approach had drawbacks:

  • It required manual cleanup with URL.revokeObjectURL() to free memory, which developers often forgot, leading to memory leaks.
  • MediaStream objects are dynamic (e.g., resolution changes, pausing), and blob URLs are static, making them a poor fit.

In 2017, the W3C Media Capture and Streams specification introduced the srcObject property for media elements (like <video> and <audio>). srcObject allows direct assignment of a MediaStream object, eliminating the need for blob URLs.

Chrome 71 (released in December 2018) began enforcing this standard by deprecating createObjectURL() for MediaStream objects. The Chrome team announced that createObjectURL(stream) would throw an error, pushing developers to adopt srcObject instead.

3. How to Fix the Error: Step-by-Step Guide#

The solution is simple: replace URL.createObjectURL(stream) with videoElement.srcObject = stream. Below’s how to implement this correctly.

3.1 Replace createObjectURL with srcObject#

The core fix is to assign the MediaStream directly to the <video> element’s srcObject property instead of generating a blob URL.

New (Fixed) Code:#

// Get access to the webcam
navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    const videoElement = document.getElementById('webcam-feed');
    // NEW: Assign the stream directly to srcObject
    videoElement.srcObject = stream; 
    videoElement.play();
  })
  .catch(function(error) {
    console.error('Webcam access failed:', error);
  });

Key Changes:

  • Removed URL.createObjectURL(stream) and videoElement.src = ....
  • Added videoElement.srcObject = stream.

3.2 Handle Older Browsers (If Necessary)#

While srcObject is supported in all modern browsers (Chrome 47+, Firefox 53+, Edge 12+, Safari 11+), if you need to support very old browsers (e.g., Chrome <47 or Safari <11), you can use a conditional check to fall back to createObjectURL:

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    const videoElement = document.getElementById('webcam-feed');
    if ('srcObject' in videoElement) {
      // Modern browsers: Use srcObject
      videoElement.srcObject = stream;
    } else {
      // Fallback for older browsers: Use createObjectURL
      videoElement.src = URL.createObjectURL(stream);
    }
    videoElement.play();
  })
  .catch(function(error) {
    console.error('Webcam access failed:', error);
  });

Note: This fallback is rarely needed today, as even older browsers like IE11 are no longer widely used. Most developers can safely use srcObject exclusively.

3.3 Clean Up: Remove revokeObjectURL (If Used)#

If your old code used URL.revokeObjectURL() to clean up blob URLs (e.g., when stopping the stream), you can now remove it. srcObject manages the stream lifecycle automatically, so manual revocation is unnecessary:

Old Cleanup (No Longer Needed):

// STOPPING THE STREAM (OLD WAY)
videoElement.pause();
URL.revokeObjectURL(videoElement.src); // Not needed with srcObject!
videoElement.src = '';

New Cleanup:

// STOPPING THE STREAM (NEW WAY)
const stream = videoElement.srcObject;
if (stream) {
  stream.getTracks().forEach(track => track.stop()); // Stop the stream
}
videoElement.srcObject = null; // Clear the srcObject

4. Testing and Verification#

After implementing the fix, test your webcam feed to ensure it works correctly:

1. Test in Chrome 71+#

  • Open your app in Chrome 71 or later.
  • Check the browser console (F12) for errors. If you see no errors and the webcam feed displays, the fix works.

2. Test in Other Browsers#

  • Verify in Firefox, Safari, and Edge to ensure cross-browser compatibility. srcObject is supported in all major browsers, so behavior should be consistent.

3. Check Permissions#

  • Ensure the browser prompts for webcam access (you may need to enable permissions in the address bar).

4. Simulate Older Browsers (Optional)#

  • Use Chrome DevTools’ "Device Toolbar" to simulate older Chrome versions (Settings > More Tools > Developer Tools > Settings > Experiments > "Show legacy browser versions" > Reload DevTools).

5. Common Pitfalls to Avoid#

Pitfall 1: Forgetting to Remove revokeObjectURL#

If you leave URL.revokeObjectURL(videoElement.src) in your code, it may cause errors or stop the stream prematurely when using srcObject. Always remove it.

Pitfall 2: Mixing src and srcObject#

Never set both videoElement.src and videoElement.srcObject. This can lead to conflicts or unexpected behavior. Use srcObject exclusively.

Pitfall 3: Ignoring Stream Stoppage#

When stopping the webcam, always stop the stream tracks with stream.getTracks().forEach(track => track.stop()). Failing to do this may leave the webcam light on, even after the feed is closed.

Pitfall 4: Permission Denied Errors#

If the webcam feed still doesn’t work, check the browser console for "Permission denied" errors. Ensure the user granted webcam access, and that your site is served over HTTPS (most browsers block webcam access on http:// except localhost).

6. Conclusion#

The "Failed to execute createObjectURL" error in Chrome 71+ is a result of the web platform evolving to adopt better standards. By replacing URL.createObjectURL(stream) with videoElement.srcObject = stream, you can fix webcam feed issues and future-proof your code.

This change simplifies webcam access, reduces memory leaks, and aligns with modern web standards. As browsers continue to update, staying informed about API deprecations (via resources like Chrome Status or MDN) will help you avoid similar issues.

7. References#