Tecnologia

Acessar áudio e vídeo do usuário

A interface navigator representa o estado e a identidade do agente do usuário. Ele permite que scripts consultem e se registrem para realizar algumas atividades.


A propriedade navigator.mediaDevices retorna um objeto MediaDevices, que fornece acesso a dispositivos de entrada de mídia conectados, como câmeras e microfones, além de compartilhamento de tela.


O método navigator.mediaDevices.getUserMedia() solicita ao usuário permissão para usar uma entrada de mídia. Por exemplo, uma câmera, uma faixa de áudio.


HTML:

	
<button id="start">Iniciar áudio e vídeo</button>
<button id="stop">Parar áudio e vídeo</button>
<video autoplay>Start streaming</video>

Javascript:

	
var stream

document.querySelector('#start').addEventListener('click', async (e) => {
	try {
		stream = await navigator.mediaDevices.getUserMedia({
			video: true,
			audio: true
		})			
		document.querySelector('video').srcObject = stream
	} catch (error) {
		alert(`${error.name}`)
		console.error(error)
	}
})

document.querySelector('#stop').addEventListener('click', async (e) => {
	try {
		stream.getTracks().forEach(track => track.stop())				
	} catch (error) {
		alert(`${error.name}`)
		console.error(error)
	}
})


Para saber mais acesse:

https://flaviocopes.com/getusermedia/

https://developer.mozilla.org/en-US/docs/Web/API/Navigator

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mediaDevices

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia





2020 © B85 Tecnologia
eu@andersonbravo.com.br