JSで画面録画機能を作成する

JSで画面録画機能を作成する

OBS studioかっこいいですが、 JavaScriptもっとかっこいいです。では、 JavaScriptで独自の画面録画機能を作ってみましょう。

まず、録画ボタンと再生タグを含むHTMLファイルを作成します。

内容は以下のとおりです。

<!DOCTYPE html> 
<html> 
  <ヘッド> 
    <title>パーセルサンドボックス</title> 
    <メタ文字セット="UTF-8" /> 
  </head> 
  <本文> 
    <video class="video" width="600px" コントロール></video> 
    <button class="record-btn">記録</button> 
 
    <script src="./index.js"></script> 
  </本文> 
</html> 

次にindex.jsを作成します。

ボタンのクリック音を聞きます:

btn = document.querySelector(".record-btn"); とします。 
 
btn.addEventListener("クリック", 関数() { 
  コンソールにログ出力します。 
}); 

ブラウザでhtmlファイルを開き、ボタンをクリックします。コンソールにhelloと表示されているのが確認できます。

次に、印刷を削除して次のものに置き換えます。

btn = document.querySelector(".record-btn"); とします。 
 
btn.addEventListener("クリック", 非同期関数() { 
  ストリームを待機します navigator.mediaDevices.getDisplayMedia({ 
    ビデオ: 本当 
  }); 
}); 

ボタンをクリックすると、画面選択ボックスがポップアップ表示されます。

現在 2 つの画面を使用しているため、2 つのオプションが表示されます。

ここで、画面を選択して「共有」をクリックすると録画が開始されると思われるかもしれません。いいえ、これは私たちが考えているよりも複雑です。 MediaRecorderを使用してビデオを録画します。

btn = document.querySelector(".record-btn") とします。 
 
btn.addEventListener("クリック", 非同期関数() { 
  ストリームを待機します navigator.mediaDevices.getDisplayMedia({ 
    ビデオ: 本当 
  }) 
 
  // より良いブラウザサポートが必要 const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")  
             ? "ビデオ/webm; コーデック=vp9"  
             : 「ビデオ/webm」 
    mediaRecorder = new MediaRecorder(stream, { 
        mimeタイプ: mime 
    }) 
    //mediaRecorder.start() を手動で開始する必要があります 
}) 

画面が記録されると、 mediaRecorder変数に保存する必要があるデータのチャンクを提供します。

btn = document.querySelector(".record-btn") とします。 
 
btn.addEventListener("クリック", 非同期関数() { 
  ストリームを待機します navigator.mediaDevices.getDisplayMedia({ 
    ビデオ: 本当 
  }) 
 
  // より良いブラウザサポートが必要 const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")  
             ? "ビデオ/webm; コーデック=vp9"  
             : 「ビデオ/webm」 
    mediaRecorder = new MediaRecorder(stream, { 
        mimeタイプ: mime 
    }) 
 
    チャンクを [] にする 
    mediaRecorder.addEventListener('dataavailable', 関数(e) { 
        チャンク.push(e.data) 
    }) 
 
    //mediaRecorder.start() を手動で開始する必要があります 
}) 

ここで、共有停止ボタンをクリックすると、 video要素で録画されたビデオが再生されます。次のように実行できます。

btn = document.querySelector(".record-btn") とします。 
 
btn.addEventListener("クリック", 非同期関数() { 
  ストリームを待機します navigator.mediaDevices.getDisplayMedia({ 
    ビデオ: 本当 
  }) 
 
  // より良いブラウザサポートが必要 const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")  
             ? "ビデオ/webm; コーデック=vp9"  
             : 「ビデオ/webm」 
    mediaRecorder = new MediaRecorder(stream, { 
        mimeタイプ: mime 
    }) 
 
    チャンクを [] にする 
    mediaRecorder.addEventListener('dataavailable', 関数(e) { 
        チャンク.push(e.data) 
    }) 
 
     mediaRecorder.addEventListener('stop', 関数(){ 
          blob = new Blob(チャンク, { 
              タイプ: チャンク[0].type 
          }) 
 
          ビデオを document.querySelector(".video") とします。 
          ビデオ.src = URL.createObjectURL(blob) 
      }) 
 
 
    //mediaRecorder.start() を手動で開始する必要があります 
}) 

