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.
Related
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.
I am trying to give my browser access to my devices camera, so that I can feed the media stream into a video, but when I am testing on google chrome getUserMedia is not supported, but when I use safari I am having no issues.
Does google chrome not have any support for getUserMedia anymore?
I have already read this article, but have had no luck.
This is the implementation I am currently using:
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
let constraints = {
audio: false,
video: { facingMode: "user" }
}
if (navigator.getUserMedia) {
navigator.getUserMedia(constraints,
function(stream) {
var video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
},
function(err) {
alert("The following error occured: " + err.name);
}
);
} else {
console.log("getUserMedia not supported");
}
Having the same troubles on iOS 11.2x. My researches showed that FF and Chrome are supported on OS but NOT on iOS even they would be able to support media devices. You can test easy mediaDevice availability:
if (navigator.mediaDevices) {
alert ("Media device supported");
}
else {
alert ("Media device not supported");
}
You can check that here too: HTML5Test
FF and Chrome on iOS will show "Media device not supported" while Safari says its supported. The reason looks like Apple has still not given free the access to other browsers using mediaDevices.You can imagine some reasons why that is. ;/ So don't blame Chrome or Firefox this time.
Would be interesting to know if it now works in iOS 12.
This works with FF and Chrome on desktop and phone. Note: width and height are reversed on desktop and phone. Note: FF and Chrome allow it to run on localhost and https. Chrome will NOT allow it to run on a http site.
function fnStreamVideo(){
navigator.mediaDevices.getUserMedia({ video:true })
.then(function(stream) {
let video = document.getElementById('video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
video.width=480;
video.height=320;
};
})
.catch(function(e){});
}
I have been using getUserMedia() for WebRtc for a while now but since the latest update of browsers I have not been able to use this. On previous versions worked fine.
Affected browsers' versions
Firefox - 57.0.4 ,
Chrome - 63.0.3239.132
Example code:
navigator.getUserMedia({ "audio": true, "video": false }, function (stream) {
console.log(stream);
localStream = stream;
},logError);
Also check this if anyone is getting this error in google sample code
https://webrtc.github.io/samples/src/content/getusermedia/gum/
Is there any work around for this issue? Need help.
Thanks
I found the solution. In newer versions when we specify the constraints { audio: true, video: true } either of which ever we specify as true that corresponding hardware need to be present. otherwise it will throw DevicesNotFoundError .
Here is the code i used. i don't have a web cam in local machine so specified video as false.
navigator.mediaDevices.getUserMedia({ audio: true, video: false})
.then(function(stream) {
/* use the stream */
})
.catch(function(err) {
/* handle the error */
});
As advised in internet i added the muted and playsinline attributes to my video element. I still cant get a vision in Safari 11 but only this error.
I also tried to remove autoplay from my video element.
Unhandled Promise Rejection: TypeError: Type error
Is it possible to get webrtc working in Safari 11 or am i losing time with this?
getUserMedia() works on all other browsers (Chrome,Firefox,Edge,Opera).
Thank you!
I use this shim, https://github.com/addyosmani/getUserMedia.js/blob/gh-pages/lib/getUserMedia.js this returns a success callback,
Then in the callback,
var video = camOptions.videoEl; //the video element
var vendorURL = window.URL || window.webkitURL;
try {
video.src = vendorURL ? vendorURL.createObjectURL(stream) : stream;
}
catch(err) {
//HERE IS THE TYPE ERROR IN SAFARI
}
The TypeError you are getting is because you are passing the wrong constraints when calling GetUserMedia. This error happens when you pass constrains which are not recorgnized by the device (browser) or have invalid values.
Also, you need to use video.srcObject and not video.src which is deprecated.
Here's a working example for Safari. Keep in mind this only works on iOS 11 and above:
// Get the <video> element
var video = document.getElementById('vid');
// Default constrains
var constraints = { audio: true, video: true };
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess);
var handleSuccess = function (stream) {
video.srcObject = stream;
};
Better define handleSuccess callback before calling navigator.mediaDevices.getUserMedia, I stuck here for some minutes.🤣
I have a angular2 project where I add a html5 camera access.
I start my angular2 project with the angular CLI (ng serve)
This will start with "ng serve" the web container at testing.
When I access the camera the browser ask me if I want to access the camera.
After allow the browser to access the camera all is fine.
private showCam() {
this.showCamScreen = true;
// 1. Casting necessary because TypeScript doesn't
// know object Type 'navigator';
const nav = <any>navigator;
// 2. Adjust for all browsers
nav.getUserMedia = nav.getUserMedia || nav.mozGetUserMedia || nav.webkitGetUserMedia;
// 3. Trigger lifecycle tick (ugly, but works - see (better) Promise example below)
setTimeout(() => { }, 100);
// 4. Get stream from webcam
nav.getUserMedia(
{ video: { width: 1280, height: 720 } },
(stream) => {
const webcamUrl = URL.createObjectURL(stream);
// 4a. Tell Angular the stream comes from a trusted source
this.videosrc = this.sanitizer.bypassSecurityTrustUrl(webcamUrl);
// 4b. Start video element to stream automatically from webcam.
this.element.nativeElement.querySelector('video').autoplay = true;
},
(err) => console.log(err));
// OR: other method, see http://stackoverflow.com/questions/32645724/angular2-cant-set-video-src-from-navigator-getusermedia for credits
const promise = new Promise<string>((resolve, reject) => {
nav.getUserMedia({ video: true }, (stream) => {
resolve(stream);
}, (err) => reject(err));
}).then((stream) => {
const webcamUrl = URL.createObjectURL(stream);
this.videosrc = this.sanitizer.bypassSecurityTrustResourceUrl(webcamUrl);
// for example: type logic here to send stream to your server and (re)distribute to
// other connected clients.
}).catch((error) => {
console.log(error);
});
}
If I copy the code to the target enviorment where we are using a Tomcat7 WebContainer, the webbrowser is not asking me to access the camera? There I access the application with "t00-lhoist01:8083/GF". Why the camera is not working on the tomcat but if I am using the AngularCLI Container it is working fine?
Can anybody help we on this issue? Do I missing something?
I found the solution. The problem is, that chrome will not ask for access the camera if it is not a https connection. If you do it with a localhost than the browser will ask to access the camera even it is not a https connection.
Keep in mind that IE,Chrome or Firefox behave differently.
For instance, Firefox will ask to access the camera with http-connection but you are not possible to save your decision.
Regards