1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
|
---
title: navigator.getUserMedia
slug: Web/API/Navigator/getUserMedia
translation_of: Web/API/Navigator/getUserMedia
---
<p>{{APIRef("Media Capture and Streams")}}{{deprecated_header}}</p>
<p>O método Navigator.getUserMedia() atualmente esta <em>deprecated </em>(obseleto), ele é responsavel por pedir a permissão do usuário para usar até 1 dispositivo de entrada de vídeo (como câmera, ou tela compartilhada) e até 1 dispositivo de entrada de áudio (como o microfone) como fonte para o stream de mídia (pode ser representado por uma instância <code>MediaStream</code>).</p>
<p>Se o usuário der permissão, a MediaStream (o <em>track</em> do video e/ou audio) , é entregue ao <em>callback </em>de sucesso, se a permissão é negada, pode ser que não haja dispositivo compatível ou alguma condição de erro aconteceu, retornando o <em>callback </em>de erro com uma instancia do objeto {{domxref("MediaStreamError")}} , com a descrição do erro que aconteceu, se o usuário não fizer nenhuma escolha, nenhum <em>callback </em>é retornado.</p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox">navigator.getUserMedia ( permissoes, callbackSucesso, callbackErro );</pre>
<p><strong>Exemplo</strong></p>
<p>Este é um exemplo de uso da função getUserMedia() com prefixos específicos dos navegadores.</p>
<pre class="brush: js">navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getMedia (
// permissoes
{
video: true,
audio: true
},
// callbackSucesso
function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {
// Faz algo com o vídeo aqui.
};
},
// callbackErro
function(err) {
console.log("O seguinte erro ocorreu: " + err);
}
);</pre>
<h2 id="Parâmetros">Parâmetros</h2>
<table>
<thead>
<tr>
<th scope="col">parâmetro</th>
<th scope="col">Obrigatório/ <br>
Opcional </th>
<th scope="col">Descrição</th>
</tr>
</thead>
<tbody>
<tr>
<td>permissoes</td>
<td>Obrigatório</td>
<td>Os tipos de mídia habilitados no objeto LocalMediaStream enviado para a callbackSucesso.</td>
</tr>
<tr>
<td>callbackSucesso</td>
<td>Obrigatório</td>
<td>A função da aplicação a ser invocada para receber o objeto LocalMediaStream.</td>
</tr>
<tr>
<td>callbackErro</td>
<td>Opcional</td>
<td>A função a ser invocada na aplicação se a chamada a getUserMedia falhar.</td>
</tr>
</tbody>
</table>
<h3 id="permissoes">permissoes</h3>
<p>O parâmetro permissoes é um objeto MediaStreamConstraints com dois membros do tipo Boolean: <code>video</code> e <code>audio</code>. Estes membros descrevem os tipos de mídia habilitados no objeto <a href="/en-US/docs/WebRTC/MediaStream_API#LocalMediaStream" title="WebRTC/MediaStream_API#LocalMediaStream">LocalMediaStream</a>. Pelo menos um destes membros deve ser especificado para que o argumento seja validado. Se um membro especificado não for suportado pelo navegador, a função getUserMedia invocará a callbackErro com o erro NOT_SUPPORTED_ERROR. Se o navegador não puder encontrar nenhuma fonte de mídia com o tipo especificado, a função getUserMedia invocará a callbackErro com o erro MANDATORY_UNSATISFIED_ERR.</p>
<p>Se o valor de um membro não estiver especificado no objeto, o valor padrão deste membro será falso. Veja como configurar o objeto permissoes para obter tanto áudio como vídeo:</p>
<pre>{ video: true, audio: true }</pre>
<h3 id="callbackSucesso">callbackSucesso</h3>
<p>A função getUserMedia invocará a função especificada em callbackSucesso com o objeto <a href="/en-US/docs/WebRTC/MediaStream_API#LocalMediaStream" title="WebRTC/MediaStream_API#LocalMediaStream">LocalMediaStream</a> que contém a fonte de mídia. Você pode associar este objeto com o elemento apropriado e trabalhar com ele, como mostrado no exemplo a seguir:</p>
<pre>function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {
// Faz algo com o vídeo aqui.
};
},</pre>
<h3 id="callbackErro">callbackErro</h3>
<p>A função getUserMedia invocará a função especificada em callbackErro com um argumento <code>code</code>. Os códigos de erro são descritos abaixo:</p>
<table>
<thead>
<tr>
<th scope="col">Erro</th>
<th scope="col">Descrição</th>
</tr>
</thead>
<tbody>
<tr>
<td>PERMISSION_DENIED </td>
<td>O usuário não permitiu acesso a um dispositivo de mídia necessário para essa operação. </td>
</tr>
<tr>
<td>NOT_SUPPORTED_ERROR </td>
<td>Uma mídia especificada não é suportada pelo navegador.</td>
</tr>
<tr>
<td>MANDATORY_UNSATISFIED_ERROR </td>
<td>Nenhuma fonte de mídia do tipo especificado foi encontrada.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Funcionalidade</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Stream API </td>
<td>21{{property_prefix("webkit")}} </td>
<td>20{{property_prefix("moz")}} </td>
<td>{{CompatNo}} </td>
<td>12</td>
<td>{{CompatUnknown}} </td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Funcionalidade</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Stream API </td>
<td>{{CompatNo}} </td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}} </td>
<td>12</td>
<td>{{CompatNo}} </td>
</tr>
</tbody>
</table>
</div>
<p><span style="line-height: 1.5em;">Atualmente, usar o WebRTC para acessar a câmera de vídeo é suportado nos navegadores Chrome, Opera e Firefox 20.</span></p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a> - a página introdutória a API</li>
<li><a href="/en-US/docs/WebRTC/MediaStream_API" title="WebRTC/MediaStream_API">MediaStream API</a> - a API para objetos de fonte de mídia</li>
<li><a href="/en-US/docs/WebRTC/taking_webcam_photos" title="WebRTC/taking_webcam_photos">Taking webcam photos</a> - um tutorial sobre como usar a getUserMedia()</li>
</ul>
|
