HTML、CSS、JavaScript を使用してシンプルなスクリーン レコーダーを構築する

このプロジェクトは、外部ライブラリに依存せず、HTML、CSS、JavaScript を使用して構築されたシンプルなスクリーン レコーダーを示します。 音声とともに画面アクティビティをキャプチャし、短い画面録画を作成するための基本的かつ機能的なソリューションを提供します。その機能とコード構造を見てみましょう。

機能:

レコーダーを使用すると、ユーザーはブラウザ内で画面と音声を直接キャプチャできます。 記録ボタンをクリックすると、ユーザーは記録領域 (ブラウザ タブ、アプリケーション ウィンドウ、または画面全体) を選択します。 録画の前にカウントダウンが行われ、結果として得られる WebM ビデオをダウンロードできます。

コード構造:

プロジェクトは 3 つの主要なファイルで構成されています:

• index.html: ビデオ プレビュー エリア、録画ボタン、ダウンロード リンクを備えたユーザー インターフェイス (UI) を提供します。
• style.css: UI 要素のスタイルを設定し、さまざまな画面サイズでの応答性を確保します。
• script.js: 画面キャプチャ、音声録音、ビデオ処理のためのコア JavaScript ロジックが含まれています。

HTML (index.html): HTML は、録画を表示するビデオ要素や制御用のボタンなどの基本構造を設定します。

CSS (style.css): CSS はページ要素のスタイルを設定し、クリーンで応答性の高いレイアウトを作成します。主なスタイルは次のとおりです:

• 一貫したスタイルのためのグローバル リセット。
• メインコンテンツを中央に配置します。
• 全画面のカウントダウン オーバーレイ。
• ビデオ要素のレスポンシブ スケーリング。
• ボタンとリンクのスタイル。
• モバイル応答性のためのメディア クエリ。 (例: @media (max-width: 768px))

JavaScript (script.js): JavaScript コードはコア機能を処理します:

1. イベント リスナー: 記録ボタンのイベント リスナーは、startScreenCapturing 関数をトリガーします。
2. メディア キャプチャ: startScreenCapturing 関数は、navigator.mediaDevices.getDisplayMedia を使用して画面をキャプチャし、navigator.mediaDevices.getUserMedia を音声入力に使用します。 オーディオのキャプチャが失敗した場合のエラー処理が含まれています。
3. 録音: recordStream 関数は、MediaRecorder を使用して、結合されたオーディオ ストリームとビデオ ストリームを録音します。 カウントダウン タイマーは、setTimeout.
を使用して実装されます。
4. ダウンロード: 記録が停止すると、Blob オブジェクトが作成され、ユーザーが記録を保存できるようにダウンロード リンクが更新されます。

よくある質問 (FAQ):

• オーディオ キャプチャ: システム オーディオ キャプチャはブラウザのサポートとセキュリティ ポリシーに依存します。
• トラブルシューティング: 画面録画が失敗する場合は、ブラウザと navigator.mediaDevices.getDisplayMedia の互換性を確認してください。
• ビデオ形式: ビデオは WebM 形式で保存されます。
• オーディオ品質: スクリプトではエコー キャンセルとノイズ抑制が使用されていますが、外部マイクを使用すると品質が向上する可能性があります。
• 一時停止機能: 現在、録画の一時停止はサポートされていません。
• ファイル サイズ: ファイル サイズは、録音の長さと品質によって異なります。

長所と短所:

Pros	Cons
Lightweight, no external libraries	Limited to modern browsers
Simple implementation	No advanced editing features
Video and audio recording	Audio may not work on all devices/browsers
WebM format download	May require format conversion for sharing
Responsive design	No real-time preview during recording

この簡潔な概要では、スクリーン レコーダーの機能と基礎となるコード構造を明確に理解できます。 このプロジェクトは、ブラウザベースの画面録画について学ぶための良い出発点として役立ちます。

以上がHTML、CSS、JavaScript を使用してシンプルなスクリーン レコーダーを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。