Technical WebRTC

[WebRTC] 왜 WebRTC에는 adapter.js가 필요한가

이 글은  https://bloggeek.me/webrtc-adapter-js/ 를 번역한 내용입니다개인적인 견해가 들어가 있습니다.

먼저 본문에 들어가기에 앞서 요약을 먼저 해드립니다.
WebRTC는 현재 1.0 버전이며, 각 브라우저별로 조금씩 다른 소스코드를 가지고 있습니다. ( 본문에서는 이걸 방언이라고 표현합니다 )
이 조금씩 다른 소르르 하나의 표준 소스로 합쳐주는 것이 adapter.js 입니다.

  1. Voip와 WebRTC의 차이

Voip는 여러개의 벤더들이 있습니다. 그래서 한 벤더의 Voip 구현방법을 알고 있어도, 다른 벤더의 Voip 구현방법을 알수는 없습니다.WebRTC는 다릅니다. 이것은 공짜라는 개념과 HTML5 라는 개념을 동시에 가져왔습니다. 하나의 API만으로 모든 개발자들은 인터랙티브한 음성 및 비디오 어플리케이션을 만들 수 있게 되었습니다.
getUserMedia, PeerConnection, data channel는 모든 WebRTC API에서 명시되어 있습니다.우리는 모두 지금 어플리케이션을 구현할때 동일한 언어로 말하고 있습니다. 그리고 이것은 새로운 생태계를 만들었습니다.

  1. 왜 WebRTC에 adpater.js가 필요한가

하지만 이것들은 아직 제안으로만 남아있다는 문제가 있습니다. WebRTC version 1.0 API는 이런 기능들을 완전히 만들지 못했습니다.브라우저에 구현된 WebRTC는 동일한 언어로 만들어진 방언과 같습니다. ( 브라우저 별로 비슷하지만 완전히 똑같지 않다. )브라우저 하나에 대해서 WebRTC 어플리케이션을 만들면 90% 이해는 하지만 10%정도 이해가 완됩니다.
그래서 adapter.js가 필요합니다.

  1. adapter.js의 역사

adapter.js는 2012, 2013 년 WebRTC초기부터 시작되었습니다. google의 apprtc sample application의 일부였습니다.아직도 Chrome tree에서 확인할 수 있죠. 이것은 150라인이하의 아주 작은 프로젝트 였습니다.메인 역할은 webkitRTCPeerConnection 와 mozRTCPeerConnection의 차이점을 숨기고,MediaStream을 HTML element에 붙이는걸 도와주는 거였습니다.
WebRTC의 험난한 시간동안,  많은 사람들이 WebRTC를 쉽게 만들수 있는 자신만의 라이브러리를 만들었습니다.이것은 2015년 중반 Microsoft Edge가 나오면서 바뀌기 시작했습니다.Edge는 getUserMedia에 접두사가 필요하지 않았습니다, 그리고 MeidaStream을 video element에 붙이는 방식은다른 많은 어플리케이션에서 구현하는 3가지 다른 방법으로 해도 여전히 작동했습니다.이것은 표준화된 행동으로 전환할 필요가 있음을 보여주었습니다.또한, Microsoft의 Benard Adoba가 지적한 것처럼 접두사가 붙은 api 버전을 보여주는 책들이 출판되었습니다.WebRTC1.0보다 ORTC를 선호하는 Microsoft는 ORTC 최상단에 RTCPeerConnection API 와의 연결점을 만들 수 있어몹시 좋아했습니다. 이것은 초기 ORTC Edge버전의 정보처리를 상호 운용하고 몇몇 버그들을 없앨 수 있도록 해줬습니다.
그 후 adapter.js에 Promise 지원이 추가되었습니다. 파이어폭스, 크롬에서 Promise 기능을 적용하면서adapter의 목표 상태를 바꾸었습니다. adapter는 현대의 WebRTC Javascript 소스로 재탄생 했습니다.이후 내용 생략

  1. 현재의 adapter.js

가볍고 그냥 하는 프로젝트에는 간단히  https://webrtc.github.io/adapter/adapter-latest.js 만 include하면 됩니다.이것은 당신에게 최신 공개 버전을 줍니다. 그러나 이것은 당신의 어플리케이션이 자동으로 변경되게해서 거대규모의 어플리케이션에는 추천하지 않습니다.
adapter.js를 다운로드하는 기본적인 방법은 NPM 입니다. 많은 Javascript 프로젝트에서, 당신은 webrtc-adapter를 아래와 같이 설치하면 됩니다.
주의 : adapter.js를 업그레이드 하는 일은 WebRTC javascript API를 다루기 때문에 위험합니다. 그러므로 정확한 버전을 package.json에 명시하여 유지하고,많은 테스트를 거쳐 업그레이드 할 것을 권장합니다.
사용하기 위해서는 require하기만 하면 됩니다.
const adapter=require(“webrtc-adapter”);
polyfill 이래로 이것은 window 객체를 기본적으로 투명하게 변경합니다.  adpater 오브젝트는 당신에게 브라우저 정보와 브라우저 상세 정보를 줍니다. 

console.log(adapter.browserDetails.browser);console.log(adapter.browserDetails.version);

WebRTC 지원되는지 확인하기 위해서 당신은 RTCPeerConnection이 정의되었는지 확인해야 됩니다.

!!window.RTCPeerConnection!!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)

그 후 당신은 당신만의 간단한 WebRTC 코드를 작성할 수 있습니다.http://w3c.github.io/webrtc-pc/#simple-peer-to-peer-example
공식 WebRTC예제들은 WebRTC를 시작하는 좋은 방법입니다. 

댓글 남기기

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.

%d 블로거가 이것을 좋아합니다: