Solution for "DOMException: Failed to load because no supported source was found" error in Chrome with HTML5 media API

By -
After updating Chrome to release 53 this week, my web application was no longer able to use the media API to capture video with a webcam. This is the third time that I am forced to update my code due to changes in Chrome... this is getting a little annoying!

The error message I was getting in my javascript console is:
DOMException: Failed to load because no supported source was found

I'll keep it short. The problem was the way I set the source of my media element.
I was setting the source like this:

navigator.getUserMedia(videoObj, function(stream) {
   CaptureImageStream = stream;
   CaptureImageVideo.src = stream;
   CaptureImageVideo.play();
}, errBack);

It seems like this is no longer supported. I changed it to this and it now works again:

 navigator.getUserMedia(videoObj, function(stream) {
   CaptureImageStream = stream;
   CaptureImageVideo.src = window.URL.createObjectURL(stream);
   CaptureImageVideo.play();
}, errBack); 

I hope this helps!
Clement

Comments

JacobHarman said…
Prior to recruiting any kind of trained professional, looking at their resume is an unquestionable necessity, particularly with regards to Mono designers. While picking the right up-and-comer you normally have two choices - designating the undertaking to a Dab NET improvement office or attempting to track down the right one without anyone else. The principal choice is clearly simpler, in any case, in the event that you don't get an opportunity to enlist a .NET improvement office, looking for the designer yourself can likewise be a decent choice. As we have referenced previously, while breaking down the WinForms designer continue you ought to zero in on specialized abilities as well as on delicate ones also. For anybody who chooses to recruit WCF designer, or some other sort of IT expert in this field, getting to know the average junior and senior engineers' resumes is significant. For this, we have arranged for both of you tests of a lesser and senior .NET designer>> .net developer for hire
Fri Dec 23, 07:30:00 AM
Anonymous said…
embedded software development services, just one click away! By going to this site, you will see a lot of information that will help you hire a roboticist for your business or enterprise! You will be able to apply for a free vacancy, and be interviewed, selected, with your future developers!
Sun Jan 15, 06:14:00 AM
Anonymous said…
Hello! Do you want to expand your IT team but do not know how to hire specialists in a short time? Our company offers you a quality solution that will help you succeed in this business! Take advantage of our staff growth model to find the right people with exactly the skills you need. >> project management staff augmentation
Fri Feb 10, 08:02:00 PM
WaldoEffertz said…
Is your project in need of angular js development services and adding angular developers to the development department? The most profitable solution is to hire this specialist with the help of our services. Outsourcing companies from Ukraine allow you to find any developer you are interested in at a price that suits you.
Fri Feb 10, 10:59:00 PM
Anonymous said…
Looking for a Cloud Programming Professional? Then this resource cloud management automation will help you, by going to this site you get to an article that is a source of information about this! You can also leave your vacancy to connect with experienced people who are looking for a job! The main thing is that everything is easy and simple!
Tue Feb 14, 10:20:00 PM
DonLi said…
Hello friends! I want to recommend erp technical consultant to you to improve your business and projects! You can hire this specialist remotely, and he will be the same job as an office employee. I am satisfied with the cooperation with this specialist, and I recommend it to you too!
Thu Feb 16, 10:49:00 PM
Thomas1 said…
You can probably find out on your own that these apps have a lot of advantages. The truth is that they are particularly easy to use and run. With this in mind, they are going to be incredibly efficient in terms of time, money, and effectiveness is there an app to correct grammar Plus, you don't need to waste time digging into grammar books to find out whether you've used the correct structure or not. Apps are specially designed to do it all on your own. This is how they work and that is what you can expect from them. You can easily check whether the sentence is grammatically correct or not.
Fri Feb 24, 03:44:00 PM
alexsaint said…
Scala also offers powerful abstractions and higher-order functions, which allow developers to write reusable and modular code. It gives a powerful impetus to enterprises. Scala's collections library provides a rich set of abstractions for working with data, including map, filter, and reduce functions. I advise you to read the article about scala developer remote.
Sun Feb 26, 05:04:00 AM
Debra McRae said…
Hello! Now data annotators are popular for teaching AI. In order to teach your AI to process information of the format you are interested in, you need an experienced specialist who knows how to provide information for your AI. We match these professionals according to your salary requirements and our experience requirements.
Sun Feb 26, 09:37:00 PM
Unknown said…
Remote DevOps developer services offer many benefits, such as reduced development costs and easier planning, as well as new horizons for your company as a whole. Follow the link web app devops services and learn a lot of interesting things and use the information received with the maximum benefit for your future corporation.
Mon Mar 06, 12:22:00 AM
Anonymous said…
Looking for accurate and efficient polygon annotation for your machine learning projects? Our team of professionals is prepared to help you adopt polygon annotation, a potent tool that can increase accuracy in computer vision and machine learning. Your models will have access to the data they require to operate to their full potential thanks to our polygon annotation services. To find out more, visit our website right away.
Tue Apr 25, 03:31:00 AM
hattie said…
Good blog. I appreciate you sharing with us. Such fascinating details. abogado de impuestos sucesorios
Fri Oct 27, 07:44:00 PM
John Fei said…
This article on mental health app development is both informative and insightful. It provides a comprehensive overview of the benefits and features of developing mental health apps. The importance of using technology to improve mental well-being is emphasized, making it a must-read for anyone interested in mental health and technology.
Sun Jun 02, 04:57:00 PM
Post a Comment

