Tengo un problema al implementar navigator.getMedia en angular. ¿Cuál sería la forma correcta?.
public promiseGetUserMediaOld(constraints: any) { navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; navigator.getMedia(constraints, resolve, reject); }el error es "La propiedad 'getMedia' no existe en el tipo 'Navegador'"
La sintaxis correcta sería navigator.MediaDevices.getUserMedia
El método MediaDevices.getUserMedia() solicita permiso al usuario para usar una entrada de medios que produce un MediaStream con pistas que contienen los tipos de medios solicitados.
Ese flujo puede incluir, por ejemplo, una pista de video (producida por un hardware o una fuente de video virtual, como una cámara, un dispositivo de grabación de video, un servicio de pantalla compartida, etc.), una pista de audio (de manera similar, producida por una fuente física o fuente de audio virtual como un micrófono, convertidor A/D o similar) y posiblemente otros tipos de pistas.
Devuelve una Promesa que se resuelve en un objeto MediaStream. Si el usuario deniega el permiso o los medios coincidentes no están disponibles, la promesa se rechaza con NotAllowedError o NotFoundError DOMException respectivamente.
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); } } }Ejemplo de trabajo: https://stackblitz.com/edit/media-recorder-ukdruh?file=src%2Fapp%2Fapp.component.ts