From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/mediarecorder_api/index.html | 186 ++++++++++++++++++++++++++ 1 file changed, 186 insertions(+) create mode 100644 files/ja/web/api/mediarecorder_api/index.html (limited to 'files/ja/web/api/mediarecorder_api') diff --git a/files/ja/web/api/mediarecorder_api/index.html b/files/ja/web/api/mediarecorder_api/index.html new file mode 100644 index 0000000000..a425fc1549 --- /dev/null +++ b/files/ja/web/api/mediarecorder_api/index.html @@ -0,0 +1,186 @@ +--- +title: MediaRecorder API +slug: Web/API/MediaRecorder_API +translation_of: Web/API/MediaStream_Recording_API +--- +
+

MediaRecorder API (MediaStream Recording) はインプットデバイスからのメディアストリームを記録するための API です。記録したストリームは PCM データのエンコードと言った操作をせずに利用できます。 {{ domxref("Navigator.getUserMedia()") }} を単体で利用する際の利用が想定されています。

+
+ +

キーコンセプトと利用例

+ +

MediaRecorder を {{ domxref("Navigator.getUserMedia()") }} とともに利用することで、メディアデータを記録できます。単純には、 {{ domxref("MediaRecorder.start()") }} メソッドを呼ぶことで記録を開始できます。MediaStream の終了、もしくは {{ domxref("MediaRecorder.stop()") }} や{{ domxref("MediaRecorder.requestData()") }} の呼び出しによって記録用のデータが準備できた際には、dataavailable イベントが発生します。現在のところ、データはプラットホームの標準でエンコードされ、 dataavailableの data 属性に {{ domxref("Blob") }} として配置されます。

+ +

アプリは利用可能なエンコード方式を問い合わせ、その中から利用するものを選択することも可能です。またデータをより小さなバッファとして一定間隔で受け取ることもできます。間隔は {{ domxref("MediaRecorder.start()") }} を呼ぶ際に指定できます。

+ +
+

注意: MediaRecorder API の基本的な利用方法については MediaRecorder API の利用  をご覧ください。

+
+ +

MediaRecorder インタフェース

+ +
+
{{ domxref("MediaRecorder") }}
+
MediaRecorder API を利用してメディアデータを記録するために必要な機能を保持するオブジェクト。 MediaRecorder() コンストラクタによって作成される。
+
{{ domxref("BlobEvent") }}
+
{{ domxref("MediaRecorder") }} によって記録されたメディアデータを保持する {{ domxref("Blob") }} オブジェクトへのアクセス手段を提供する。
+
+ +

例

+ +
if (navigator.getUserMedia) {
+   console.log('getUserMedia supported.');
+   navigator.getUserMedia (
+      // constraints - only audio needed for this app
+      {
+         audio: true
+      },
+
+      // Success callback
+      function(stream) {
+           var mediaRecorder = new MediaRecorder(stream);
+
+           record.onclick = function() {
+               mediaRecorder.start();
+               console.log("recorder started");
+           }
+
+           stop.onclick = function() {
+               mediaRecorder.stop();
+               console.log("recorder stopped");
+           }
+
+           mediaRecorder.ondataavailable = function(e) {
+             console.log("data available after MediaRecorder.stop() called.");
+
+             var audio = document.createElement('audio');
+             audio.setAttribute('controls', '');
+             var audioURL = window.URL.createObjectURL(e.data);
+             audio.src = audioURL;
+           }
+      },
+
+      // Error callback
+      function(err) {
+         console.log('The following gUM error occured: ' + err);
+      }
+   );
+} else {
+   console.log('getUserMedia not supported on your browser!');
+}
+ +
+

注意: このサンプルコードはWeb Dictaphoneのデモを参考にしています。コードを簡単にする為にいくつかの行は省略されています。完全なコードは 元ソース を参照して下さい。

+
+ +

ブラウザ互換性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support +

{{ CompatChrome(47.0) }}

+ 		{{ CompatGeckoDesktop("25.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{ CompatChrome(47.0) }}{{ CompatGeckoDesktop("25.0") }}1.3{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

[1] The initial Firefox OS implementation only supported audio recording.

+ +

[2] To use {{domxref("MediaRecorder")}} in Chrome 47 and 48, enable experimental Web Platform features from the chrome://flags page.

+ +

[3] Audio recording works in Chrome 49 and above; Chrome 47 and 48 only support video recording.

+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('MediaStream Recording', '#MediaRecorderAPI')}}{{Spec2('MediaStream Recording')}}
+ +

関連項目

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