Popular posts from this blog

Affiliate module for Interspire Shopping Cart

By -
Image
Hello, I have already implemented this module on two shops rather successfully. The concept is quite simple: websites that want to get rewarded through affiliation must link to your website using an identifier in the URL. If your website is http://website.com/, then your links must be of the form http://website.com/?ref=123 where 123 is the affiliate ID. when a visitor clicks the link, the affiliate ID will be placed in a cookie that will expire after 15 days (this can be configured) when the visitor purchases an item: if the affiliate ID cookie is still enabled, the affiliate will be credited of a certain amount, it can be a share of the sale or a fixed amount. affiliate accounts are simple customer accounts, there is no modification to make regarding accounts. When a sale is made, they receive store credit. They can either spend the store credit to purchase items on the store, or they can manually request for a withdrawal (managing withdrawals is up to you). I will detail the i
Read more

Nginx error 413: Request entity too large Quick Fix

By -
A quick article today about a common error people encounter with Nginx: the infamous 413 Request Entity Too Large HTTP error. I had the problem myself just yesterday on one of my newly configured servers, so I thought I'd make a blog post about it to make sure I don't forget this next time. Error 413: what does it mean? This error shows up when a visitor sends too much data in the HTTP request. This is normally caused by: • an overy large file being uploaded by the visitor • more generally too much POST data being sent by the client The fix is as simple as setting a directive in your Nginx configuration, read on below. How to fix it? client_max_body_size To fix this, you need to increase the value of the client_max_body_size directive. This directive defines the maximum amount of data Nginx will accept in an HTTP request. By default this value is set to 1 megabyte, meaning if you attempt to upload a file larger than 1 megabyte you'll be getting an  Error
Read more

Dealing with Nginx 400 Bad Request HTTP errors

By -
Today I'll write about something I experienced personally, on my websites. Some visitors reported that they were getting a "400 Bad Request" Nginx error randomly when visiting pages. And when they start getting that error, they can't access the site anymore: it'll output the same error no matter the page, until you "clear your cache and cookies". The error is easily understandable and is likely to be caused by... too much cookie data. Every time a visitor loads *any* page/content/file of your website, it sends the cookie data to the server. Cookie data is sent under the form of 1 header line starting with "Cookie: ". Basically, Nginx by default is configured to accept header lines of a maximum size of 4 kilobytes. When a line in the headers exceeds 4 kilobytes, Nginx returns the '400 Bad Request' error. Cookie data sometimes gets big, so it causes the error. It particularly happens on forums like vBulletin, Invision and others
Read more