WebRTC初心者の調べ物

この記事では、プログラマーでない人が、WebRTC (Web Real-Time Communication)について初めて学んでメモ書きしています（下記のユーザーから音声データを取得するを写し書きして理解しようとしているだけになってしまいました。）。
今回やりたいことは、Webアプリで人の声を録音する所まで。

調べたら、人の声を録音するにはWebRTCを使うらしい。調べると（自分には）複雑だったので、メモをしておこうと思った。

参考：

ユーザーから音声データを取得する
https://developers.google.com/web/fundamentals/media/recording-audio?hl=ja

WebRTC API
https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API
https://developer.mozilla.org/ja/docs/Glossary/WebRTC

WebRTCとは

WebRTC (Web Real-Time Communication)はビデオチャット、音声通話、P2Pファイル共有を行うWebアプリで使われるAPI

Web Audio API

Web Audio API はシンプルな API であり、入力ソースを取得すると、それを音声データを処理（ゲインの調整など）できるノードに接続し、最終的にはユーザーが音声を聞くことができるようにスピーカーに接続します。

3つの要素がある

• getUserMedia

デバイスのカメラやマイクへのアクセスを許可し、RTC接続に信号を送る。
この APIを使用すると、マイクに直接アクセスできる。
アクセスが許可されると、API によって、カメラまたはマイクからのデータが含まれる Stream が返される。
このストリームは 要素や Web Audio の AudioContext にアタッチしたり、MediaRecorder API を使用して保存したりできる。
マイクからデータを取得するために、getUserMedia() API に渡す constraints オブジェクトで audio: true を指定

• RTCPeerConnection

ビデオチャットまたは音声通話を構成する

• RTCDataChannels

ブラウザ間のP2Pのデータ経路を構成する

• P2Pとは（https://www.nic.ad.jp/ja/basics/terms/p2p.html）
  peer-to-peerの略です。 インターネットにおいて一般的に用いられるクライアント・サーバ型モデルでは、 データを保持し提供するサーバとそれに対してデータを要求・ アクセスするクライアントという2つの立場が固定されているのに対し、 P2Pは各ピア(*1)がデータを保持し、 他のピアに対して対等にデータの提供および要求・ アクセスを行う自律分散型のネットワークモデルであり、 サーバまたはクライアントのそれぞれの立場に固定されることがありません。

録音済みのファイルをユーザーに要求するとき

<input type="file" accept="audio/*" capture="microphone">

マイクにインタラクティブにアクセスする

マイクへのアクセス権を取得
最新のブラウザはマイクに直接アクセスできる

<audio id="player" controls></audio>
<script>  
  var player = document.getElementById('player');

  var handleSuccess = function(stream) {
    if (window.URL) {
      player.src = window.URL.createObjectURL(stream);
    } else {
      player.src = stream;
    }
  };

//アクセス権？オーディオのみtrue
//.then
  navigator.mediaDevices.getUserMedia({ audio: true, video: false })
      .then(handleSuccess)
</script>

thenとは、、

バッファに保持されたデータはマイクの未加工データ

• データをサーバーに直接アップロードする
• データをローカルで保存する
• WAV などの専用のファイル形式に変換してから、サーバーまたはローカルで保存する

マイクのデータを保存する最も簡単な方法は、MediaRecorder API を使用すること

<a id="download">Download
<button id="stop">Stop
<script> 
  let shouldStop = false;
  let stopped = false;
  const downloadLink = document.getElementById('download');
  const stopButton = document.getElementById('stop');

  stopButton.addEventListener('click', function() {
    shouldStop = true;
  })

  var handleSuccess = function(stream) {  
    const options = {mimeType: 'video/webm;codecs=vp9'};
    const recordedChunks = [];
    const mediaRecorder = new MediaRecorder(stream,options);

    mediaRecorder.addEventListener('dataavailable',function(e){
      if(e.data.size > 0){
      recordChunks.push(e.data);
      }
      if(shouldStop === true && stopped === false){
        mediaRecorder.stop();
        stopped = true;
      }
    });

    mediaRecorder.addEventListener('stop',function(){
      downloadLink.href = URL.createObjectURL(new Blob(recordedChunks));
      downloadLink.download = 'acetest.wav';
    });

    mediaRecorder.start();
    };

    navigator.mediaDevives.getUserMedia({audio: true,video:false}).then(hardleSuccess);

</script>