まず、録画ボタンと再生タグを含む 内容は以下のとおりです。 <!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> 次に ボタンのクリック音を聞きます: btn = document.querySelector(".record-btn"); とします。 btn.addEventListener("クリック", 関数() { コンソールにログ出力します。 }); ブラウザで 次に、印刷を削除して次のものに置き換えます。 btn = document.querySelector(".record-btn"); とします。 btn.addEventListener("クリック", 非同期関数() { ストリームを待機します navigator.mediaDevices.getDisplayMedia({ ビデオ: 本当 }); }); ボタンをクリックすると、画面選択ボックスがポップアップ表示されます。 現在 2 つの画面を使用しているため、2 つのオプションが表示されます。 ここで、画面を選択して「共有」をクリックすると録画が開始されると思われるかもしれません。いいえ、これは私たちが考えているよりも複雑です。 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() を手動で開始する必要があります }) 画面が記録されると、 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() を手動で開始する必要があります }) ここで、共有停止ボタンをクリックすると、 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Discuz! フォーラムに設定オプションを追加する方法
>>: 親要素を基準にCSSの位置を絶対的に設定する方法についての簡単な説明
1. シェルスクリプトを作成する vim バックアップdb.sh 次のようにスクリプトを作成します。...
目次序文使い方要約する序文Vue にはコードの再利用に使われる mixins という設定項目がありま...
目次1. 当初の需要2. 解決策3. 運河の導入と設置運河の仕組み建築インストール4. 検証1. 当...
この記事では、JavaScriptでカルーセルを実装するための具体的なコードを参考までに紹介します。...
解決:リンクのターゲット属性値をターゲット フレームワーク名と同じに設定するだけです。具体的な手順:...
私は長い間問題に取り組み、文法上の問題を何度も確認しました。しかし、後でネットで調べてみたら、突然理...
効果効果図は以下のとおりです実装のアイデアDivは太陽の長方形の光と影を実現します前の疑似要素は、既...
レンダリング コード - 青と黄色のリングを例に挙げます <div class="コ...
-9999 ピクセルの画像置換技術は、ここ 10 年近く人気があります。テキスト要素を画像に置き換え...
<area> タグは、イメージ マップ内の領域を定義します (注: イメージ マップはク...
MySQL ドキュメントでは、MySQL 変数はシステム変数とユーザー変数の 2 つのカテゴリに分類...
以下は、純粋な CSS で記述された画像マウスホバーズーム効果です。実際、基本原理は非常に単純です。...
メソッドが定義されているクラスに応じて、現在のクラスへの静的参照を取得するには、self:: または...
コードをコピーコードは次のとおりです。 <div contenteditable="...
目次1. MySQLのコンパイルとインストール: 2. 最初のマルチインスタンス3307を準備する3...