まず、録画ボタンと再生タグを含む 内容は以下のとおりです。 <!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の位置を絶対的に設定する方法についての簡単な説明
最近、MySQL を使っています。Linux での mysql-installation という記事...
最近、Web ページに複数の画像をアップロードするためのスクリプトを作成しました。これは非常に実用的...
手ぶれ防止: 繰り返しのクリックによるイベントのトリガーを防止まず、揺れとは何でしょうか? 震えるの...
要件: データをリスト形式で表示する場合、表示すべき情報項目が多く、表が横に長くなってしまいます。表...
概要この記事のフレームワーク図は次のとおりです。 1. フローティングとは一体何でしょうか? W3s...
最近、jQuery を学習しているときに、show()、hide()、toggle() 関数に出会い...
MySQL のインストール時にいくつかの問題が発生しました。オンラインで見つけた回答は似たようなもの...
Linuxシステムでサービスの起動とシャットダウンを構成する1. コマンドcd /etc/init....
React コンポーネントのライフサイクル機能とは何ですか?ライフサイクル関数は、ES6 構文クラス...
この記事の例では、Vueスライダー検証の実装を共有しています。コードは次のとおりです。 <テン...
あなたが作成するものこの新しいチュートリアルでは、CSS と JavaScript を使用して、レス...
序文前回の記事「MySQL ロック メカニズムの詳細説明」では、InnoDB のロック メカニズムに...
この記事では、js+canvasコードの雨効果の具体的なコードを参考までに共有します。具体的な内...
現在、Redis とコンテナについて学習中なので、Docker を使用して Redis マスタースレ...
プラットフォームの展開1. JDKをインストールするステップ1. OracleJDKをダウンロードす...