보조 연결 디스플레이에 웹페이지 표시

François Beaufort
François Beaufort
GitHub

Chrome 66에서는 웹 페이지가 Presentation API에 포함되고 Presentation을 통해 콘텐츠를 제어할 수 있습니다. 수신기 API를 참조하세요.

<ph type="x-smartling-placeholder">
</ph> 1/2. 사용자가 보조 연결된 디스플레이를 선택 <ph type="x-smartling-placeholder">
</ph> 1/2. 사용자가 보조 연결된 디스플레이를 선택
를 통해 개인정보처리방침을 정의할 수 있습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> 2월 2일 이전에 선택한 디스플레이에 웹페이지가 자동으로 표시됩니다. <ph type="x-smartling-placeholder">
</ph> 2월 2일 이전에 선택한 디스플레이에 웹페이지가 자동으로 표시됩니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.

배경

지금까지 웹 개발자는 사용자가 로컬에 저장된 이미지를 보고 리모컨에 표시되는 콘텐츠와 다른 Chrome 콘텐츠 로컬에서 해당 환경을 제어할 수 있습니다. 예 TV에서 동영상이 재생되는 동안 youtube.com에서 재생 대기열 관리 또는 전체 화면 모드에서 노트북에 발표자 노트가 포함된 슬라이드 릴 보기 표시됩니다.

