Chrome 66에서는 웹 페이지가 Presentation API에 포함되고 Presentation을 통해 콘텐츠를 제어할 수 있습니다. 수신기 API를 참조하세요.
<ph type="x-smartling-placeholder">![1/2. 사용자가 보조 연결된 디스플레이를 선택](https://developer.chrome.com/static/blog/present-web-pages-to-secondary-attached-displays/image/12-user-picks-secondar-03beeb097e67e.jpg?authuser=4&hl=ko)
![2월 2일 이전에 선택한 디스플레이에 웹페이지가 자동으로 표시됩니다.](https://developer.chrome.com/static/blog/present-web-pages-to-secondary-attached-displays/image/22-web-page-is-automat-5dab3e95502c3.jpg?authuser=4&hl=ko)
배경
지금까지 웹 개발자는 사용자가 로컬에 저장된 이미지를 보고 리모컨에 표시되는 콘텐츠와 다른 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">![프레젠테이션 표시 선택 도구](https://developer.chrome.com/static/blog/present-web-pages-to-secondary-attached-displays/image/presentation-display-pick-6b14dbd5ed08c.png?authuser=4&hl=ko)
프로미스가 확인될 때 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">![Photowall 데모 스크린샷](https://developer.chrome.com/static/blog/present-web-pages-to-secondary-attached-displays/image/photowall-demo-screenshot-10527faacc264.jpg?authuser=4&hl=ko)
한 가지 더 알려드릴 사항이 있습니다
Chrome에 '전송' 기능이 있음 사용자가 웹 브라우저의
있습니다. 이 메뉴의 기본 표시를 제어하려면
navigator.presentation.defaultRequest
을(를) 맞춤에 할당
이전에 만든 presentationRequest
객체입니다.
// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;
개발자 도움말
수신자 페이지를 검사하고 디버그하려면 내부
chrome://inspect
페이지에서 '기타'를 선택한 후
확인할 수 있습니다.
![프레젠테이션 수신자 페이지 검사](https://developer.chrome.com/static/blog/present-web-pages-to-secondary-attached-displays/image/inspect-presentation-rece-260dbbca83182.png?authuser=4&hl=ko)
내부 chrome://media-router-internals
도 확인해 보세요.
내부 검색/가용성 프로세스를 자세히 살펴볼 수 있는 페이지입니다.
다음 단계
Chrome 66부터 ChromeOS, Linux, Windows 플랫폼이 지원됩니다. Mac 지원은 나중에 제공될 예정입니다.
리소스
- Chrome 기능 상태: https://www.chromestatus.com/features#presentation%20api
- 구현 버그: https://crbug.com/?q=component:Blink>PresentationAPI
- Presentation API 사양: https://w3c.github.io/presentation-api/
- 사양 문제: https://github.com/w3c/presentation-api/issues