Kaisei Yoneyama
Screen Recorder

Screen Recorder

Screen Capture API と MediaStream Recording API を使用した画面収録アプリです。

3年前
デモを見るソースコード
技術スタック
Screen Capture API
MediaStream Recording API
Vanilla JS
Bootstrap 5

ブラウザーで動作する画面収録アプリです。

制作背景

アドベントカレンダーに参加するためのネタとして、興味があった Screen Capture API と MediaStream Recording API を利用して作成しました。

Screen Capture API と MediaStream Recording API を組み合わせることで、ブラウザーで完結できる収録機能を実現しています。

主な機能

  • Screen Capture API による画面/ウィンドウ/タブを選択してのキャプチャ
  • MediaStream Recording API を使用した画面収録
  • 収録の停止/一時停止/再開
  • 収録画面のプレビュー
  • 収録データのダウンロード
  • 解像度/フレームレート/サンプルレートの設定

関連記事

N予備校プログラミングコース Advent Calendar 2022 に投稿した記事：