diff options
Diffstat (limited to 'files/zh-cn/web/api/navigator/getusermedia/index.html')
| -rw-r--r-- | files/zh-cn/web/api/navigator/getusermedia/index.html | 198 |
1 files changed, 198 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/navigator/getusermedia/index.html b/files/zh-cn/web/api/navigator/getusermedia/index.html new file mode 100644 index 0000000000..11d597fcfc --- /dev/null +++ b/files/zh-cn/web/api/navigator/getusermedia/index.html @@ -0,0 +1,198 @@ +--- +title: navigator.getUserMedia +slug: Web/API/Navigator/getUserMedia +translation_of: Web/API/Navigator/getUserMedia +--- +<div class="note"> +<p><strong>Note:</strong> 此API已更名为 {{domxref("MediaDevices.getUserMedia()")}}。 请使用那个版本进行替代！ 这个已废弃的API版本仅为了向后兼容而存在。</p> +</div> + +<p>{{APIRef}}{{deprecated_header}}</p> + +<p><strong>Navigator.getUserMedia()</strong>方法提醒用户需要使用音频（0或者1）和（0或者1）视频输入设备，比如相机，屏幕共享，或者麦克风。如果用户给予许可，<strong>successCallback</strong>回调就会被调用，{{domxref("MediaStream")}}对象作为回调函数的参数。如果用户拒绝许可或者没有媒体可用，<strong>errorCallback</strong>就会被调用，类似的，<strong><code>PermissionDeniedError</code> </strong>或者<strong><code>NotFoundError</code></strong><code>对象作为它的参数。注意，有可能以上两个回调函数都不被调用，因为不要求用户一定作出选择（允许或者拒绝）。</code></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">navigator.getUserMedia ( constraints, successCallback, errorCallback );</pre> + +<h3 id="参数">参数</h3> + +<p><strong>constraints </strong></p> + +<p>{{domxref("MediaStreamConstaints")}}对象指定了请求使用媒体的类型，还有每个类型的所需要的参数。具体细节请参见{{domxref("MediaDevices.getUserMedia()")}} 方法下面的<a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Parameters">constraints</a>部分。</p> + +<p><strong>successCallback</strong></p> + +<p>当调用成功后，successCallback中指定的函数就被调用，包含了媒体流的{{domxref("MediaStream")}}对象作为它的参数，你可以把媒体流对象赋值给合适的元素，然后使用它，就像下面的例子一样：</p> + +<pre>function(stream) { + var video = document.querySelector('video'); + video.src = window.URL.createObjectURL(stream); + video.onloadedmetadata = function(e) { + // Do something with the video here. + }; +}</pre> + +<dl> +</dl> + +<p><strong>errorCallback</strong></p> + +<p>当调用失败，errorCallback中指定的函数就会被调用，{{domxref("MediaStreamError")}}对象作为它唯一的参数；此对象基于{{domxref("DOMException")}}对象构建。错误码描述见参见以下：</p> + +<table> + <thead> + <tr> + <th scope="col">Error</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>PermissionDeniedError</code></td> + <td>使用媒体设备请求被用户或者系统拒绝</td> + </tr> + <tr> + <td><code>NotFoundError</code></td> + <td> + <p>找不到constraints中指定媒体类型</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="宽度和高度">宽度和高度</h3> + +<p>使用getUserMedia()的示例，包括了可以适用于多种浏览器前缀的代码。注意这种使用方式已经被废除，现代的使用方法请参见{{domxref("MediaDevices.getUserMedia()")}} 下面的<a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Frame_rate">示例</a>部分。</p> + +<pre><code>navigator.getUserMedia = navigator.getUserMedia || + navigator.webkitGetUserMedia || + navigator.mozGetUserMedia; + +if (navigator.getUserMedia) { + navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } }, + function(stream) { + var video = document.querySelector('video'); + video.src = window.URL.createObjectURL(stream); + video.onloadedmetadata = function(e) { + video.play(); + }; + }, + function(err) { + console.log("The following error occurred: " + err.name); + } + ); +} else { + console.log("getUserMedia not supported"); +}</code></pre> + +<h2 id="权限">权限</h2> + +<p>在一个可以安装的app（比如，Firefox OS app）中使用getUserMedia()，你需要在你的manifest文件中指定一个或者多个以下条目：</p> + +<pre><code>"permissions": { + "audio-capture": { + "description": "Required to capture audio using getUserMedia()" + }, + "video-capture": { + "description": "Required to capture video using getUserMedia()" + } +}</code></pre> + +<p>参见 <a href="https://developer.mozilla.org/en-US/Apps/Developing/App_permissions#audio-capture">permission: audio-capture</a> 和 <a href="https://developer.mozilla.org/en-US/Apps/Developing/App_permissions#video-capture">permission: video-capture</a> 以查看更多信息。</p> + +<h2 id="规格">规格</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Media Capture', '#navigatorusermedia-interface-extensions', 'navigator.getUserMedia')}}</td> + <td>{{Spec2('Media Capture')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="warning"> +<p>新代码应当使用 {{domxref("Navigator.mediaDevices.getUserMedia()")}} 替代.</p> +</div> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>21{{property_prefix("webkit")}} [1]</td> + <td>17{{property_prefix("moz")}} [3]</td> + <td>{{CompatNo}}</td> + <td>12 [2]<br> + 18{{property_prefix("webkit")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> +<div id="compat-mobile"> +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic Support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(40.0)}}{{property_prefix("webkit")}} [2]</td> + <td>24{{property_prefix("moz")}} [3]</td> + <td>1.2{{property_prefix("moz")}} [4]<br> + 1.4{{property_prefix("moz")}}</td> + <td>{{CompatNo}}</td> + <td>12 [2]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> +<p>[1] 新版的Chrome支持未带前缀的 {{domxref("MediaDevices.getUserMedia()")}}, 用以取代此已废弃版本.</p> + +<p>[2] Chrome 和 Opera 仍然在使用已经过期的 constraint 语法, 但是此描述中的语法可以通过 <a href="https://github.com/webrtc/adapter">adapter.js</a> polyfill来使用.</p> + +<p>[3] 在此描述的constraint 语法自 Firefox 38后可用. 更早的版本 (32-37) 使用了已经过期的语法, 但是此描述中的语法可以通过 <a href="https://github.com/webrtc/adapter">adapter.js</a> polyfill来使用.</p> + +<p>[4] 在 Firefox OS 1.2中， 只有音频的到支持, 1.4 添加了视频支持.</p> + +<h2 id="更多参见">更多参见 </h2> + +<ul> + <li>{{domxref("MediaDevices.getUserMedia()")}} 替代了当前废弃的版本。</li> + <li><a href="https://developer.mozilla.org/en-US/docs/WebRTC">WebRTC</a> - the introductory page to the API</li> + <li><a href="https://developer.mozilla.org/en-US/docs/WebRTC/MediaStream_API">MediaStream API</a> - the API for the media stream objects</li> + <li><a href="https://developer.mozilla.org/en-US/docs/WebRTC/taking_webcam_photos">Taking webcam photos</a> - a tutorial on using <code>getUserMedia() for taking photos rather than video.</code></li> +</ul> |