目次
序文
今日の記事では、WebRTCキャプチャ端末に基づく非常にシンプルなビデオプレビュープレーヤーを紹介します。
テキスト
ローカルプレビュービデオプレーヤーを実行する必要があるため、最初にカメラを開き、プレーヤーのコントロールボタンを表示し、最後に写真の撮影、写真の保存、ステッカー、ビデオエフェクトなどの補助機能を追加する必要があります。次に、あるリンクの動作を詳しく見ていきましょう。デモンストレーション効果を確実にするために、小さなパートナーはクロームブラウザを使用することをお勧めします。
1.カメラとマイクの電源を入れます
WebRTCの3つの主要なインターフェイスの1つのgetUserMediaメソッドを使用して、カメラを開くことができます。詳細については、次のコードを参照してください。
let getUserMedia=(navigator.getUserMedia ||navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
getUserMedia.call(navigator,{
video:true
},function(localMediaStream){
let video =document.getElementById('video1');
video.srcObject = localMediaStream;
},function(e) {
console.log("error: ",e);
});通常の状況では、クロムブラウザは左上隅に認証プロンプトボックスをポップアップします。この時点で「許可」を選択します。
承認後、ブラウザがカメラを開きます。このとき、次の図に示すように、ローカルビデオプレビュー画面が表示されます。
もちろん、「audio = true」を設定して、getUserMediaメソッドを呼び出すときにローカルマイクをオンにするように要求することもできます。
2.ブロードキャスト制御ボタンを追加します
カメラの電源を入れた後、ローカルビデオをプレビューできますが、カメラとスピーカーをどのように操作しますか？カメラとスピーカーを制御する場合は、ビデオタグの別のプロパティ設定であるcontrolsパラメーターを設定する必要があります。特定の使用法は、次のコードを参照できます。
<video id="video1" style="width: 400px; height: 300px" autoplay controls playsinline></video>設定後、プレーヤーを再起動すると、次の図に示すように、ビデオプレビュー画面にさらに多くのプレーヤーコントロールボタンがあることがわかります。
これらのコントロールボタンを使用して、ローカルビデオ画面の再生と一時停止の操作、スピーカーの切り替え、全画面の開始とキャンセル、およびピクチャーインピクチャー機能を開くことができます。
3.ローカルプレビューと写真
ローカルカメラ機能を実現するために、現在のビデオフレームをキャプチャするために使用する「写真」ボタンを追加し、下の図に示すように、ビデオプレビューウィンドウの下に静止画像表示ウィンドウを追加します。注：上部はアクティビティです。下ののビデオウィンドウは、写真効果を示すウィンドウです。
カメラ画面のサイズも幅400px、高さ300pxに設定されています。キーコードリファレンスは次のとおりです。
let photo = document.querySelector("canvas#photo");
photo.width = 400;
photo.height = 300;
let video =document.getElementById('video1');
photo.getContext("2d").drawImage(video, 0, 0, photo.width, photo.height);4.プレビュー写真を保存します
観察しやすいように、ビデオ画面と写真の表示位置を調整し、水平に配置します。注：左側がアクティブなビデオウィンドウ、右側が静止画ウィンドウです。写真を保存するためのボタンを追加します。キーコードは次のとおりです。
let canvas = document.querySelector("canvas");
let a = document.createElement("a");
a.download = "photo";
a.href = canvas.toDataURL("image/jpeg");
document.body.appendChild(a);
a.click();
a.remove();
「保存」ボタンをクリックすると、写真がローカルにダウンロードされたことがわかります。画像の保存パスを見つけて画像を開くと、表示効果は次の図のようになります。
保存された写真は問題なく、完璧であることを意味します。
5.テクスチャ効果を表示（カバー）
次に、凡例の表紙であるビデオプレビュー画面にテクスチャ効果を追加しましょう。どのように操作すればよいですか？ここでは、ビデオタグの別の属性ポスターを使用してこの効果を実現できます。あらかじめ用意しておいた1024.jpgのテーマ画像を指定のディレクトリに置き、ポスターを使って引用します。
具体的なコードリファレンスは次のとおりです。
<video id="video1" style="width: 400px; height: 300px" autoplay controls playsinline poster="1024.jpg"></video>テクスチャの効果を次の図に示します。
6.ビデオプレビューエフェクト（複数のエフェクト）
ビデオエフェクトと元のビデオのコントラストを高めるために、元のビデオウィンドウの横にプレーヤープレビューウィンドウを追加します。左側が元のビデオウィンドウ、右側が特殊効果のビデオウィンドウです。特殊効果の表示効果は、主に-webkit-filterフィルターを介して実現されます。具体的な特殊効果は次のとおりです。
6.1露出効果
6.2中断された3次元効果
6.3マイクロダーマブレーション効果
6.4反転カラー効果
（GIFを作成しましょう。そうしないと、静止画を扱っているといつも思います）
結論として
さて、ここで基本的に冒頭で述べたローカルビデオプレビュープレーヤーを完成させましたが、それはとてもシンプルでとても眩しいですか？さて、手遅れです。今日はここでやめましょう。午前1時ですが、まだこの記事に急いでいます。ソースコードのアドレスは後でコメント欄に投稿します。デモプロジェクトとして、興味のある学生は自分でDIYできます。おやすみなさい、2020年10月24日の午前1時。*ハッピープログラマーズデー*