---
lang: ja
path: cookbook/javascript-sdk/canvas-to-localstream
labels: クックブック/JavaScript SDK/Canvas映像の利用
metaTitle: Canvas映像の利用 | JavaScript SDK｜ クックブック ｜ SkyWay（スカイウェイ）
---

# Canvas映像の利用

JavaScript SDKにおいて、Canvas要素からLocalStreamを作成する方法について説明します。

以下のコードで、Canvas要素に描画されている画像を元にLocalStreamを作成できます。

```html
<canvas id="source-canvas"></canvas>
```

```javascript=
const sourceCanvas = document.getElementById('source-canvas');
const sourceCanvasStream = sourceCanvas.captureStream(30); // 30fpsでキャプチャ
const sourceCanvasVideoTrack = sourceCanvasStream.getVideoTracks()[0];

const localStream = new LocalVideoStream(sourceCanvasVideoTrack);
```

`captureStream()` メソッドの引数には、キャプチャするフレームレートを指定できます。
`captureStream()` メソッドの詳細な挙動については、APIリファレンスを参照してください。

- APIリファレンス
  - [HTMLCanvasElement: captureStream() メソッド - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/captureStream)
  - [@skyway-sdk/room MediaStreamTrack から AudioStream / VideoStream を作成する](https://javascript-sdk.api-reference.skyway.ntt.com/room/index.html#md:mediastreamtrack-%E3%81%8B%E3%82%89-audiostream--videostream-%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B)