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 をよろしくお願いいたします。

以下もご興味があるかもしれません: