macOS Safari problem with (getUserMedia) getting video stream from camera in angular 6 - NotReadableError: The I/O read operation failed

Question

Problem is appeared when I try get video stream from camera in mac on safari.
For get stream I use function navigator.mediaDevices.getUserMedia({video: true})
On chrome it works nice, but in safari it sometimes throw error:

NotReadableError: The I/O read operation failed.

The most strange that it's not stable, it error can appear and after sometime it will be work fine (without changing a code)...I checked it a lot of times and didn't find dependency why it or work or no.

Another one strange thing that error shows only in angular, so I thought that problem could be with zone.js but I didn't find solution when trying take out call of function for getting stream from zone (for take out from zone I used runOutsideAngular and run).

I tried to use some npm libraries like ngx-webcam, ack-angular-webcam but that didn't help too, when error shows in my code it appears in plugins code too (I guess it cause they use same func to get stream).

So, my long research in internet didn't give appropriate result and I have to ask about advice, solution or at least idea.

My question
How to avoid appearing of this error, why it shows not constantly and what is the reason for this error?

Thanks for your help.

user_447344 · Answer

Not related to angular, simply running:

navigator.mediaDevices.getUserMedia({audio: true, video: false}).then(function(e) {console.log("success",e);}, function(e){console.log("reject",e);})

in a javascript console, and you will see the I/O error, only on Safari. This looks like a WebKit bug.

(i will complete the answer as soon as I found more details).

user_1239145 · Answer

It could be related to zone.js (which is part of angular6)

Try to open polyfills.ts and add

   // rtc peer connection patch
   import 'zone.js/dist/webapis-rtc-peer-connection';
   // getUserMedia patch
   import 'zone.js/dist/zone-patch-user-media.js';

after

import 'zone.js/dist/zone';

example here. However, it works now sometimes in my app.

user_1969074 · Answer

I've got same problem on iOS safari. The reason is other website was using my camera. Just turn off all other webrtc sessions and try it again then it will work.

user_12244637 · Answer

Works when I put the atribute playsinline in html tag video:

macOS Safari problem with (getUserMedia) getting video stream from camera in angular 6 - NotReadableError: The I/O read operation failed

4 Answers