1+ var stream ;
2+ var videoContainer = document . querySelector ( '#webcam' ) ;
3+ var videoSelect = document . querySelector ( '#cameras' ) ;
4+ var botoes = {
5+ iniciar : document . querySelector ( '#iniciar' ) ,
6+ parar : document . querySelector ( '#parar' ) ,
7+ } ;
8+
9+ // Ao carregar o DOM, as funções serão inicializadas
10+ document . addEventListener ( 'DOMContentLoaded' , ( ev ) => carregarCameras ( ) ) ;
11+
12+ videoSelect . onchange = ( ev ) => initCamera ( ev . value ) ;
13+ // videoSelect.addEventListener('change', (ev) => initCamera(ev.value)); // Dá pra fazer dessa forma também
14+
15+ async function carregarCameras ( ) {
16+ alternarExibicaoVideo ( false ) ;
17+
18+ const devices = await navigator . mediaDevices . enumerateDevices ( ) ;
19+ for ( const d of devices ) {
20+ if ( d . kind === 'videoinput' ) {
21+ setNomeCamera ( d ) ;
22+ }
23+ }
24+
25+ // initCamera(); // comentado para não iniciar as câmeras logo de inicio
26+ }
27+
28+ async function setNomeCamera ( camera ) {
29+ const option = document . createElement ( 'option' ) ;
30+ option . value = camera . deviceId ;
31+ option . text = camera . label ;
32+ if ( ! camera . label ) {
33+ await solicitarPermissao ( ) ;
34+ await carregarCameras ( ) ;
35+ return ;
36+ }
37+ videoSelect . appendChild ( option ) ;
38+ }
39+
40+ async function solicitarPermissao ( ) {
41+ const s = await navigator . mediaDevices . getUserMedia ( { audio : true , video : true } ) ;
42+ s . getTracks ( ) . forEach ( t => t . stop ( ) ) ;
43+ }
44+
45+ async function initCamera ( idCamera = videoSelect . value ) {
46+ pararCamera ( ) ;
47+
48+ const constrains = {
49+ video : {
50+ deviceId : idCamera ? { exact : idCamera } : undefined
51+ }
52+ } ;
53+ stream = await navigator . mediaDevices . getUserMedia ( constrains ) ;
54+
55+ videoContainer . srcObject = stream ;
56+ alternarExibicaoVideo ( true ) ;
57+ }
58+
59+ function pararCamera ( ) {
60+ stream ?. getTracks ( ) . forEach ( t => {
61+ // console.log('Parando o video', t, t.getCapabilities());
62+ t . stop ( ) ;
63+ } ) ;
64+
65+ alternarExibicaoVideo ( false ) ;
66+ }
67+
68+ function alternarExibicaoVideo ( exibir ) {
69+ if ( exibir ) {
70+ videoContainer . removeAttribute ( 'hidden' ) ;
71+ botoes . iniciar . disabled = true ;
72+ botoes . parar . disabled = false ;
73+ } else {
74+ videoContainer . setAttribute ( 'hidden' , true ) ;
75+ botoes . iniciar . disabled = false ;
76+ botoes . parar . disabled = true ;
77+ }
78+ }
0 commit comments