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.

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.

• javascript
• angular
• macos
• safari
• getusermedia

Share Improve this question Follow edited Sep 12, 2018 at 15:30 CKE 1,6281919 gold badges2121 silver badges3131 bronze badges asked Sep 12, 2018 at 14:30 s.koliechkins.koliechkin 5111 silver badge66 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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 plete the answer as soon as I found more details).

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.

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.

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

<video autoplay playsinline class="input_video"></video>

This error often occurs if the device is being used by some other software. You can check the description of the same on MDN. This isn't specific to Safari, Chrome on Windows does the same thing, but somehow it looks like Chrome on Mac behaves differently.

In general it wouldn't be a good idea to have the stream being accessed by two apps at the same time, since this could lead to accidental sharing of stream during confidential recordings/meeting.

Just handle the error and update the UI accordingly to inform the user. I'm still researching on how we can detect "camera in use" or "screen in use" cross browser and will share if I find something.

Reference on MDN