From 3f5025eba18d07c319fee9d28e215d315ef5d1b2 Mon Sep 17 00:00:00 2001 From: MDN Date: Fri, 11 Mar 2022 00:14:44 +0000 Subject: [CRON] sync translated content --- files/ja/_redirects.txt | 1 + files/ja/_wikihistory.json | 12 +- .../api/mediadevices/devicechange_event/index.html | 203 +++++++++++++++++++++ .../web/api/mediadevices/ondevicechange/index.html | 202 -------------------- files/zh-cn/_redirects.txt | 2 + files/zh-cn/_wikihistory.json | 24 +-- .../api/mediadevices/devicechange_event/index.html | 203 +++++++++++++++++++++ .../web/api/mediadevices/ondevicechange/index.html | 202 -------------------- .../window/beforeinstallprompt_event/index.html | 67 +++++++ .../api/window/onbeforeinstallprompt/index.html | 66 ------- 10 files changed, 494 insertions(+), 488 deletions(-) create mode 100644 files/ja/web/api/mediadevices/devicechange_event/index.html delete mode 100644 files/ja/web/api/mediadevices/ondevicechange/index.html create mode 100644 files/zh-cn/conflicting/web/api/mediadevices/devicechange_event/index.html delete mode 100644 files/zh-cn/web/api/mediadevices/ondevicechange/index.html create mode 100644 files/zh-cn/web/api/window/beforeinstallprompt_event/index.html delete mode 100644 files/zh-cn/web/api/window/onbeforeinstallprompt/index.html (limited to 'files') diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index f7931e8e02..f4b7a44b99 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -3179,6 +3179,7 @@ /ja/docs/Web/API/Index /ja/docs/Web/API /ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /ja/docs/Web/API/IndexedDB_API/Basic_Terminology /ja/docs/Web/API/MediaCapabilitiesInfo /ja/docs/Web/API/MediaCapabilities/encodingInfo +/ja/docs/Web/API/MediaDevices/ondevicechange /ja/docs/Web/API/MediaDevices/devicechange_event /ja/docs/Web/API/MediaRecorder_API /ja/docs/Web/API/MediaStream_Recording_API /ja/docs/Web/API/MediaStreamConstraints /ja/docs/conflicting/Web/API/MediaDevices/getUserMedia /ja/docs/Web/API/MouseEvent/which /ja/docs/Web/API/UIEvent/which diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 7615f224f5..e42e93574b 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -17907,6 +17907,12 @@ "teoli" ] }, + "Web/API/MediaDevices/devicechange_event": { + "modified": "2019-03-18T21:42:20.814Z", + "contributors": [ + "e53e04ac" + ] + }, "Web/API/MediaDevices/enumerateDevices": { "modified": "2019-03-23T22:51:51.373Z", "contributors": [ @@ -17936,12 +17942,6 @@ "YuichiNukiyama" ] }, - "Web/API/MediaDevices/ondevicechange": { - "modified": "2019-03-18T21:42:20.814Z", - "contributors": [ - "e53e04ac" - ] - }, "Web/API/MediaQueryList": { "modified": "2020-10-15T21:19:19.216Z", "contributors": [ diff --git a/files/ja/web/api/mediadevices/devicechange_event/index.html b/files/ja/web/api/mediadevices/devicechange_event/index.html new file mode 100644 index 0000000000..8c65429674 --- /dev/null +++ b/files/ja/web/api/mediadevices/devicechange_event/index.html @@ -0,0 +1,203 @@ +--- +title: MediaDevices.ondevicechange +slug: Web/API/MediaDevices/devicechange_event +translation_of: Web/API/MediaDevices/ondevicechange +original_slug: Web/API/MediaDevices/ondevicechange +--- +

{{APIRef("Media Capture and Streams")}}

+ +

MediaDevices.ondevicechangeプロパティは{{event("Event_handlers", "event handler")}}であり、{{domxref("MediaDevices")}}インスタンスで{{event("devicechange")}}が発生した時に呼び出される関数です。このイベントは、{{Glossary("user agent")}}、Webサイト、アプリケーションによって利用可能なメディアデバイスの一覧が変更された時に発生します。更新された利用可能デバイスの一覧は{{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}によっていつでも取得することができます。

+ +

文法

+ +
MediaDevices.ondevicechange = eventHandler;
+
+ +

値

+ +

{{event("devicechange")}}イベントが発生したことを示す{{domxref("Event")}}オブジェクトを入力として受け付ける関数を指定してください。このイベントオブジェクトには、変更に関する情報が含まれていませんので、更新されたデバイスの一覧を取得したい場合は、{{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}を呼び出してください。

+ +

例

+ +

この例では、updateDeviceList()という関数があり、この関数は{{domxref("MediaDevices.getUserMedia()")}}が成功して、ストリームを取得できた時に一度だけ呼び出され、その後デバイスの一覧に変更があった場合も複数回呼び出されます。この関数は、ブラウザウィンドウに2つの一覧を出力します。1つは、オーディオデバイスの一覧であり、もう1つはビデオデバイスの一覧です。これら2つのリストは、デバイスラベル (名前)とこのデバイスが入力か出力であるかを示すものです。この例では、{{event("devicechange")}}イベントのハンドラを設定しているので、実行中にデバイスが接続または接続を解除されるたびに一覧が更新されます。

+ + + +

オーディオとビデオデバイスの一覧に使用される{{HTMLElement("ul")}}要素への参照を保持するためのグローバル変数を用意します。

+ +
let audioList = document.getElementById("audioList");
+let videoList = document.getElementById("videoList");
+ +

デバイス一覧 の取得と描画

+ +

updateDeviceList()メソッドでは、現在のメディアデバイスの一覧を取得した後、先ほど用意したグローバル変数を用いて、表示されているオーディオとビデオのデバイス一覧を更新します。

+ +
function updateDeviceList() {
+  navigator.mediaDevices.enumerateDevices()
+  .then(function(devices) {
+    audioList.innerHTML = "";
+    videoList.innerHTML = "";
+
+    devices.forEach(function(device) {
+      let elem = document.createElement("li");
+      let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);
+
+      elem.innerHTML = "<strong>" + device.label + "</strong> (" + direction + ")";
+      if (type === "audio") {
+        audioList.appendChild(elem);
+      } else if (type === "video") {
+        videoList.appendChild(elem);
+      }
+    });
+  });
+}
+ +

updateDeviceList()は、{{domxref("navigator.mediaDevices")}}プロパティから参照できる{{domxref("MediaDevices")}}オブジェクトにある{{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}関数の呼び出しから構成されます。コードが実行されるのは、enumerateDevices()によって返された{{jsxref("promise")}}が完了した時です。デバイス一覧の準備ができると、完了ハンドラが呼び出されます。このデバイス一覧は、完了ハンドラの引数として{{domxref("MediaDeviceInfo")}}オブジェクトの配列で渡されます。この配列のそれぞれの要素は、1つのメディア入力デバイスまたは出力デバイスについての情報を含みます。

+ +

すべてのデバイスの情報を出力するために、{{jsxref("Array.forEach", "forEach()")}}ループを使用します。それぞれのデバイスで、ユーザへこのデバイス情報を見せるために新しい{{HTMLElement("li")}}オブジェクトを作成します。

+ +

let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);の行について詳しく説明します。ここでは分割代入 (ECMAScript 6の新しい機能)を使用しており、{{jsxref("String.match()")}}によって返された配列の値をkind、type、directionの変数へ代入しています。なぜこのようなことをするのかというと、{{domxref("MediaDeviceInfo.kind")}}の文字列は、"audioinput"や"videooutput"のように、メディアタイプとメディアフローの向きの2つの情報を含んでいるためです。この行で、タイプ("audio"または"video")と方向("input"と"output")を取り出すことで、リストに表示する文字列を作成することができます。

+ +

太字のデバイス名と括弧で囲まれた方向を含む文字列が作成されると、デバイスタイプに基づいてaudioListまたはvideoList対応する一覧へ{{domxref("Node.appendChild", "appendChild()")}}の呼び出しによって追加されます。

+ +

デバイス一覧の変更を扱う

+ +

updateDeviceList()は2箇所から呼び出されます。1箇所目は{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}のpromiseの完了ハンドラであり、ストリームが開かれた時に最初に一覧を埋めます。2箇所目は{{event("devicechange")}}のイベントハンドラからです。

+ +
navigator.mediaDevices.ondevicechange = function(event) {
+  updateDeviceList();
+}
+ +

このコードでは、ユーザがカメラ、マイク、他のメディアデバイスを接続したり、電源を入れたり、電源を切ったりする度に、updateDeviceList()を呼び出し接続されたデバイス一覧を再描画します。

+ +

結果

+ +

{{ EmbedLiveSample('Example', 600, 460) }}

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状況コメント
{{ SpecName('Media Capture', '#dom-mediadevices-ondevicechange', 'ondevicechange') }}{{ Spec2('Media Capture') }}初版
+ +

ブラウザ互換性

+ +

{{Compat("api.MediaDevices.ondevicechange")}}

+ +

関連項目

+ + diff --git a/files/ja/web/api/mediadevices/ondevicechange/index.html b/files/ja/web/api/mediadevices/ondevicechange/index.html deleted file mode 100644 index 6f63115726..0000000000 --- a/files/ja/web/api/mediadevices/ondevicechange/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: MediaDevices.ondevicechange -slug: Web/API/MediaDevices/ondevicechange -translation_of: Web/API/MediaDevices/ondevicechange ---- -

{{APIRef("Media Capture and Streams")}}

- -

MediaDevices.ondevicechangeプロパティは{{event("Event_handlers", "event handler")}}であり、{{domxref("MediaDevices")}}インスタンスで{{event("devicechange")}}が発生した時に呼び出される関数です。このイベントは、{{Glossary("user agent")}}、Webサイト、アプリケーションによって利用可能なメディアデバイスの一覧が変更された時に発生します。更新された利用可能デバイスの一覧は{{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}によっていつでも取得することができます。

- -

文法

- -
MediaDevices.ondevicechange = eventHandler;
-
- -

値

- -

{{event("devicechange")}}イベントが発生したことを示す{{domxref("Event")}}オブジェクトを入力として受け付ける関数を指定してください。このイベントオブジェクトには、変更に関する情報が含まれていませんので、更新されたデバイスの一覧を取得したい場合は、{{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}を呼び出してください。

- -

例

- -

この例では、updateDeviceList()という関数があり、この関数は{{domxref("MediaDevices.getUserMedia()")}}が成功して、ストリームを取得できた時に一度だけ呼び出され、その後デバイスの一覧に変更があった場合も複数回呼び出されます。この関数は、ブラウザウィンドウに2つの一覧を出力します。1つは、オーディオデバイスの一覧であり、もう1つはビデオデバイスの一覧です。これら2つのリストは、デバイスラベル (名前)とこのデバイスが入力か出力であるかを示すものです。この例では、{{event("devicechange")}}イベントのハンドラを設定しているので、実行中にデバイスが接続または接続を解除されるたびに一覧が更新されます。

- - - -

オーディオとビデオデバイスの一覧に使用される{{HTMLElement("ul")}}要素への参照を保持するためのグローバル変数を用意します。

- -
let audioList = document.getElementById("audioList");
-let videoList = document.getElementById("videoList");
- -

デバイス一覧 の取得と描画

- -

updateDeviceList()メソッドでは、現在のメディアデバイスの一覧を取得した後、先ほど用意したグローバル変数を用いて、表示されているオーディオとビデオのデバイス一覧を更新します。

- -
function updateDeviceList() {
-  navigator.mediaDevices.enumerateDevices()
-  .then(function(devices) {
-    audioList.innerHTML = "";
-    videoList.innerHTML = "";
-
-    devices.forEach(function(device) {
-      let elem = document.createElement("li");
-      let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);
-
-      elem.innerHTML = "<strong>" + device.label + "</strong> (" + direction + ")";
-      if (type === "audio") {
-        audioList.appendChild(elem);
-      } else if (type === "video") {
-        videoList.appendChild(elem);
-      }
-    });
-  });
-}
- -

updateDeviceList()は、{{domxref("navigator.mediaDevices")}}プロパティから参照できる{{domxref("MediaDevices")}}オブジェクトにある{{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}関数の呼び出しから構成されます。コードが実行されるのは、enumerateDevices()によって返された{{jsxref("promise")}}が完了した時です。デバイス一覧の準備ができると、完了ハンドラが呼び出されます。このデバイス一覧は、完了ハンドラの引数として{{domxref("MediaDeviceInfo")}}オブジェクトの配列で渡されます。この配列のそれぞれの要素は、1つのメディア入力デバイスまたは出力デバイスについての情報を含みます。

- -

すべてのデバイスの情報を出力するために、{{jsxref("Array.forEach", "forEach()")}}ループを使用します。それぞれのデバイスで、ユーザへこのデバイス情報を見せるために新しい{{HTMLElement("li")}}オブジェクトを作成します。

- -

let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);の行について詳しく説明します。ここでは分割代入 (ECMAScript 6の新しい機能)を使用しており、{{jsxref("String.match()")}}によって返された配列の値をkind、type、directionの変数へ代入しています。なぜこのようなことをするのかというと、{{domxref("MediaDeviceInfo.kind")}}の文字列は、"audioinput"や"videooutput"のように、メディアタイプとメディアフローの向きの2つの情報を含んでいるためです。この行で、タイプ("audio"または"video")と方向("input"と"output")を取り出すことで、リストに表示する文字列を作成することができます。

- -

太字のデバイス名と括弧で囲まれた方向を含む文字列が作成されると、デバイスタイプに基づいてaudioListまたはvideoList対応する一覧へ{{domxref("Node.appendChild", "appendChild()")}}の呼び出しによって追加されます。

- -

デバイス一覧の変更を扱う

- -

updateDeviceList()は2箇所から呼び出されます。1箇所目は{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}のpromiseの完了ハンドラであり、ストリームが開かれた時に最初に一覧を埋めます。2箇所目は{{event("devicechange")}}のイベントハンドラからです。

- -
navigator.mediaDevices.ondevicechange = function(event) {
-  updateDeviceList();
-}
- -

このコードでは、ユーザがカメラ、マイク、他のメディアデバイスを接続したり、電源を入れたり、電源を切ったりする度に、updateDeviceList()を呼び出し接続されたデバイス一覧を再描画します。

- -

結果

- -

{{ EmbedLiveSample('Example', 600, 460) }}

- -

仕様

- - - - - - - - - - - - - - - - -
仕様状況コメント
{{ SpecName('Media Capture', '#dom-mediadevices-ondevicechange', 'ondevicechange') }}{{ Spec2('Media Capture') }}初版
- -

ブラウザ互換性

- -

{{Compat("api.MediaDevices.ondevicechange")}}

- -

関連項目

- - diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 1b57d8f385..5724992b1b 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -1413,6 +1413,7 @@ /zh-CN/docs/Web/API/KeyboardEvent/which /zh-CN/docs/Web/API/UIEvent/which /zh-CN/docs/Web/API/Location.replace /zh-CN/docs/Web/API/Location/replace /zh-CN/docs/Web/API/MediaCapabilitiesInfo /zh-CN/docs/Web/API/MediaCapabilities/encodingInfo +/zh-CN/docs/Web/API/MediaDevices/ondevicechange /zh-CN/docs/conflicting/Web/API/MediaDevices/devicechange_event /zh-CN/docs/Web/API/MediaStream.addTrack /zh-CN/docs/Web/API/MediaStream/addTrack /zh-CN/docs/Web/API/MouseEvent/which /zh-CN/docs/conflicting/Web/API/UIEvent/which /zh-CN/docs/Web/API/MouseWheelEvent /zh-CN/docs/conflicting/Web/API/WheelEvent @@ -1606,6 +1607,7 @@ /zh-CN/docs/Web/API/Window/minimize /zh-CN/docs/conflicting/Web/API/Window /zh-CN/docs/Web/API/Window/mozAnimationStartTIme /zh-CN/docs/Web/API/Animation/startTime /zh-CN/docs/Web/API/Window/onappinstalled /zh-CN/docs/Web/API/Window/appinstalled_event +/zh-CN/docs/Web/API/Window/onbeforeinstallprompt /zh-CN/docs/Web/API/Window/beforeinstallprompt_event /zh-CN/docs/Web/API/Window/onbeforeunload /zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload /zh-CN/docs/Web/API/Window/ongamepadconnected /zh-CN/docs/conflicting/Web/API/Window/gamepadconnected_event /zh-CN/docs/Web/API/Window/ongamepaddisconnected /zh-CN/docs/Web/API/Window/gamepaddisconnected_event diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 79ea90a611..81df0cfbad 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -16622,12 +16622,6 @@ "c1ngular" ] }, - "Web/API/MediaDevices/ondevicechange": { - "modified": "2019-03-23T22:08:09.338Z", - "contributors": [ - "qzn928" - ] - }, "Web/API/MediaElementAudioSourceNode": { "modified": "2019-03-23T22:09:55.508Z", "contributors": [ @@ -22570,6 +22564,12 @@ "xilixinluo" ] }, + "Web/API/Window/beforeinstallprompt_event": { + "modified": "2019-03-23T22:11:25.289Z", + "contributors": [ + "xgqfrms-GitHub" + ] + }, "Web/API/Window/beforeprint_event": { "modified": "2020-10-15T21:52:38.969Z", "contributors": [ @@ -23055,12 +23055,6 @@ "charlie" ] }, - "Web/API/Window/onbeforeinstallprompt": { - "modified": "2019-03-23T22:11:25.289Z", - "contributors": [ - "xgqfrms-GitHub" - ] - }, "Web/API/Window/ondevicemotion": { "modified": "2019-03-18T21:39:10.384Z", "contributors": [ @@ -47063,6 +47057,12 @@ "sideshowbarker" ] }, + "conflicting/Web/API/MediaDevices/devicechange_event": { + "modified": "2019-03-23T22:08:09.338Z", + "contributors": [ + "qzn928" + ] + }, "conflicting/Web/API/MouseEvent/altKey": { "modified": "2019-03-24T00:16:10.184Z", "contributors": [ diff --git a/files/zh-cn/conflicting/web/api/mediadevices/devicechange_event/index.html b/files/zh-cn/conflicting/web/api/mediadevices/devicechange_event/index.html new file mode 100644 index 0000000000..125cf3adaa --- /dev/null +++ b/files/zh-cn/conflicting/web/api/mediadevices/devicechange_event/index.html @@ -0,0 +1,203 @@ +--- +title: MediaDevices.ondevicechange +slug: conflicting/Web/API/MediaDevices/devicechange_event +translation_of: Web/API/MediaDevices/ondevicechange +original_slug: Web/API/MediaDevices/ondevicechange +--- +

{{APIRef("Media Capture and Streams")}}

+ +

 MediaDevices.ondevicechange 属性是一种{{event("Event_handlers", "event handler")}}，当{{domxref("MediaDevices")}} 接口的{{event("devicechange")}}事件被触发时会被调用. 不论{{Glossary("user agent")}}媒体设备的设置是否可用, 或者网站或者应用发生变了都会触发。无论何时你都可以使用 {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}  去更新可用设备列表.

+ +

Syntax

+ +
MediaDevices.ondevicechange = eventHandler;
+
+ +

Value

+ +

A function you provide which accepts as input a {{domxref("Event")}} object describing the {{domxref("devicehange")}} event that occurred. There is no information about the change included in the event object; to get the updated list of devices, you'll have to use {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}.

+ +

Example

+ +

In this example, we create a function called updateDeviceList(), which is called once when {{domxref("MediaDevices.getUserMedia()")}} successfully obtains a stream, and then is called any time the device list changes. It displays in the browser window two lists: one of audio devices and one of video devices, with both the device's label (name) and whether it's an input or an output device. Because the example provides a handler for the {{event("devicechange")}} event, the list is refreshed any time a media device is attached to or removed from the device running the sample.

+ + + +

We set up global variables that contain references to the {{HTMLElement("ul")}} elements that are used to list the audio and video devices:

+ +
let audioList = document.getElementById("audioList");
+let videoList = document.getElementById("videoList");
+ +

Getting and drawing the device list

+ +

Now let's take a look at updateDeviceList() itself. This method is called any time we want to fetch the current list of media devices and then update the displayed lists of audo and video devices using that information.

+ +
function updateDeviceList() {
+  navigator.mediaDevices.enumerateDevices()
+  .then(function(devices) {
+    audioList.innerHTML = "";
+    videoList.innerHTML = "";
+
+    devices.forEach(function(device) {
+      let elem = document.createElement("li");
+      let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);
+
+      elem.innerHTML = "<strong>" + device.label + "</strong> (" + direction + ")";
+      if (type === "audio") {
+        audioList.appendChild(elem);
+      } else if (type === "video") {
+        videoList.appendChild(elem);
+      }
+    });
+  });
+}
+ +

updateDeviceList() consists entirely of a call to the function {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}} on the {{domxref("MediaDevices")}} object referenced in the {{domxref("navigator.mediaDevices")}} property, as well as the code that's run when the {{jsxref("promise")}} returned by enumerateDevices() is fulfilled. The fulfillment handler is called when the device list is ready. The list is passed into the fulfillment handler as an array of {{domxref("MediaDeviceInfo")}} objects, each describing one media input or output device.

+ +

A {{jsxref("Array.forEach", "forEach()")}} loop is used to scan through all the devices. For each device, we create a new {{HTMLElement("li")}} object to be used to display it to the user.

+ +

The line let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i); deserves special notice. This uses destructuring assignment (a new feature of ECMAScript 6) to assign the values of the first three items in the array returned by {{jsxref("String.match()")}} to the variables kind, type, and direction. We do this because the value of {{domxref("MediaDeviceInfo.kind")}} is a single string that includes both the media type and the direction the media flows, such as "audioinput" or "videooutput". This line, then, pulls out the type ("audio" or "video") and direction ("input" or "output") so they can be used to construct the string displayed in the list.

+ +

Once the string is assembled, containing the device's name in bold and the direction in parentheses, it's appended to the appropriate list by calling {{domxref("Node.appendChild", "appendChild()")}} on either audioList or videoList, as appropriate based on the device type.

+ +

Handling device list changes

+ +

We call updateDeviceList() in two places. The first is in the {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} promise's fulfillment handler, to initially fill out the list when the stream is opened. The second is in the event handler for {{event("devicechange")}}:

+ +
navigator.mediaDevices.ondevicechange = function(event) {
+  updateDeviceList();
+}
+ +

With this code in place, each time the user plugs in a camera, microphone, or other media device, or turns one on or off, we call updateDeviceList() to redraw the list of connected devices.

+ +

Result

+ +

{{ EmbedLiveSample('Example', 600, 460) }}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Media Capture', '#dom-mediadevices-ondevicechange', 'ondevicechange') }}{{ Spec2('Media Capture') }}Initial specification.
+ +

Browser compatibility

+ +{{Compat("api.MediaDevices.ondevicechange")}} + +

See also

+ + diff --git a/files/zh-cn/web/api/mediadevices/ondevicechange/index.html b/files/zh-cn/web/api/mediadevices/ondevicechange/index.html deleted file mode 100644 index 1bf012abf9..0000000000 --- a/files/zh-cn/web/api/mediadevices/ondevicechange/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: MediaDevices.ondevicechange -slug: Web/API/MediaDevices/ondevicechange -translation_of: Web/API/MediaDevices/ondevicechange ---- -

{{APIRef("Media Capture and Streams")}}

- -

 MediaDevices.ondevicechange 属性是一种{{event("Event_handlers", "event handler")}}，当{{domxref("MediaDevices")}} 接口的{{event("devicechange")}}事件被触发时会被调用. 不论{{Glossary("user agent")}}媒体设备的设置是否可用, 或者网站或者应用发生变了都会触发。无论何时你都可以使用 {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}  去更新可用设备列表.

- -

Syntax

- -
MediaDevices.ondevicechange = eventHandler;
-
- -

Value

- -

A function you provide which accepts as input a {{domxref("Event")}} object describing the {{domxref("devicehange")}} event that occurred. There is no information about the change included in the event object; to get the updated list of devices, you'll have to use {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}.

- -

Example

- -

In this example, we create a function called updateDeviceList(), which is called once when {{domxref("MediaDevices.getUserMedia()")}} successfully obtains a stream, and then is called any time the device list changes. It displays in the browser window two lists: one of audio devices and one of video devices, with both the device's label (name) and whether it's an input or an output device. Because the example provides a handler for the {{event("devicechange")}} event, the list is refreshed any time a media device is attached to or removed from the device running the sample.

- - - -

We set up global variables that contain references to the {{HTMLElement("ul")}} elements that are used to list the audio and video devices:

- -
let audioList = document.getElementById("audioList");
-let videoList = document.getElementById("videoList");
- -

Getting and drawing the device list

- -

Now let's take a look at updateDeviceList() itself. This method is called any time we want to fetch the current list of media devices and then update the displayed lists of audo and video devices using that information.

- -
function updateDeviceList() {
-  navigator.mediaDevices.enumerateDevices()
-  .then(function(devices) {
-    audioList.innerHTML = "";
-    videoList.innerHTML = "";
-
-    devices.forEach(function(device) {
-      let elem = document.createElement("li");
-      let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);
-
-      elem.innerHTML = "<strong>" + device.label + "</strong> (" + direction + ")";
-      if (type === "audio") {
-        audioList.appendChild(elem);
-      } else if (type === "video") {
-        videoList.appendChild(elem);
-      }
-    });
-  });
-}
- -

