Menu
Does chrome support promise based APIs for WebRTC? I am not able to get the getUserMedia() promised based API working in Chrome.
<!DOCTYPE html>
<html>
<head>
<title> Mitel WebRTC client </title>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src='dist/webrtc.min.js'></script>
<script type="text/javascript">
function startUp() {
var options = {
audio: true,
video: true
};
if (getUserMedia) {
getUserMedia(options)
.then(function (stream) {
console.log("Acquired audio and video!");
})
.catch(function (err) {
console.log(err.name + ": " + err.message);
});
} else {
alert("WebRTC not supported on this browser");
}
}
</script>
</head>
<body onload="startUp();">
<h1>WebRTC Promise API Client Application</h1>
</body>
</html>
On the console, I see the following error
This appears to be Chrome
adapter-latest.js:32 chrome: {"audio":true,"video":true}
adapter-latest.js:410 Uncaught TypeError: Failed to execute 'webkitGetUserMedia' on 'Navigator': The callback provided as parameter 2 is not a function.
I want to make use of promise based API. Am I missing something?
575
When getUserMedia () is invoked, the browser prompts the User for permission to access the available device camera or microphone (based on the given MediaStreamConstraints parameter). If the User gives the permission, then it returns a Promise that resolves to a MediaStream .
The MediaDevices.getUserMedia () is a part of the webRTC media capture API and is used to get access to the camera and the microphone connected to the user device (user computer, smartphone, etc.) from the browser.
The getUserMedia() method is only available in secure contexts. A secure context is one the browser is reasonably confident contains a document which was loaded securely, using HTTPS/TLS, and has limited exposure to insecure contexts.
This requirement can be very loosely defined (audio and/or video), or very specific (minimum camera resolution or an exact device ID). It is recommended that applications that use the getUserMedia () API first check the existing devices and then specifies a constraint that matches the exact device using the deviceId constraint.
It is not implemented yet in Chrome, but it works there if you use the official adapter.js WebRTC polyfill: https://jsfiddle.net/srn9db4h/
var constraints = { video: true, audio: true };
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => video.srcObject = stream)
.catch(e => console.error(e));
Firefox and Edge support it natively FWIW.
Update: Chrome (50) appears to support this now. And Chrome 52 even supports srcObject.
184
To access navigator.mediaDevices you must to connect your site with HTTPS connection. There are no access this feature with HTTP.
https://developers.google.com/web/fundamentals/media/capturing-images/
Warning: Direct access to the camera is a powerful feature. It requires consent from the user, and your site MUST be on a secure origin (HTTPS).
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
