フロントエンドはhtml5とffmpegを利用して画面録画やカメラなどの機能を実現

背景紹介

** 関係するテクノロジー: vue、electron、ffmpeg、node **
画面録画とビデオ録画の 2 つの方法を比較

HTML5 APIを使用して
カメラを実現する: mediaDevices (デバイスの取得) + getUserMedia (ストリームの取得) + MediaRecorder (ストレージ)
画面録画: getDisplayMedia (ストリームの取得) + MediaRecorder (ストレージ)
ffmpeg + ノード: FFmpeg はオーディオおよびビデオ処理のための非常に強力なオープンソースツールのセットですが、あまり紹介されていません。Electron はノードとクロムに基づいており、ノード API とほぼすべてのノードモジュールを使用できます。 cmdコマンドを呼び出してffmpegを操作して画面録画やビデオ録画を実現できます。もちろん、ffmpegの機能はこれに限定されません

HTML5の実装

メディアデバイス

システムで利用可能なマルチメディア入出力デバイスに関する情報を収集するために使用されます。
メソッド呼び出しはデバイスリストを正常に返し、devceID を持つ MediaStreamConstraints オブジェクトを渡して、ストリーミングメディアソースを取得するデバイスを指定できます。

navigator.mediaDevices.enumerateDevices().then(devicelist => {
    // audiooutput 扬声器
    // audioinput  麦克风
    // audiooutput 摄像
    console.log(devicelist)
  }).catch(err => console.log(err))

ユーザーメディアの取得

ユーザーはハードウェアデバイスメディア (カメラ、ビデオ、オーディオ、地理的位置など) にアクセスするためのインターフェイスを提供し、開発者はこのインターフェイスに基づいて、ブラウザプラグインに依存せずにハードウェアメディアデバイスにアクセスできます。
このメソッドはビデオストリームを返し、取得したストリームをvideoタグに割り当てることで録画しながらの視聴を実現します。

navigator.mediaDevices.getUserMedia(MediaStreamConstraints).then(stream => {
    videoElement.srcObject = stream; // 
  }, error => console.log(error));

ディスプレイメディアの取得

ユーザーのディスプレイまたはその一部をメディアストリームのソースとして使用します。これにより、ユーザーのディスプレイまたはその一部をビデオストリームとしてキャプチャできるようになります。
画面録画は主にこのメソッドに依存します。このメソッドは getUserMedia のような Promise オブジェクトを返し、呼び出しが成功した場合はストリームを返し、このストリームを録画中に視聴するビデオ要素に割り当てます。
** 注意すべき点 ** Web 側の Google でこの要素を使用している場合は、chrome://flags/ で実験的な Web プラットフォームの機能を有効にする必要があります。

Electron はノード + chromium をベースに構築されていますが、electron にdesktopCapturer モジュールを導入し、このモジュールに基づいてこのメソッドを使用する必要があります。

navigator.mediaDevices.getDisplayMedia({ video: true })
  .then(stream => {
    videoElement.srcObject = stream;
  }, error => console.log(error));

メディアレコーダー

メディア、つまりビデオとオーディオを記録およびキャプチャします。
getDisplayMedia および getUserMedia によって取得されたストリームは、MediaRecorder を使用して保存する必要があり、ファイルとして保存できます。

let herf
this.recorder = new MediaRecorder(stream);
this.recorder.ondataavailable = e => { 
  herf = e.data;
  download.href = URL.createObjectURL(herf);
};
this.recorder.start();

2番目はffmpegを使用します

公式ウェブサイトインストールパッケージのダウンロード ffmpeg.zeranoe.com/builds/

いくつかの基本的なパラメータ

-formats 利用可能なすべての形式を出力します。
-f fmt は形式 (オーディオまたはビデオ形式) を指定します。
-i filename は入力ファイル名を指定します。もちろん Linux: 0.0 (画面録画) またはカメラでも指定できます。 -y
既存のファイルを上書きします
- t 継続時間レコード継続時間は t です。
-fs limit_size ファイルサイズの上限を設定します。
-itsoffset time_off 時間オフセット (秒) を設定します。このオプションは、後続のすべての入力ファイルに影響します。このオフセットは入力ファイルのタイムスタンプに追加され、正のオフセットを定義すると、対応するストリームがオフセット秒だけ遅れることを意味します。[-]hh:mm:ss* [.xxx] 形式はオーディオもサポートします
-ab ビットレートオーディオビットレートを設定します
-ar freq オーディオサンプリングレートを
設定します -ac チャンネルチャンネルを設定しますデフォルトは 1 ビデオです
-b ビットレートビットレートを設定します、欠落しています保存 200kb /s
-r fps フレームレートのデフォルトを 25 に設定します。
-s size フレームサイズの形式を WXH のデフォルト 160X128 に設定します。次の略語も直接使用できます:

画面録画関連コマンド

列出可用的设备包括音频和摄像等等
ffmpeg -list_devices true -f dshow -i dummy

录屏，你也可以加入关于视频的一些基本参数来获得你想要的文件
ffmpeg -f gdigrab -i desktop captrue.mkv -y

ノード呼び出し

bin フォルダーに cd した後、画面録画関連のコマンドを実行します。

記録の停止については、ffmpeg は Q キーを押すことで記録を停止できますが、コード呼び出しを通じて cmd コマンドラインが表示されず、記録プロセス中にプロセスが占有されてコマンドを入力できないため、ここでは 1 つの方法しか考えていません。プロセスを強制停止する

参考記事
MDNdeveloper.mozilla.org/zh-CN/docs/…developer.mozilla.org/en-US/docs/…developer.mozilla.org/zh-CN/docs/…W3C w3c.github.io/mediacaptur _ _ _ ...原文のフロントエンドはhtml5とffmpegを使用して画面録画やカメラナゲットなどの機能を実現しています

★記事末尾の名刺では、オーディオ・ビデオ開発学習教材（FFmpeg、webRTC、rtmp、hls、rtsp、ffplay、srs）やオーディオ・ビデオ学習ロードマップ等を無料で受け取ることができます。

下記参照！