メディアサーバーとは


WebRTCのオリジナルフォーカスは、ビデオ会議では、また、リアルタイムの放送やストリーミングのために使用することができます超低レイテンシDASH-IF WebRTC report ). しかし、この文脈でwebrtcを使用するための採用率は遅くなりました、そして、理由のうちの1つはingest(プロデューサー)と再生(ビューアー)のための標準的なプロトコルの欠如です.
Ingeside側は草案IETF規格によって対処されていますWHIP WHIP準拠の送信ソフトウェアからメディアをWHIP準拠メディアサーバに送ることができます.WHIPは、Webベースのコンテンツのストリーミングサービスや/またはCDNを可能にする簡単なHTTPベースのプロトコルを提案します.
再生側では、議論の標準化のイニシアチブがありますが、鞭で最も外側に進んでいません.webrtcメディアサーバはwebrtcプレーヤーを提供するが,それらはしばしば特定のwebrtcメディアサーバに結び付けられる.
我々がまだメディアサーバー(ブロードキャスター)とプレーヤーの間のSDP交換のために一般的な標準(輸送方法)に達していないので、我々はAmedia server independent WebRTC player .

あなたがいずれかの付属のもののいずれかを使用したり、独自のカスタムアダプタを構築することができますメディアサーバーアダプタを持つプレーヤー.我々は、メディアサーバーアダプタの形でこのプロジェクトに貢献を歓迎し、このブログの記事を使用してアダプタを追加する方法をご案内します

使い方


あなただけの付属のアダプタのいずれかを使用してwebrtcプレーヤーを使用する場合は、以下のHTMLとJavaScriptはあなたに例を与える.
<html>
  <head><script type="module" src="index.ts"></script></head>
  <body>
    <video autoplay muted controls>
    <button id="play">Play</button>
  </body>
</html>
とJavaScript ( TypeScript )コード.
import { WebRTCPlayer, ListAvailableAdapters } from "@eyevinn/webrtc-player";

const video = document.querySelector("video");
const iceServers = [{ urls: "stun:stun.l.google.com:19302" }];
document.querySelector<HTMLButtonElement>("#play").addEventListener("click", async () => {
  const channelUrl = "<media-server-url-to-channel>";
  const player = new WebRTCPlayer({ 
    video: video,
    type: "se.eyevinn.webrtc",
    iceServers: iceServers 
  });
  await player.load(new URL(channelUrl));
});
se.eyevinn.webrtc 付属のアダプタを使用するEyevinn WebRTC WHIP-broadcaster . 利用可能なアダプタのリストを得るには、次のようにします.
ListAvailableAdapters().forEach(adapterType => {
  console.log(adapterType);
}

カスタムアダプタを開発する


あなたがこのwebrtcプレーヤーを使用するならば、あなた自身のメディア・サーバーでカスタムアダプターを開発することができて、その代わりにその使用をすることができます.プレイヤーのインスタンスを作成すると、AdapterFactoryFunction ベースクラスを拡張するアダプターの新しいインスタンスを返すBaseAdapter .
const player = new WebRTCPlayer({
  video: video, 
  type: "custom", 
  adapterFactory: (peer: RTCPeerConnection, channelUrl: URL) => {
    return new CustomAdapter(peer, channelUrl);
  }
});
セットtype === "custom" コンストラクタのファクトリ関数.以下のカスタムアダプタ用のテンプレート.
import { BaseAdapter } from "@eyevinn/webrtc-player";

class CustomAdapter extends BaseAdapter {
  constructor(peer: RTCPeerConnection, channelUrl: URL) {
    super(peer, channelUrl);
  }

  // Overload SDP exchange method
  async exchangeSdp() {
    // do stuff here
  }
}
The exchangeSdp() 関数は、SDPを交換するメディアサーバ特有の方法を実装する場所です.例えば、
async exchangeSdp() {
  const response = await fetch(this.channelUrl.href, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ sdp: this.localPeer.localDescription.sdp })
  });
  if (response.ok) {
    const { sdp } = await response.json();
    this.localPeer.setRemoteDescription({ type: "answer", sdp: sdp });
  }
}
上の例では、ローカルのSDPはHTTPサーバでHTTPサーバで送られます.

貢献


あなたのメディアサーバのサポートを含めるか、一般的に貢献したい場合は、我々は非常にプル要求に満足しているthis project . アダプターをプロジェクトに最初に追加するには、先に説明したのと同じ方法でアダプターを作成するだけでなく、adapters フォルダ.次に、あなたのユニークな文字列をadapters/factory.ts 一緒に工場機能.

関連オープンソースプロジェクト

  • Client and Server modules for WebRTC HTTP Ingestion Protocol
  • Super simple Webcast application based on WHIP
  • アバウトテクノロジーについて


    Eyevinn技術は、ビデオとストリーミングに特化した独立したコンサルタント会社です.我々が商業的にどんなプラットホームまたはテクノロジーベンダーにも縛られない方法で独立してください.
    Eyeevinでは、すべてのソフトウェア開発者のコンサルタントは、オープンソースの開発とオープンソースコミュニティへの貢献のための専用予算を予約しています.これは、革新、チームビルディングと個人的な能力開発の余地を我々に与えます.また、オープンソースコミュニティに貢献する方法として私たちを与える.
    eyevinnについての詳細を知りたいとどのようにここで動作するようにします.お問い合わせ[email protected] !