updateDeviceList() consists entirely of a call to the function {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}} on the {{domxref("MediaDevices")}} object referenced in the {{domxref("navigator.mediaDevices")}} property, as well as the code that's run when the {{jsxref("promise")}} returned by enumerateDevices() is fulfilled. The fulfillment handler is called when the device list is ready. The list is passed into the fulfillment handler as an array of {{domxref("MediaDeviceInfo")}} objects, each describing one media input or output device.

- -

A {{jsxref("Array.forEach", "forEach()")}} loop is used to scan through all the devices. For each device, we create a new {{HTMLElement("li")}} object to be used to display it to the user.

- -

The line let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i); deserves special notice. This uses destructuring assignment (a new feature of ECMAScript 6) to assign the values of the first three items in the array returned by {{jsxref("String.match()")}} to the variables kind, type, and direction. We do this because the value of {{domxref("MediaDeviceInfo.kind")}} is a single string that includes both the media type and the direction the media flows, such as "audioinput" or "videooutput". This line, then, pulls out the type ("audio" or "video") and direction ("input" or "output") so they can be used to construct the string displayed in the list.

- -

Once the string is assembled, containing the device's name in bold and the direction in parentheses, it's appended to the appropriate list by calling {{domxref("Node.appendChild", "appendChild()")}} on either audioList or videoList, as appropriate based on the device type.

