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の位置を絶対的に設定する方法についての簡単な説明

推薦する

CentOS 7 で rpm パッケージを使用して MySQL 5.7.18 をインストールする

最近、MySQL を使っています。Linux での mysql-installation という記事...

HTMLベースの複数画像アップロードのプレビュー機能を実装

最近、Web ページに複数の画像をアップロードするためのスクリプトを作成しました。これは非常に実用的...

Vue で手ぶれ補正を実装するためのサンプルコード

手ぶれ防止: 繰り返しのクリックによるイベントのトリガーを防止まず、揺れとは何でしょうか? 震えるの...

vue+element テーブルで動的な列フィルタリングを実装するためのサンプルコード

要件: データをリスト形式で表示する場合、表示すべき情報項目が多く、表が横に長くなってしまいます。表...

CSS のフローティング サンプル コードをクリアする方法

概要この記事のフレームワーク図は次のとおりです。 1. フローティングとは一体何でしょうか? W3s...

jQueryはhide()とtoggle()関数を使用してカメラブランド表示の非表示機能を実現します。

最近、jQuery を学習しているときに、show()、hide()、toggle() 関数に出会い...

Windows 7 で MySQL 8.0.16 をインストールして使用する場合、パスワードの変更と Navicat への接続に関する問題が発生する

MySQL のインストール時にいくつかの問題が発生しました。オンラインで見つけた回答は似たようなもの...

LinuxシステムにTomcatをインストールし、サービスの起動とシャットダウンを構成する

Linuxシステムでサービスの起動とシャットダウンを構成する1. コマンドcd /etc/init....

Reactコンポーネントのライフサイクル機能についての簡単な説明

React コンポーネントのライフサイクル機能とは何ですか?ライフサイクル関数は、ES6 構文クラス...

Vueはシンプルなスライダー検証を実装する

この記事の例では、Vueスライダー検証の実装を共有しています。コードは次のとおりです。 <テン...

CSS と JavaScript を使用して管理ダッシュボードのレイアウトを構築するためのサンプル コード

あなたが作成するものこの新しいチュートリアルでは、CSS と JavaScript を使用して、レス...

InnoDB がトランザクション分離レベルを巧みに実装する方法

序文前回の記事「MySQL ロック メカニズムの詳細説明」では、InnoDB のロック メカニズムに...

js+ca​​nvas でコードレイン効果を実現

この記事では、js+ca​​nvasコードの雨効果の具体的なコードを参考までに共有します。具体的な内...

Docker ベースの Redis 1 マスター、2 スレーブ、3 センチネルの実装

現在、Redis とコンテナについて学習中なので、Docker を使用して Redis マスタースレ...

Ubuntu 18.04 Linux システムに JDK と Mysql をインストールする方法

プラットフォームの展開1. JDKをインストールするステップ1. OracleJDKをダウンロードす...