We Keep Coding

video.play() occurred unhandled rejection (notallowederror) on IOS

using peer.js for stream video on React APP
addVideoStream(video: HTMLVideoElement, stream: MediaStream) {
video.srcObject = stream
video?.addEventListener('loadedmetadata', () => {
video.play()
})
if (this.videoGrid) this.videoGrid.append(video)
}
got this error at 'video.play()'
the request is not allowed by the user agent or the platform in the current context
already I allowed permission for Audio and video on IOS.
this code works well other platforms except IOS.
I have no idea.
If I deploy then I just get black screen on IOS.
how can I fix this?
thanks in advance

the problem was how video tag works in IOS with WebRTC.
used HTTPS environment(production) then add these attributes
if (isMobile && isSafari) {
this.myVideo.playsInline = true
this.myVideo.autoplay = true
}
then it works.

navigator.mediaDevices in microsoft edge mobile ios 13.3.1

has anyone tried to capture video from iphone camera on microsoft edge mobile browser? does it work? navigator.mediaDevices returns me undefined and I'm wondering if that browser doesn't support mediaDevices API at all, or it`s just a camera access issue.

Please check this article, if the current document isn't loaded securely or if using the new MediaDevices API in older browsers, the navigator.mediaDevices might be undefined. So, try to check the browser version and clear the browser data, and then retest the code.
Besides, before using navigator.mediaDevices, you could try to add the following polyfill:
// Older browsers might not implement mediaDevices at all, so we set an empty object first
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// Some browsers partially implement mediaDevices. We can't just assign an object
// with getUserMedia as it would overwrite existing properties.
// Here, we will just add the getUserMedia property if it's missing.
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function(constraints) {
// First get ahold of the legacy getUserMedia, if present
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// Some browsers just don't implement it - return a rejected promise with an error
// to keep a consistent interface
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
// Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(function(stream) {
var video = document.querySelector('video');
// Older browsers may not have srcObject
if ("srcObject" in video) {
video.srcObject = stream;
} else {
// Avoid using this in new browsers, as it is going away.
video.src = window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
});
I have reproduced the problem on IOS 13.4 version and using Microsoft Edge 44.13.7 version, after using above polyfill, this error disappears.

Video tag with input from Camera is Working in Safari on iOS but neither working in Chrome nor in any In-app Browser

The video streaming works perfectly well for Android, and Safari in iOS. The problem occurs when we try to use Chrome on iOS or an In-app Browser. I am using Vue as a Single File Component.
My HTML code is as follows:
<video
height="400px"
width="300px"
autoplay
playsinline
/>
My Vue JS code is as follows:
data: () => ({
video: null,
}),
mounted() {
navigator.mediaDevices.getUserMedia({
audio: false,
// Prioritize Rear Camera
video: {facingMode: 'environment'},
})
.then((stream) => {
this.video = document.querySelector('video');
this.video.srcObject = stream;
this.video.tracks = stream.getTracks();
});
}
Any help or alternative methods to solve this would be appreciated. My goal is to start a stream from the camera on the webpage and take a photo on click.

Despite the information here Chrome, Firefox, and Edge for iOS do not support the navigator.mediaDevices property due to the fact that under the hood they all use the built-in WebKit rendering engine which does not provide this capability to third parties. There is a bug filed here which includes some promising discussions about how iOS 13.4 may have partially resolved this.
Until Apple decides to provide this, the only option is to check navigator.mediaDevices for null and catch errors on the promise:
if (navigator.mediaDevices == null) { /* unsupported */ }
else {
navigator.mediaDevices.getUserMedia({})
.then((stream) => {})
.catch((err) => { /* unsupported */ })
}
...and provide users with the appropriate feedback.

Chrome: navigator.mediaDevices.getUserMedia is not a function

I'm on localhost and trying to use the MediaDevices.getUserMedia method in Chrome. I receive the error as titled. I understand that in Chrome it is only possible to use this function with a secure origin and that localhost is considered a secure origin. Also, this works in Firefox.
This is how I'm using it as shown on the Google Developers website https://developers.google.com/web/updates/2015/10/media-devices?hl=en:
var constraints = window.constraints = {
audio: false,
video: true
};
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
callFactory.broadcastAssembly(stream);
...
});

On some latest browsers navigator.getUserMedia does not perform well. So, try using navigator.mediaDevices.getUserMedia. Or, better you check if navigator.mediaDevices.getUserMedia is available for the browser use navigator.mediaDevices.getUserMedia or else use navigator.getUserMedia.
navigator.getWebcam = (navigator.getUserMedia || navigator.webKitGetUserMedia || navigator.moxGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(function (stream) {
//Display the video stream in the video object
})
.catch(function (e) { logError(e.name + ": " + e.message); });
}
else {
navigator.getWebcam({ audio: true, video: true },
function (stream) {
//Display the video stream in the video object
},
function () { logError("Web cam is not accessible."); });
}
Hope this will solve your problem.

Try enabling: chrome://flags/#enable-experimental-web-platform-features
Worked for me in chromium

I too had the same problem in my chrome browser.
first check your phone is supported by testing it in https://test.webrtc.org/
if your phone passes all the cases, then check step 2
step 2:
If your hosting a webpage or running a third party webpage,see whether camera permissions are enabled on your phone.
Also the main issue is WEBRTC is not supported in HTTP site and it is supported only in HTTPS site
This is the https site which allows web
This is the http site which gives a error

I got stuck in the same issue. One solution is to follow and download the extension Web Server for Chrome shared in the comment above by #ellerynz, or
if you have python installed you could also do
python -m SimpleHTTPServer [port]
After you hit enter, you should see the following message:
Serving HTTP on 0.0.0.0 port 8000 ...
Open the browser and put
http://127.0.0.1:[port]

Have you tried to include adapter.js polyfill ? Check this page :
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Browser_compatibility
It looks like this or enabling chrome://flags/#enable-experimental-web-platform-features as per #Simon Malone's note, is needed for Chrome.

I was having this problem too and changing flags didn't seem to work. I came across this chrome extension — Web Server for Chrome in Google's WebRTC tutorial which seemed to do the trick.

Use navigator.getUserMedia() instead.
navigator.getUserMedia(constraints, successCallback, errorCallback);

HTML5 Audio Recording Not Working External Microphone

I am playing around with getUserMedia to gain access to the users microphone in Chrome(Version 28.0.1500.72 m). I am able to record and play back the users input when they use an internal microphone with internal speakers.
As soon as I plug in a usb microphone headset I am no longer able to record the users input. I have switched the device in the chrome setting under privacy and content settings. So chrome does see the newly plugged in microphone. I have restarted chrome and tried it again after plugging in the mic as well. Still no user input.
Thanks In Advance.
Below is the current code I am using.
window.AudioContext = window.AudioContext||window.webkitAudioContext;
var html5Recorder;
var audioContext = new AudioContext();
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if(navigator.getUserMedia){
navigator.getUserMedia({audio:true},handleAudioStream, audioError)
}else{
console.log('Use Flash')
}
function handleAudioStream(stream){
var mediaStream = audioContext.createMediaStreamSource(stream);
mediaStream.connect( audioContext.destination );
html5Recorder = new HTML5Recorder(mediaStream);
html5Recorder.stop();
html5Recorder.clear();
}
function audioError(error){
console.log(error);
}
function record(){
html5Recorder.record();
}
function stopRecording(){
html5Recorder.stop();
html5Recorder.exportWAV(function(e){
console.log(e);
console.log(window.URL.createObjectURL(e));
document.getElementById('audio1').src = window.URL.createObjectURL(e);
HTML5Recorder.forceDownload(e);
});
}

This was a bug in the current chrome build I was using (28). Chrome canary works fine.

Can you check the sampling rate on the two audio devices?
There is an existing bug that the non-default microphone only works if the sample rate is the same as the default microphone: https://code.google.com/p/chromium/issues/detail?id=164058.
Also, are you on OSX or Linux? The comments in the bug make it look like it should be fixed on Windows.

Try selecting the USB mic as the default one. Chrome does not mange audio devices and it always uses the default mic.