- -

Handling device list changes

- -

We call updateDeviceList() in two places. The first is in the {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} promise's fulfillment handler, to initially fill out the list when the stream is opened. The second is in the event handler for {{event("devicechange")}}:

- -
navigator.mediaDevices.ondevicechange = function(event) {
-  updateDeviceList();
-}
- -

With this code in place, each time the user plugs in a camera, microphone, or other media device, or turns one on or off, we call updateDeviceList() to redraw the list of connected devices.

- -

Result

- -

{{ EmbedLiveSample('Example', 600, 460) }}

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('Media Capture', '#dom-mediadevices-ondevicechange', 'ondevicechange') }}{{ Spec2('Media Capture') }}Initial specification.
- -

Browser compatibility

- -{{Compat("api.MediaDevices.ondevicechange")}} - -

See also

- - diff --git a/files/zh-cn/web/api/window/beforeinstallprompt_event/index.html b/files/zh-cn/web/api/window/beforeinstallprompt_event/index.html new file mode 100644 index 0000000000..b9f089174d --- /dev/null +++ b/files/zh-cn/web/api/window/beforeinstallprompt_event/index.html @@ -0,0 +1,67 @@ +--- +title: Window.onbeforeinstallprompt +slug: Web/API/Window/beforeinstallprompt_event +tags: + - Window.onbeforeinstallprompt + - beforeinstallprompt +translation_of: Web/API/Window/onbeforeinstallprompt +original_slug: Web/API/Window/onbeforeinstallprompt +--- +

