JavaScript MediaRecorder API を使用してビデオおよびオーディオレコーダーを作成するにはどうすればよいですか?-jsチュートリアル-php.cn

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

WBOY

リリース： 2023-09-13 23:57:02

転載

1366 人が閲覧しました

如何使用 JavaScript MediaRecorder API 创建视频和音频录制器？

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

WebRTC とは何ですか?

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

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

リーリー

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

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

フロントエンド設計

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

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

ビデオメディア画面を表示するビデオ要素
[スタート]ボタンでビデオ録画が開始されます
[停止] ボタンをクリックすると、ビデオ録画ストリームが停止します。

オーディオ

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

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() を呼び出して録音を開始します。