@@ -15,41 +15,67 @@ pnpm add github:romot-co/webcodecs-encoder
1515
1616## 使用例
1717
18+ ### 基本的な使用法
19+
1820``` typescript
19- import { WebCodecsEncoder } from ' webcodecs-encoder' ;
21+ import { encode , encodeStream , canEncode } from ' webcodecs-encoder' ;
2022
2123// WebCodecs対応チェック
22- if (! WebCodecsEncoder .isSupported ()) {
24+ const isSupported = await canEncode ({
25+ video: { codec: ' avc1.42001f' }, // H.264
26+ audio: { codec: ' mp4a.40.2' } // AAC
27+ });
28+
29+ if (! isSupported ) {
2330 console .error (' WebCodecsがサポートされていません' );
2431 return ;
2532}
2633
27- // エンコーダー設定
28- const config = {
34+ // フレーム配列をエンコード(MP4形式)
35+ const frames = [canvas1 , canvas2 , canvas3 ]; // Canvas要素の配列
36+ const mp4Data = await encode (frames , {
37+ width: 1280 ,
38+ height: 720 ,
39+ quality: ' medium' ,
40+ container: ' mp4' ,
41+ frameRate: 30
42+ });
43+
44+ // エンコード結果をファイルとして保存
45+ const blob = new Blob ([mp4Data ], { type: ' video/mp4' });
46+ const url = URL .createObjectURL (blob );
47+ ```
48+
49+ ### ストリーミングエンコード
50+
51+ ``` typescript
52+ import { encodeStream } from ' webcodecs-encoder' ;
53+
54+ // ストリーミング形式でエンコード(WebM形式)
55+ const stream = await encodeStream ({
2956 width: 1280 ,
3057 height: 720 ,
31- frameRate: 30 ,
32- videoBitrate: 2_000_000 ,
33- audioBitrate: 128_000 ,
34- sampleRate: 48000 ,
35- channels: 2 ,
36- };
37-
38- // エンコーダー初期化と使用
39- const encoder = new WebCodecsEncoder (config );
40- await encoder .initialize ();
41-
42- // フレーム追加やエンコード処理
58+ quality: ' high' ,
59+ container: ' webm' ,
60+ frameRate: 30
61+ });
62+
63+ // フレームを順次追加
64+ stream .addFrame (canvas1 );
65+ stream .addFrame (canvas2 );
4366// ...
4467
45- const result = await encoder .finalize ();
68+ // エンコード完了
69+ const webmData = await stream .finalize ();
4670```
4771
4872## 動作要件
4973
50- - Node.js 18.0.0以上
51- - WebCodecs API対応ブラウザ
52- - Web Workers対応
74+ - ** ブラウザ環境** : Chrome 94+, Edge 94+, Firefox (実験的サポート)
75+ - ** WebCodecs API対応ブラウザ**
76+ - ** Web Workers対応**
77+
78+ > ** 注意** : WebCodecs APIはブラウザ専用技術です。Node.js環境では動作しません。
5379
5480## ライセンス
5581
0 commit comments