blob: ed658b728c07773135bbd5513f228dfc7ea87e13 (
plain)
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
|
---
title: Media Capture and Streams API (Media Streams)
slug: Web/API/Media_Streams_API
tags:
- API
- Advanced
- Audio
- Guide
- Introduction
- Media
- Media Capture and Streams API
- Media Streams API
- NeedsContent
- Video
translation_of: Web/API/Media_Streams_API
---
<div>{{DefaultAPISidebar("Media Capture and Streams")}}</div>
<p><strong>Media Capture and Streams</strong> APIは一般的に<em>Media Stream API</em>や<em>Stream API</em>と呼ばれる<a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a>に関連したAPIです。このAPIでは、オーディオやビデオデータのストリーム、これらを操作するためのメソッド、データタイプに関連づけられた制約、データを非同期に利用する際の成功と失敗のコールバック、これらの処理を行なっている最中に発生するイベントなどをサポートします。</p>
<h2 id="基本概念">基本概念</h2>
<p>このAPIは、オーディオまたはビデオに関連づけられたデータの流れを表現するための{{domxref("MediaStream")}}オブジェクトの操作を基本としています。例として<a href="/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video" title="/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video">Get the video</a>(英語)をご覧ください。</p>
<p><code>MediaStream</code>は0個以上の{{domxref("MediaStreamTrack")}}によって構成されます。<code>MediaStreamTrack</code>は様々なオーディオやビデオの<strong>トラック</strong>を表現します。それぞれの<code>MediaStreamTrack</code>は、1つ以上の<strong>チャンネル</strong>を持ちます。このチャンネルはメディアストリームの最小の単位を表現します。例えば、ステレオのオーディオトラックの<em>left</em>と<em>right</em>のチャンネルのそれぞれのように、与えられたスピーカーに関連づけられたオーディオ信号です。</p>
<p><code>MediaStream</code>オブジェクトは、1つの<strong>入力</strong>と1つの<strong>出力</strong>を持ちます。<code>MediaStream</code>オブジェクトは、ローカルで呼び出される{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}によって生成され、ユーザーのカメラやマイクの1つを入力ソースとして持ちます。ローカルでない<code>MediaStream</code>は、{{HTMLElement("video")}}や{{HTMLElement("audio")}}などのメディア要素や、WebRTC {{domxref("RTCPeerConnection")}} APIによって取得できるネットワーク越しに生成されたストリーム、<a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> {{domxref("MediaStreamAudioSourceNode")}}によって作成されたストリームとして表現されます。<code>MediaStream</code>オブジェクトの出力は<strong>コンシューマ</strong>(consumer)に接続されます。出力として{{HTMLElement("audio")}}や{{HTMLElement("video")}}などのメディア要素、WebRTC {{domxref("RTCPeerConnection")}} API、<a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> {{domxref("MediaStreamAudioDestinationNode")}}が使用できます。</p>
<p> </p>
<h2 id="リファレンス">リファレンス</h2>
<div class="index">
<ul>
<li>{{event("addtrack")}} (event)</li>
<li>{{domxref("AudioStreamTrack")}}</li>
<li>{{domxref("BlobEvent")}}</li>
<li>{{event("ended")}} (event)</li>
<li>{{domxref("MediaStream")}}</li>
<li>{{domxref("MediaStreamConstraints")}}</li>
<li>{{domxref("MediaStreamEvent")}}</li>
<li>{{domxref("MediaStreamTrack")}}</li>
<li>{{domxref("MediaStreamTrackEvent")}}</li>
<li>{{domxref("MediaTrackCapabilities")}}</li>
<li>{{domxref("MediaTrackConstraints")}}</li>
<li>{{domxref("MediaTrackSettings")}}</li>
<li>{{domxref("MediaTrackSupportedConstraints")}}</li>
<li>{{event("muted")}} (event)</li>
<li>{{domxref("NavigatorUserMedia")}}</li>
<li>{{domxref("NavigatorUserMediaError")}}</li>
<li>{{event("overconstrained")}} (event)</li>
<li>{{event("removetrack")}} (event)</li>
<li>{{event("started")}} (event)</li>
<li>{{event("unmuted")}} (event)</li>
<li>{{domxref("URL")}}</li>
<li>{{domxref("VideoStreamTrack")}}</li>
</ul>
</div>
<h2 id="ガイドとチュートリアル">ガイドとチュートリアル</h2>
<p>{{LandingPageListSubpages}}</p>
<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>Edge</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>Nightly 18{{ property_prefix("moz") }} </td>
<td>{{ CompatVersionUnknown }}</td>
<td>{{ CompatUnknown }} </td>
<td>12</td>
<td>11</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</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>{{CompatVersionUnknown}}</td>
<td>{{ CompatUnknown }}</td>
<td>{{ CompatUnknown }} </td>
<td>{{ CompatNo }} </td>
<td>11.2</td>
</tr>
</tbody>
</table>
</div>
<p>現在、ChromeとOpera、Firefox Nightly 18でカメラへアクセスするためにWebRTCを用いることができます。Firefox NightlyでWebRTCを有効にするには、次の設定でフラグを有効にする必要があります。</p>
<ul>
<li>アドレスバーに"about:config"を入力して、変更を許可してください。</li>
<li>"media.navigator.enabled"の項目を探して、trueを設定してください。</li>
</ul>
<h2 id="関連項目">関連項目</h2>
<ul>
<li><a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> - APIの入門ページ</li>
<li>{{domxref("mediaDevices.getUserMedia()")}}</li>
<li><a href="/en-US/docs/WebRTC/taking_webcam_photos">Taking webcam photos</a>: <code>getUserMedia()</code>を用いたデモとチュートリアル</li>
</ul>
|
