WebRTC-MediaStream API

MediaStream APIは、ローカルカメラとマイクからのメディアストリームに簡単にアクセスできるように設計されました。 _getUserMedia（）_メソッドは、ローカル入力デバイスにアクセスする主要な方法です。

APIにはいくつかのキーポイントがあります-

リアルタイムメディアストリームは、ビデオまたはオーディオの形式の_stream_オブジェクトで表されます
Webアプリケーションがストリームのフェッチを開始する前にユーザーに確認するユーザーのアクセス許可を通じてセキュリティレベルを提供します。
入力デバイスの選択は、MediaStream APIによって処理されます（たとえば、2つのカメラまたはマイクがデバイスに接続されている場合）

各MediaStreamオブジェクトには、複数のMediaStreamTrackオブジェクトが含まれます。これらは、異なる入力デバイスからのビデオとオーディオを表します。

各MediaStreamTrackオブジェクトには、いくつかのチャネル（右および左のオーディオチャネル）が含まれる場合があります。これらは、MediaStream APIによって定義される最小の部分です。

MediaStreamオブジェクトを出力するには2つの方法があります。まず、出力をビデオまたはオーディオ要素にレンダリングできます。第二に、RTCPeerConnectionオブジェクトに出力を送信し、RTCPeerConnectionオブジェクトはそれをリモートピアに送信します。

MediaStream APIを使用する

簡単なWebRTCアプリケーションを作成しましょう。画面にビデオ要素を表示し、カメラを使用する許可をユーザーに求め、ブラウザにライブビデオストリームを表示します。 _indexl_ファイルを作成する-

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "utf-8"/>
   </head>

   <body>
      <video autoplay></video>
      <script src = "client.js"></script>
   </body>

</html>

次に、_client.jsファイルを作成し、次を追加します。

function hasUserMedia() {
  //check if the browser supports the WebRTC
   return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia);
}

if (hasUserMedia()) {
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
      || navigator.mozGetUserMedia;

  //enabling video and audio channels
   navigator.getUserMedia({ video: true, audio: true }, function (stream) {
      var video = document.querySelector('video');

     //inserting our stream to the video tag
      video.src = window.URL.createObjectURL(stream);
   }, function (err) {});
} else {
   alert("WebRTC is not supported");
}

ここでは、WebRTCがサポートされているかどうかを確認する_hasUserMedia（）_関数を作成します。次に、_getUserMedia_関数にアクセスします。2番目のパラメーターは、ユーザーのデバイスからのストリームを受け入れるコールバックです。次に、パラメータで指定されたオブジェクトを表すURLを作成する_window.URL.createObjectURL_を使用して、ストリームを_video_要素に読み込みます。

ページを更新し、[許可]をクリックすると、画面に顔が表示されます。

Media Stream API

Webサーバーを使用してすべてのスクリプトを実行することを忘れないでください。 WebRTC環境チュートリアルで既にインストール済みです。

MediaStream API

プロパティ

* MediaStream.active（読み取り専用）*-MediaStreamがアクティブな場合はtrue、そうでない場合はfalseを返します。
* MediaStream.ended（読み取り専用、非推奨）*-終了した_event_がオブジェクトで発生した場合はtrueを返します。これは、ストリームが完全に読み取られたことを意味し、ストリームの終わりに達していない場合はfalseを返します。
* MediaStream.id（読み取り専用）*-オブジェクトの一意の識別子。
* MediaStream.label（読み取り専用、非推奨）*-ユーザーエージェントによって割り当てられた一意の識別子。

あなたは私のブラウザで上記のプロパティがどのように見えるかを見ることができます-

プロパティ

イベントハンドラ

MediaStream.onactive -MediaStreamオブジェクトがアクティブになったときに発生する_active_イベントのハンドラー。
MediaStream.onaddtrack -新しい_MediaStreamTrack_オブジェクトが追加されたときに発生する_addtrack_イベントのハンドラー。
* MediaStream.onended（非推奨）*-ストリーミングの終了時に発生する_ended_イベントのハンドラ。
MediaStream.oninactive -_MediaStream_オブジェクトが非アクティブになったときに起動される_inactive_イベントのハンドラー。
MediaStream.onremovetrack -_MediaStreamTrack_オブジェクトが削除されたときに発生する_removetrack_イベントのハンドラー。

方法

