미디어 서버 독립 WebRTC 플레이어

12257 단어 webrtcopensourcejavascript
WebRTC의 원래 초점은 화상 회의에 있었지만 지연 시간이 매우 짧은 실시간 브로드캐스트 또는 스트리밍에도 사용할 수 있습니다( DASH-IF WebRTC report ). 그러나 이러한 맥락에서 WebRTC를 사용하는 채택률은 느리고 그 이유 중 하나는 수집(제작자) 및 재생(뷰어)을 위한 표준 프로토콜이 부족하기 때문입니다.

수집 측은 WHIP 호환 발신자 소프트웨어에서 WHIP 호환 미디어 서버로 미디어를 보낼 수 있도록 하는 초안 IETF 표준WHIP에 의해 처리되고 있습니다. WHIP는 WebRTC 기반 콘텐츠를 스트리밍 서비스 및/또는 CDN으로 수집할 수 있는 간단한 HTTP 기반 프로토콜을 제안합니다.

재생 측면에서 논의 중인 표준화 이니셔티브가 있지만 WHIP를 사용한 수집 측면만큼 진행되지는 않았습니다. WebRTC 미디어 서버는 WebRTC 플레이어를 제공하지만 종종 특정 WebRTC 미디어 서버에 연결됩니다.

이러한 맥락에서 미디어 서버(브로드캐스터)와 플레이어 간의 SDP 교환에 대한 공통 표준(전송 방법)에 아직 도달하지 않았기 때문에 media 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>


그리고 자바스크립트(타입스크립트) 코드.

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
  }
}

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는 원격 SDP로 응답하는 미디어 서버에 대한 HTTP POST와 함께 전송됩니다.

기여



미디어 서버에 대한 지원을 포함하고 싶거나 일반적으로 기여하고 싶다면 this project에 대한 풀 요청에 매우 만족합니다. 프로젝트에 어댑터를 추가하려면 먼저 위에서 설명한 것과 동일한 방식으로 어댑터를 생성하고 저장소의 adapters 폴더에 포함합니다. 그런 다음 고유한 문자열을 공장 함수와 함께 adapters/factory.ts의 어댑터 목록에 추가하십시오.

관련 오픈 소스 프로젝트


  • Client and Server modules for WebRTC HTTP Ingestion Protocol
  • Super simple Webcast application based on WHIP

    • 아이빈 테크놀로지 소개



    Eyevinn Technology는 비디오 및 스트리밍을 전문으로 하는 독립 컨설턴트 회사입니다. 플랫폼이나 기술 공급업체와 상업적으로 연결되어 있지 않은 방식으로 독립적입니다.

    Eyevinn에서 모든 소프트웨어 개발자 컨설턴트는 오픈 소스 개발 및 오픈 소스 커뮤니티에 대한 기여를 위해 예약된 전용 예산을 가지고 있습니다. 이것은 우리에게 혁신, 팀 구성 및 개인 역량 개발을 위한 여지를 제공합니다. 또한 회사로서 오픈 소스 커뮤니티에 다시 기여할 수 있는 방법을 제공합니다.

    Eyevinn에 대해 더 알고 싶고 여기서 일하는 방법을 알고 싶습니다. [email protected] 로 연락주세요!
    0부터 시작하는 PHP ~Laravel 게시판에 메일 주소&패스워드 인증 기능을 붙인다~
    NestJS의 Telegram 봇에서 무작위 농담을 생성하기 위한 모듈 생성

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage