files/zh-cn/web/api/mediadevices/getsupportedconstraints/index.html


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

---
title: MediaDevices.getSupportedConstraints()
slug: Web/API/MediaDevices/getSupportedConstraints
translation_of: Web/API/MediaDevices/getSupportedConstraints
---
<p>{{APIRef("Media Capture and Streams")}}</p>

<p> </p>

<p>{{domxref("MediaDevices")}} 接口的<code><strong>getSupportedConstraints</strong></code><strong><code>()</code></strong>方法返回一个基于{{domxref("MediaTrackSupportedConstraints")}}的对象, 其成员字段都是客户端（{{Glossary("user agent")}}）所支持的约束属性（如帧率，窗口大小）。</p>

<h2 id="语法">语法</h2>

<pre class="syntaxbox">var <em>supportedConstraints</em> = navigator.mediaDevices.getSupportedConstraints();</pre>

<h3 id="参数">参数</h3>

<p>无</p>

<h3 id="返回值">返回值</h3>

<p>一个新的基于{{domxref("MediaTrackSupportedConstraints")}} 的对象用来监视客户端所支持的约束属性.因为只有客户端所支持的约束属性才能被展示在这个列表中 , 这些布尔值（Boolean）属性的每一个都为true。</p>

<h2 id="Example" name="Example">示例</h2>

<p>这个示例展示了你的客户端所支持的约束属性的列表。</p>

<div class="hidden">
<h3 id="HTML_内容">HTML 内容</h3>

<pre class="brush: html">&lt;p&gt;The following media constraints are supported by your browser:&lt;/p&gt;

&lt;ul id="constraintList"&gt;
&lt;/ul&gt;</pre>

<h3 id="CSS_内容">CSS 内容</h3>

<pre class="brush: css">body {
  font: 15px Arial, sans-serif;
}</pre>

<h3 id="JavaScript_内容">JavaScript 内容</h3>
</div>

<pre class="brush: js">let constraintList = document.getElementById("constraintList");
let supportedConstraints = navigator.mediaDevices.getSupportedConstraints();

for (let constraint in supportedConstraints) {
  if (supportedConstraints.hasOwnProperty(constraint)) {
    let elem = document.createElement("li");

    elem.innerHTML = "&lt;code&gt;" + constraint + "&lt;/code&gt;";
    constraintList.appendChild(elem);
  }
}</pre>

<h3 id="结果">结果</h3>

<p>{{ EmbedLiveSample('Example', 600, 350) }}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
  <tr>
   <td>{{SpecName('Media Capture', '#widl-MediaDevices-getSupportedConstraints-MediaTrackSupportedConstraints', 'getSupportedConstraints()')}}</td>
   <td>{{Spec2('Media Capture')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器支持情况">浏览器支持情况</h2>

<p>{{ CompatibilityTable }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Microsoft Edge</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatVersionUnknown }}</td>
   <td>{{CompatGeckoDesktop(50) }}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{ CompatUnknown }}</td>
   <td>{{ CompatUnknown }}</td>
   <td>{{ CompatUnknown }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown }}</td>
   <td>{{ CompatGeckoMobile(48) }}</td>
   <td>{{ CompatGeckoMobile(50) }}</td>
   <td>{{ CompatUnknown }}</td>
   <td>{{ CompatUnknown }}</td>
   <td>{{ CompatUnknown }}</td>
   <td>{{ CompatVersionUnknown }}</td>
  </tr>
 </tbody>
</table>
</div>