blob: 16b2e9492a00c1d7d4a4f9b481062784d28ba745 (
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
132
|
---
title: HTMLCanvasElement.captureStream()
slug: Web/API/HTMLCanvasElement/captureStream
tags:
- Canvas
- Experimental
- HTMLCanvasElement
- Interface
- Media
- Media Capture DOM Elements
- Method
- Reference
- Web
translation_of: Web/API/HTMLCanvasElement/captureStream
---
<div>{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}</div>
<p><code><strong>HTMLCanvasElement</strong></code><strong><code>.captureStream()</code></strong> メソッドは、canvas の前面をリアルタイムにキャプチャした動画を {{domxref("CanvasCaptureMediaStream")}} として返すメソッドです。</p>
<h2 id="構文">構文</h2>
<pre class="syntaxbox"><var>MediaStream</var> = <var>canvas</var>.captureStream(<var>frameRate</var>);
</pre>
<h3 id="引数">引数</h3>
<dl>
<dt><code>frameRate</code> {{optional_inline}}</dt>
<dd>キャプチャする際のフレームレートを倍精度浮動小数点数で指定します。指定しなかった場合、canvas が変化するたびにフレームが新しくキャプチャされます。0 を指定した場合、フレームが 1 枚だけキャプチャされます。</dd>
</dl>
<h3 id="戻り値">戻り値</h3>
<p>{{domxref("MediaStream")}} オブジェクトへの参照を返します。</p>
<h2 id="使用例">使用例</h2>
<pre class="brush: js">// キャプチャしたい canvas 要素を取得
var canvasElt = document.querySelector('canvas');
// ストリームの取得
var stream = canvasElt.captureStream(25); // 25 FPS
// 取得したストリームに対して何らかの処理を行う
// 例：RTCPeerConnection を使って別のコンピュータに送信
// ここで pc は既に生成された RTCPeerConnection オブジェクト
pc.addStream(stream);
</pre>
<h2 id="仕様">仕様</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">策定状況</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('Media Capture DOM Elements', '#widl-HTMLCanvasElement-captureStream-CanvasCaptureMediaStream-double-frameRate', 'HTMLCanvasElement.captureStream()')}}</td>
<td>{{Spec2('Media Capture DOM Elements')}}</td>
<td>初期定義</td>
</tr>
</tbody>
</table>
<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>機能</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>基本サポート</td>
<td>{{CompatChrome(51.0)}}</td>
<td>{{CompatGeckoDesktop(43)}}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatOpera(36.0)}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>機能</th>
<th>Android</th>
<th>Android Webview</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>基本サポート</td>
<td>{{CompatNo}}</td>
<td>{{CompatChrome(51.0)}}</td>
<td>{{CompatChrome(51.0)}}</td>
<td>{{CompatGeckoMobile(43)}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatOpera(38)}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Firefox 41 / 42 では機能がデフォルトで無効となっています。 有効にする場合<code>は canvas.capturestream.enabled</code> の設定項目を <code>true</code> に変更してください。</p>
<h2 id="関連情報">関連情報</h2>
<ul>
<li>{{domxref("CanvasCaptureMediaStream")}} - 戻り値のインターフェイス</li>
<li>{{domxref("HTMLMediaElement.captureStream()")}} - media 要素からストリームをキャプチャするメソッド</li>
<li>{{domxref("MediaStream")}}</li>
<li>{{domxref("Media Capture and Streams API")}}</li>
</ul>
|
