2020ブラウザで動画をトリミングして軽く編集できるツールを作りたくて色々調査していくとMediaRecorderというAPIでCanvasをまるまる録画して動画データに変換できることを知りました。MDNCanvasにマウスで線を引く様子を録画するCanvas上にマウスで線を引く様子を動画ファイルに変換するサンプルを作りました。Canvasを録画するサンプルMediaRecorderの使い方Canvasのstreamをコンストラクタに入れます。オプションとしてmimetypeを設定することができます。});ブラウザがサポートしているmimetypeはMediaRecorder.isTypeSupportedで調べることができます。MDNrecorder.startで録画開始します。recorder.start();recorder.stopで録画終了します。recorder.stop();データが使用可能になるときのイベントがMediaRecorder.ondataavailableです。これによりBlobデータが使用可能になります。});}Canvasにマウスで線を引くマウスでドラッグして点を描画していくだけです。これと言って特別なことはしていません。contextを取得します。false;mousedownのタイミングでdrawingフラグをtrueにします。true;});drawingがtrueの間、mausemoveでCanvas上に四角形を描画していきます。}});mouseupのタイミングで描画を終了します。false;});MediaRecorderを応用したいvideoタグやaudioタグのstreamも記録できるのでビデオを変換することもできます。対応しているmimetypeが少ないんじゃないかなと思っています。次はMediaRecorderを応用して複数の動画を結合させるサンプルを作ってみたいです。kwst.site.。