{{ ApiRef() }}

+ +

Window.onbeforeinstallprompt 属性是一个事件处理程序, 用于处理一个{{event("beforeinstallprompt")}}, 当一个Web清单存在时，它将在移动设备上发送，但是在提示用户将网站保存到主屏幕之前。

+ +

句法

+ +
window.addEventListener("beforeinstallprompt", function(event) { ... });
+
+window.onbeforeinstallprompt = function(event) { ...};
+ +

范例

+ +

The following example uses the beforeinstallprompt function to verify that it is an appropriate time to display an installation prompt to the user. If it is not, the event is redispatched.

+ +
let isTooSoon = true;
+window.addEventListener("beforeinstallprompt", function(e) {
+  if (isTooSoon) {
+    e.preventDefault(); // Prevents prompt display
+    // Prompt later instead:
+    setTimeout(function() {
+      isTooSoon = false;
+      e.prompt(); // Shows prompt
+    }, 10000);
+  }
+
+  // The event was re-dispatched in response to our request
+  // ...
+});
+ +

浏览器兼容性

+ +{{Compat("api.Window.onbeforeinstallprompt")}} + +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Manifest', '#onbeforeinstallprompt-attribute', 'Window.onbeforeinstallprompt')}}{{Spec2('Manifest')}}Initial specification.
+ +

