Issue
I have a problem when implementing navigator.getMedia in angular. Which would be the correct way?.
public promiseGetUserMediaOld(constraints: any) {
navigator.getMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia(constraints, resolve, reject);
}
the error is "Property 'getMedia' does not exist on type 'Navigator'"
Solution
Correct syntax would be navigator.MediaDevices.getUserMedia
The MediaDevices.getUserMedia() method prompts the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media.
That stream can include, for example, a video track (produced by either a hardware or virtual video source such as a camera, video recording device, screen sharing service, and so forth), an audio track (similarly, produced by a physical or virtual audio source like a microphone, A/D converter, or the like), and possibly other track types.
It returns a Promise that resolves to a MediaStream object. If the user denies permission, or matching media is not available, then the promise is rejected with NotAllowedError or NotFoundError DOMException respectively.
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
https://developer.chrome.com/blog/media-devices/#getusermedia
import {
Component,
OnInit,
} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
// Put variables in global scope to make them available to the browser console.
const constraints = window.constraints = {
audio: false,
video: true
};
errorString = '';
ngOnInit() {}
handleSuccess(stream) {
const video = document.querySelector('video');
const videoTracks = stream.getVideoTracks();
console.log('Got stream with constraints:', constraints);
console.log(`Using video device: ${videoTracks[0].label}`);
window.stream = stream; // make variable available to browser console
video.srcObject = stream;
}
handleError(error) {
if (error.name === 'OverconstrainedError') {
const v = constraints.video;
errorMsg(`The resolution ${v.width.exact}x${v.height.exact} px is not supported by your device.`);
} else if (error.name === 'NotAllowedError') {
errorMsg('Permissions have not been granted to use your camera and ' +
'microphone, you need to allow the page access to your devices in ' +
'order for the demo to work.');
}
errorMsg(`getUserMedia error: ${error.name}`, error);
}
errorMsg(msg, error) {
this.errorString = msg;
if (typeof error !== 'undefined') {
console.error(error);
}
}
async init(e) {
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints);
this.handleSuccess(stream);
e.target.disabled = true;
} catch (e) {
this.handleError(e);
}
}
}
Working example: https://stackblitz.com/edit/media-recorder-ukdruh?file=src%2Fapp%2Fapp.component.ts
Answered By - Joosep Parts
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.