* MediaStream.addTrack（）*-引数として指定された_MediaStreamTrack_オブジェクトをMediaStreamに追加します。トラックがすでに追加されている場合、何も起こりません。
* MediaStream.clone（）*-新しいIDを持つMediaStreamオブジェクトのクローンを返します。
* MediaStream.getAudioTracks（）*-_MediaStream_オブジェクトからオーディオ_MediaStreamTrack_オブジェクトのリストを返します。
* MediaStream.getTrackById（）*-IDでトラックを返します。引数が空であるか、IDが見つからない場合、nullを返します。複数のトラックのIDが同じ場合、最初のトラックが返されます。
* MediaStream.getTracks（）*-_MediaStream_オブジェクトからすべての_MediaStreamTrack_オブジェクトのリストを返します。
* MediaStream.getVideoTracks（）*-_MediaStream_オブジェクトからビデオ_MediaStreamTrack_オブジェクトのリストを返します。
* MediaStream.removeTrack（）*-引数として指定された_MediaStreamTrack_オブジェクトをMediaStreamから削除します。トラックがすでに削除されている場合、何も起こりません。

上記のAPIの変更をテストするには、次のように_indexl_を変更します-

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "utf-8"/>
   </head>

   <body>
      <video autoplay></video>
      <div><button id = "btnGetAudioTracks">getAudioTracks()
         </button></div>
      <div><button id = "btnGetTrackById">getTrackById()
         </button></div>
      <div><button id = "btnGetTracks">getTracks()</button></div>
      <div><button id = "btnGetVideoTracks">getVideoTracks()
         </button></div>
      <div><button id = "btnRemoveAudioTrack">removeTrack() - audio
         </button></div>
      <div><button id = "btnRemoveVideoTrack">removeTrack() - video
         </button></div>
      <script src = "client.js"></script>
   </body>

</html>

いくつかのボタンを追加して、いくつかのMediaStream APIを試してみました。次に、新しく作成したボタンのイベントハンドラーを追加する必要があります。このように_client.js_ファイルを変更します-

var stream;

function hasUserMedia() {
  //check if the browser supports the WebRTC
   return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia);
}

if (hasUserMedia()) {
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
      || navigator.mozGetUserMedia;

  //enabling video and audio channels
   navigator.getUserMedia({ video: true, audio: true }, function (s) {
      stream = s;
      var video = document.querySelector('video');

     //inserting our stream to the video tag
      video.src = window.URL.createObjectURL(stream);
   }, function (err) {});

} else {
   alert("WebRTC is not supported");
}

btnGetAudioTracks.addEventListener("click", function(){
   console.log("getAudioTracks");
   console.log(stream.getAudioTracks());
});

btnGetTrackById.addEventListener("click", function(){
   console.log("getTrackById");
   console.log(stream.getTrackById(stream.getAudioTracks()[0].id));
});

btnGetTracks.addEventListener("click", function(){
   console.log("getTracks()");
   console.log(stream.getTracks());
});

btnGetVideoTracks.addEventListener("click", function(){
   console.log("getVideoTracks()");
   console.log(stream.getVideoTracks());
});

btnRemoveAudioTrack.addEventListener("click", function(){
   console.log("removeAudioTrack()");
   stream.removeTrack(stream.getAudioTracks()[0]);
});

btnRemoveVideoTrack.addEventListener("click", function(){
   console.log("removeVideoTrack()");
   stream.removeTrack(stream.getVideoTracks()[0]);
});

ページを更新します。 _getAudioTracks（）_ボタンをクリックしてから、_removeTrack（）-audio_ボタンをクリックします。これで、オーディオトラックが削除されます。次に、ビデオトラックに対して同じ操作を行います。

getAudioTracksをクリック

getTracks（）_ボタンをクリックすると、すべての_MediaStreamTracks（接続されているすべてのビデオおよびオーディオ入力）が表示されます。次に、_getTrackById（）_をクリックして、オーディオMediaStreamTrackを取得します。

getTrackByIdをクリック

概要

この章では、MediaStream APIを使用して簡単なWebRTCアプリケーションを作成しました。これで、WebRTCを機能させるさまざまなMediaStream APIの概要が明確になりました。

Webrtc-media-stream-apis

目次

WebRTC-MediaStream API

MediaStream APIを使用する

MediaStream API

プロパティ

イベントハンドラ

方法

概要