也可以看看

+ + diff --git a/files/zh-cn/web/api/window/onbeforeinstallprompt/index.html b/files/zh-cn/web/api/window/onbeforeinstallprompt/index.html deleted file mode 100644 index 9fe0053476..0000000000 --- a/files/zh-cn/web/api/window/onbeforeinstallprompt/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Window.onbeforeinstallprompt -slug: Web/API/Window/onbeforeinstallprompt -tags: - - Window.onbeforeinstallprompt - - beforeinstallprompt -translation_of: Web/API/Window/onbeforeinstallprompt ---- -

{{ ApiRef() }}

- -

Window.onbeforeinstallprompt 属性是一个事件处理程序, 用于处理一个{{event("beforeinstallprompt")}}, 当一个Web清单存在时，它将在移动设备上发送，但是在提示用户将网站保存到主屏幕之前。

- -

句法

- -
window.addEventListener("beforeinstallprompt", function(event) { ... });
-
-window.onbeforeinstallprompt = function(event) { ...};
- -

范例

- -

The following example uses the beforeinstallprompt function to verify that it is an appropriate time to display an installation prompt to the user. If it is not, the event is redispatched.

- -
let isTooSoon = true;
-window.addEventListener("beforeinstallprompt", function(e) {
-  if (isTooSoon) {
-    e.preventDefault(); // Prevents prompt display
-    // Prompt later instead:
-    setTimeout(function() {
-      isTooSoon = false;
-      e.prompt(); // Shows prompt
-    }, 10000);
-  }
-
-  // The event was re-dispatched in response to our request
-  // ...
-});
- -

浏览器兼容性

- -{{Compat("api.Window.onbeforeinstallprompt")}} - -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Manifest', '#onbeforeinstallprompt-attribute', 'Window.onbeforeinstallprompt')}}{{Spec2('Manifest')}}Initial specification.
- -

也可以看看

- - -- cgit v1.2.3-54-g00ecf