I.はじめに
1.コア技術
- ウェブリアルタイム通信：ウェブインスタントメッセージングは、ブラウザのAPIでリアルタイムの音声やビデオ通話を可能にします
- キャンバス：グラフィックス、アイコン、およびその他の視覚的な画像を描画するために使用できるHTML5の新しい要素
オーディオキャプチャでの基本的な考え方
- カメラ：画像やビデオをキャプチャします
- マイク：コレクトの音声データ
- フレームレート：第二の画像取得時間。フレームレートが高いほど、よりスムーズと流体
- レール：参照マルチメディアの概念、データは、MP4オーディオトラック、ビデオトラックと、各トラックの独立しているが、それぞれ記憶されています
- フロー：それはコンテナとして理解することができます。WebRTCでは、メディア・ストリームは、ストリーム（MediaStreamの）データストリーム（でDataStream）に分割することができます。
- 解像度：2K、1080P、720Pおよび他の、より明確に、より多くの帯域幅
オーディオおよびビデオ機器の3基本原則
-
オーディオデバイス
自然音声入力装置は、主データを音声取得、およびデータ取得は、デジタル信号にアナログオーディオ信号である、
データは、量子化符号化、およびオーディオデバイスが行うべき作業であるデジタル信号に最終的にオープン集め。
人間の聴覚の周波数範囲は20Hzから20kHzの〜、デュオの8kHzの日常の音声通信との間にあります。
高品質、高忠実度を追求するために、音声入力装置は、40kHzの中で無傷の原信号に対してサンプリングレートを設定する必要があります -
ビデオデバイス
と、物理光カメラレンズを通して、それはすなわち、光学センサ、光は、デジタル信号に変換され、すなわち、RGBデータは、RGBデータを取得し、その後DSPを通じて、映像機器（A / D）モジュールのアナログからデジタルへの変換を通過します24ビットトゥルーカラー画像まで、自動拡張、ホワイトバランス、彩度、等の最適化処理、
ナイキストの定理定理と呼ばれるコレクションを使用してアナログからデジタルへの変換：
サンプリングレートは、元の信号内の情報の整合性を保持するサンプリング後の信号における2倍を超える最高周波数、デジタル信号であるアナログ/デジタル信号を行う変換処理、。
話は安いです、コードは次の例では、カメラの許可に同意を要求します実行することを、次のステップは、瞬間の奇跡を目撃することです！
第二に、例えば、
1.実施例1 - カメラの電源を入れます
これは、写真撮影の中核機能である、後にメークアップするために使用することができ、スクイズにきび、髪の仕上げ
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> <title>打开摄像头</title> </head> <body> <h1>打开摄像头</h1> <video autoplay playsinline></video> </body> </html> <script> const mediaStreamContrains = { video: { frameRate: {min: 20}, width: {min: 640, ideal: 1280}, height: {min: 360, ideal: 720}, aspectRatio: 16 / 9 }, audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true } }; const localVideo = document.querySelector('video'); function gotLocalMediaStream(mediaStream) { localVideo.srcObject = mediaStream; } function handleLocalMediaStreamError(error) { console.log('navigator.getUserMedia error: ', error); } navigator.mediaDevices.getUserMedia(mediaStreamContrains).then( gotLocalMediaStream ).catch( handleLocalMediaStreamError ); </script>結果は以下のとおりであります
示例2-拍照保存
这里展示了两个按钮，拍照和保存，yes，就是自拍的核心功能！
<html>
<head>
<meta charset="UTF-8"> <title>拍照一分钟，P图两小时</title> </head> <body> <section> <div> <video autoplay playsinline id="player"></video> </div> </section> <section> <div> <button id="snapshot">拍照</button> <button id="download">下载</button> </div> <div> <canvas id="picture"></canvas> </div> </section> </body> </html> <script> 'use strict'; var videoplay = document.querySelector('video#player'); function gotMediaStream(stream) { window.stream = stream; videoplay.srcObject = stream; } function handleError(err) { console.log('getUserMedia error:', err); } function start() { var constraints = { video: { width: 1280, height: 720, frameRate: 15, facingMode: 'enviroment' }, audio: false } navigator.mediaDevices.getUserMedia(constraints) .then(gotMediaStream) .catch(handleError); } //拍照 var snapshot = document.querySelector('button#snapshot'); snapshot.onclick = function () { var picture = document.querySelector('canvas#picture'); picture.width = 1280; picture.height = 720; picture.getContext('2d').drawImage(videoplay, 0, 0, picture.width, picture.height); }; //下载 function downLoad(url) { var oA = document.createElement("a"); oA.download = 'photo';// 设置下载的文件名，默认是'下载' oA.href = url; document.body.appendChild(oA); oA.click(); oA.remove(); // 下载之后把创建的元素删除 } document.querySelector("button#download").onclick = function () { downLoad(picture.toDataURL("image/jpeg")); }; start(); </script>运行结果如下
就是这么简单！
重点方法和参数解释
-
1.方法：avigator.mediaDevices.getUserMedia(constraints);
返回一个promise对象，调用成功，可以通过promise对象获取MediaStream对象， - 2.参数：mediaStreamContrains
传入的constraints参数类型为 MediaStreamConstraints，可以指定 MediaStream 中包含哪些类型的媒体轨（音频轨、视频轨），并且可为这些媒体轨设置一些限制。