これで基本的な部分は完成し、録画した動画を自動的にダウンロードするなど、さらに磨きをかけることができます。

次の操作を実行できます:

btn = document.querySelector(".record-btn") とします。 
 
btn.addEventListener("クリック", 非同期関数() { 
  ストリームを待機します navigator.mediaDevices.getDisplayMedia({ 
    ビデオ: 本当 
  }) 
 
  // より良いブラウザサポートが必要 const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")  
             ? "ビデオ/webm; コーデック=vp9"  
             : 「ビデオ/webm」 
    mediaRecorder = new MediaRecorder(stream, { 
        mimeタイプ: mime 
    }) 
 
    チャンクを [] にする 
    mediaRecorder.addEventListener('dataavailable', 関数(e) { 
        チャンク.push(e.data) 
    }) 
 
   mediaRecorder.addEventListener('stop', 関数(){ 
      blob = new Blob(チャンク, { 
          タイプ: チャンク[0].type 
      }) 
      url = URL.createObjectURL(blob) とします。 
 
      ビデオを document.querySelector("ビデオ") とします。 
      video.src = URL 
 
      a = document.createElement('a') とします。 
      a.href = URL 
      a.download = 'video.webm' 
      クリック() 
  }) 
 
 
    //mediaRecorder.start() を手動で開始する必要があります 
}) 

さて、最も基本的な録音機能は完成しましたので、試してみましょう!!

JS を使って画面録画機能を作る方法についての記事はこれで終わりです。JS を使って画面録画機能を作る方法についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 任意の長さの配列を作成または埋めるための JS のヒントの要約

<<:  Discuz! フォーラムに設定オプションを追加する方法

>>:  親要素を基準にCSSの位置を絶対的に設定する方法についての簡単な説明

推薦する

MySQLデータベースのスケジュールバックアップを実装する方法

1. シェルスクリプトを作成する vim バックアップdb.sh 次のようにスクリプトを作成します。...

Vueでミックスインを使用する方法

目次序文使い方要約する序文Vue にはコードの再利用に使われる mixins という設定項目がありま...

特定の MySQL テーブルの完全データと増分データをメッセージ キューに同期する - ソリューション

目次1. 当初の需要2. 解決策3. 運河の導入と設置運河の仕組み建築インストール4. 検証1. 当...

ネイティブJavaScriptでカルーセルを実装する

この記事では、JavaScriptでカルーセルを実装するための具体的なコードを参考までに紹介します。...

iframe でページを開く方法

解決:リンクのターゲット属性値をターゲット フレームワーク名と同じに設定するだけです。具体的な手順:...

MySQL エラー 1290 (HY000) の解決方法

私は長い間問題に取り組み、文法上の問題を何度も確認しました。しかし、後でネットで調べてみたら、突然理...

大きな太陽の天気アイコンを純粋な CSS で記述する方法の例

効果効果図は以下のとおりです実装のアイデアDivは太陽の長方形の光と影を実現します前の疑似要素は、既...

純粋な HTML+CSS でオリンピック リングを実装するためのサンプル コード

レンダリング コード - 青と黄色のリングを例に挙げます <div class="コ...

9999px に別れを告げる新しい CSS 画像置換テクニック (背景表示と画面外へのテキストの移動)

-9999 ピクセルの画像置換技術は、ここ 10 年近く人気があります。テキスト要素を画像に置き換え...

HTMLエリアタグの詳しい説明

<area> タグは、イメージ マップ内の領域を定義します (注: イメージ マップはク...

MySQL 変数の原理と応用例

MySQL ドキュメントでは、MySQL 変数はシステム変数とユーザー変数の 2 つのカテゴリに分類...

CSS3 マウスホバー遷移ズーム効果

以下は、純粋な CSS で記述された画像マウスホバーズーム効果です。実際、基本原理は非常に単純です。...

PHP クラスにおける static と self の違いの簡単な分析

メソッドが定義されているクラスに応じて、現在のクラスへの静的参照を取得するには、self:: または...

mysqld_multi を使用して単一のマシンに複数のインスタンスをデプロイする方法に関する MySQL チュートリアル

目次1. MySQLのコンパイルとインストール: 2. 最初のマルチインスタンス3307を準備する3...