2020ブラウザで動画をトリミングして軽く編集できるツールを作りたくて色々調査していくとMediaRecorderというAPIでCanvasをまるまる録画して動画データに変換できることを知りました。Canvas上にマウスで線を引く様子を動画ファイルに変換するサンプルを作りました。Canvasのstreamをコンストラクタに入れます。オプションとしてmimetypeを設定することができます。調べることができます。開発環境を構築してみました。最終的なソースコードはこちらに置きました。モジュールバンドラにはParcelを使います。TypeScriptとWebGLが動く環境が欲しかったのでWebpackを使うまでもないかなと思いParcelを使いました。読み込むようにします。出力されるだけのTypeScriptです。2019フロントエンドカンファレンス福岡行ってきました。発表者の方々、運営の方々おつかれさまでした。良い刺激になりました。聞いた発表の雑多なメモのまとめです。雑多なので正確性は保証できません。パフォーマンスのメトリクスの種類と計測方法の紹介。将来的に実装されるAPIなども紹介。コマンドが便利だったので備忘録。