JavaScript MediaRecorder API を使用してビデオおよびオーディオ レコーダーを作成するにはどうすればよいですか?

このチュートリアルでは、JavaScript MediaRecorder API を使用してオーディオおよびビデオ レコーダーを作成する方法を学習します。したがって、これは WebRTC を使用して実行できます。

WebRTC とは何ですか?

WebRTCはリアルタイムコミュニケーションの略称です。ユーザーのデバイスで利用可能な Web カメラとマイク デバイスにアクセスしてキャプチャできます。

ECMAScript オブジェクトを使用してユーザー デバイスの Web カメラとマイクにアクセスできます

リーリー

したがって、getUserMedia 関数はデフォルトで、Web カメラを使用するためのユーザーの許可を求めます。この関数は promise を返します。[OK] をクリックして同意すると、関数がトリガーされてシステムの Web カメラが有効になります。それ以外の場合は、許可しない場合は、キャッチ メソッドも有効になります。ウェブカメラから外します。

関数 getUserMedia() 関数にパラメータを渡すこともできます。これは、特定の幅または高さの画像が必要な場合に似ています。

フロントエンド設計

フロントエンド部分には次の要素が含まれます -

ビデオ の場合、録画画面には - のような要素が含まれます。

• ビデオメディア画面を表示するビデオ要素

• [スタート]ボタンでビデオ録画が開始されます

• [停止] ボタンをクリックすると、ビデオ録画ストリームが停止します。

オーディオ

録音の場合、ボタンが 2 つあります

スタートボタンで録音が開始されます
[停止] ボタンをクリックすると、オーディオ録音ストリームが停止します。
フォント Awesome CDN を追加して開始ボタンと停止ボタンのアイコンを追加し、ページをより魅力的にするために要素に CSS スタイルを追加します。

HTMLコード

＃＃＃例＃＃＃ リーリー

「

Start Video

」ボタンをクリックすると

start_video_Recording()

関数が呼び出され、「Stop」ボタンをクリックすると stop_Recording () 関数が呼び出されます。具体的には、オーディオの場合、開始ボタンをクリックすると関数 start_audio_Recording() がトリガーされ、停止ボタンの場合は関数 stop_Recording() が呼び出されます。 start_video_Recording() 関数 ビデオを開始して録画する関数を定義しましょう。

リーリー

開始ボタンが押されると、上記の関数が呼び出され、WebRTC カメラとマイクのメソッドがトリガーされて録画許可を取得し、録画停止ボタンが有効になり、録画開始ボタンが無効になります。

停止ボタンが押されると、stop() 関数が呼び出され、すべてのメディア ストリーミング トラックが停止します。

次に、メディア ストリームを記録するために、メディア レコーダー インスタンスを作成し、メディア ストリームとメディアをグローバルに並べ替えます。ビデオを停止するとメディア ストリーミングが停止し、ビデオ要素を作成すると新しいビデオ要素が作成され、記録されたメディア データが保存されます。

同様に、

start_audio_Recording()

関数も

start_video_Recording()

関数に似ていますが、いくつかの変更が必要です。 stop_Recording() 関数 次に、記録を停止する関数を定義しましょう。

リーリー

この関数は、メディア ストリームに保存されているすべてのメディア トラックを停止します。

＃＃＃例＃＃＃

上記の関数を HTML コードに追加して、ビデオとオーディオの録音機能を実装しましょう。

リーリー

出力からわかるように、ビデオ開始ボタンをクリックすると、start_video_Recording() 関数が呼び出され、その関数で navigator.mediaDevices.getUserMedia() メソッドが呼び出され、ビデオを検索するための権限メニューが開きます。そしてマイクの許可。メディア ストリームを解析するという Promise を返します。オーディオまたはビデオのメディア ストリームを受信した後、メディア レコーダーのインスタンスを作成し、上記のコード内の関数 medRec.start() を呼び出して録音を開始します。

これで、WebRTC を使用してビデオとオーディオの録音を作成する完全なプロセスを理解できるようになります。

以上がJavaScript MediaRecorder API を使用してビデオおよびオーディオ レコーダーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。