WebRTC 크롬/사파리 업데이트 소식(22.1Q)

WebRTC 크롬/사파리 업데이트소식 (22년 1분기)

2022년 1분기에 있었던 웹브라우저들의 WebRTC 기능 업데이트 관련 소식을 전해드립니다.

크롬

화면공유시 선택된 탭을 변경하는 기능 추가

크롬브라우저에서 탭기반으로 화면공유를 선택하면 하나의 탭만을 선택할 수 있기 때문에 탭을 변경해서 화면공유를 하려면 새로 다시 화면공유를 해야하는 불편함이 있었습니다. 그러나 이제 특정 탭을 공유하는 상황에서 다른 탭을 선택하면 위와 같이 '이 탭을 대신 공유' 버튼이 생겨서 탭간에 화면공유 타겟을 변경할 수 있게 되었습니다. M98에서 추가되었네요.

화면공유시 영역 캡쳐기능 추가

MediaStreamTrack에 특정 영역 즉, DOM객체만을 캡쳐할 수 있게 하는 기능이 추가되었습니다. 즉 getDisplayMedia시 현재 탭을 화면공유할 때 전체 탭화면이 아니라 특정 DOM객체를 crop해서 선택적으로 캡쳐하는 기능인데, 이게 실제로 어디에 쓰일지는 잘 모르겠네요. 이 역시 M98에서 새롭게 추가되었습니다.

 

사파리

사파리 15.4 버전 부터 WebRTC perfect negotiation 을 지원합니다. 기존에는 WebRTC에서 시그널링시 미묘한 차이로 인하여 시그널링 실패할 여지가 있었습니다. WebRTC perfect negotiation을 통해서 이러한 부분을 제거할 수 있게 되었습니다.

mozilla의 관련 문서에서 아주 자세하게 코드 수준으로 다루고 있습니다. 여기에서 다루는 시그널링 예제는 표준적이며 예외상황을 최대한 없앨 수 있는 가이드로 훌륭해보이네요. 몇가지 코드수준에서의 가이드를 아래에 복붙해봅니다.

onnegotiationneeded 이벤트 핸들러(과거)

pc.onnegotiationneeded = async () => {
  try {
    await pc.setLocalDescription(await pc.createOffer());
    signaler.send({description: pc.localDescription});
  } catch(err) {
    console.error(err);
  }
};

onnegotiationneeded 이벤트 핸들러(추천)

let makingOffer = false;

pc.onnegotiationneeded = async () => {
  try {
    makingOffer = true;
    await pc.setLocalDescription();
    signaler.send({ description: pc.localDescription });
  } catch(err) {
    console.error(err);
  } finally {
    makingOffer = false;
  }
};