하지만 사용자가 그저 'Google 서비스'에 콘텐츠를 표시하고 싶어 하는 경우도 두 번째, 연결된 디스플레이입니다 예를 들어 회의실에 있는 사용자를 상상해 보세요. HDMI 케이블을 통해 연결되는 프로젝터가 장착되어 있습니다. 사용자는 프레젠테이션을 원격 엔드포인트에 미러링하기 보다는 프로젝터에서 슬라이드를 전체 화면으로 표시하고자 하므로 발표자 노트 및 슬라이드 제어에 사용할 수 있는 노트북 화면 사이트에서 매우 기초적인 방식으로 이를 뒷받침할 수 있습니다 (예: 사용자가 수동으로 보조 디스플레이로 드래그하고 전체 화면 크기로 최대화할 경우 번거롭고 일관성이 없는 원활한 경험을 제공합니다.

페이지 표시

Presentation API를 사용하여 웹페이지를 표시하는 방법을 안내해 드리겠습니다. 을 엽니다. 최종 결과는 다음 위치에서 확인할 수 있습니다. https://googlechrome.github.io/samples/presentation-api/.

먼저 새 PresentationRequest 객체를 만들어 보겠습니다. 이 객체에는 보조 연결 디스플레이에 표시할 URL입니다.

const presentationRequest = new PresentationRequest('receiver.html');

In this article, I won’t cover use cases where the parameter passed to
`PresentationRequest` can be an array like `['cast://foo’, 'apple://foo',
'https://example.com']` as this is not relevant there.

We can now monitor presentation display availability and toggle a "Present"
button visibility based on presentation displays availability. Note that we can
also decide to always show this button.

<aside class="caution"><b>Caution:</b> The browser may use more energy while the <code>availability</code> object is alive
and actively listening for presentation display availability changes. Please
use it with caution in order to save energy on mobile.</aside>

```js
presentationRequest.getAvailability()
  .then(availability => {
    console.log('Available presentation displays: ' + availability.value);
    availability.addEventListener('change', function() {
      console.log('> Available presentation displays: ' + availability.value);
    });
  })
  .catch(error => {
    console.log('Presentation availability not supported, ' + error.name + ': ' +
        error.message);
  });

프레젠테이션 표시 메시지를 표시하려면 클릭과 같은 사용자 동작이 필요합니다. 표시됩니다. 버튼 클릭 시 presentationRequest.start()를 호출하고 사용자가 프레젠테이션을 선택하면 약속이 해결될 때까지 기다림 디스플레이(예: 이 사용 사례에서는 보조 연결 디스플레이)를 사용합니다.

function onPresentButtonClick() {
  presentationRequest.start()
  .then(connection => {
    console.log('Connected to ' + connection.url + ', id: ' + connection.id);
  })
  .catch(error => {
    console.log(error);
  });
}

사용자에게 표시되는 목록에는 광고 네트워크에 연결된 경우 Chromecast 기기 참고: 미러링된 디스플레이가 목록에 없습니다 http://crbug.com/840466을 참고하세요.

<ph type="x-smartling-placeholder">
</ph> 프레젠테이션 표시 선택 도구 <ph type="x-smartling-placeholder">
</ph> 프레젠테이션 표시 선택 도구

프로미스가 확인될 때 PresentationRequest 객체 URL의 웹페이지는 표시됩니다. 끝났습니다!

이제 더 나아가서 '닫기'를 및 'terminate' 이벤트 수 참조하세요. 'Closed' 상태인 presentationRequest.reconnect(presentationId) 이모티콘으로 presentationConnection 여기서 presentationId는 이전 presentationRequest 객체의 ID입니다.

function onCloseButtonClick() {
  // Disconnect presentation connection but will allow reconnection.
  presentationConnection.close();
}

presentationConnection.addEventListener('close', function() {
  console.log('Connection closed.');
});


function onTerminateButtonClick() {
  // Stop presentation connection for good.
  presentationConnection.terminate();
}

presentationConnection.addEventListener('terminate', function() {
  console.log('Connection terminated.');
});

페이지와 통신

그렇다면 컨트롤러 페이지 (방금 만든 페이지)와 수신기 페이지( PresentationRequest 객체에 전달한 적이 있나요?

먼저 navigator.presentation.receiver.connectionList 및 수신 메시지 듣기 연결할 수 있습니다

// Receiver page

navigator.presentation.receiver.connectionList
.then(list => {
  list.connections.map(connection => addConnection(connection));
  list.addEventListener('connectionavailable', function(event) {
    addConnection(event.connection);
  });
});

function addConnection(connection) {

  connection.addEventListener('message', function(event) {
    console.log('Message: ' + event.data);
    connection.send('Hey controller! I just received a message.');
  });

  connection.addEventListener('close', function(event) {
    console.log('Connection closed!', event.reason);
  });
}

메시지를 수신하는 연결은 '메시지'를 실행합니다. 이벤트를 수신합니다. 메시지는 문자열, Blob, ArrayBuffer, ArrayBufferView일 수 있습니다. 전송은 다음에서 connection.send(message)를 호출하기만 하면 됩니다. 컨트롤러 페이지 또는 수신자 페이지입니다.

// Controller page

function onSendMessageButtonClick() {
  presentationConnection.send('Hello!');
}

presentationConnection.addEventListener('message', function(event) {
  console.log('I just received ' + event.data + ' from the receiver.');
});

다음 페이지에서 샘플을 확인해 보세요. https://googlechrome.github.io/samples/presentation-api/에서 작동 방식을 살펴보겠습니다. 저만큼 마음에 드실 거예요.

샘플 및 데모

이 도움말에 사용된 공식 Chrome 샘플을 확인하세요.

양방향 Photowall 데모도 추천합니다. 이 웹 앱에서 여러 컨트롤러를 사용하여 사진 슬라이드쇼를 공동으로 보여줄 수 있습니다. 표시할 수 있습니다. 코드는 다음 위치에서 확인할 수 있습니다. https://github.com/GoogleChromeLabs/presentation-api-samples.

<ph type="x-smartling-placeholder">
</ph> Photowall 데모 스크린샷 <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> 사진 (José Luis Mieza), / CC BY-NC-SA 2.0

한 가지 더 알려드릴 사항이 있습니다

Chrome에 '전송' 기능이 있음 사용자가 웹 브라우저의 있습니다. 이 메뉴의 기본 표시를 제어하려면 navigator.presentation.defaultRequest을(를) 맞춤에 할당 이전에 만든 presentationRequest 객체입니다.

// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;

개발자 도움말

수신자 페이지를 검사하고 디버그하려면 내부 chrome://inspect 페이지에서 '기타'를 선택한 후 확인할 수 있습니다.

<ph type="x-smartling-placeholder">
</ph> 프레젠테이션 수신자 페이지 검사 <ph type="x-smartling-placeholder">
</ph> 프레젠테이션 수신자 페이지 검사

내부 chrome://media-router-internals도 확인해 보세요. 내부 검색/가용성 프로세스를 자세히 살펴볼 수 있는 페이지입니다.

다음 단계

Chrome 66부터 ChromeOS, Linux, Windows 플랫폼이 지원됩니다. Mac 지원은 나중에 제공될 예정입니다.

리소스