자바스크립트 "Presentation API"
Presentation API는 웹 개발자가 프로젝터, TV 또는 기타 화면과 같은 외부 프레젠테이션 디스플레이를 연결하고 제어할 수 있는 웹 애플리케이션을 만들 수 있는 JavaScript API입니다. Presentation API는 외부 디스플레이를 검색 및 선택하고 외부 디스플레이에 콘텐츠를 보내는 표준화된 방법을 제공합니다.
다음은 프레젠테이션 API를 사용하는 방법에 대한 간단한 예입니다.
<!DOCTYPE html>
<html>
<head>
<title>Presentation API Example</title>
<script>
// Request a presentation session
function requestPresentation() {
navigator.presentation.request()
.then((presentation) => {
console.log('Connected to presentation:', presentation.url);
presentation.onclose = () => {
console.log('Presentation closed');
};
presentation.onmessage = (event) => {
console.log('Received message:', event.data);
};
// Send a message to the presentation display
presentation.send('Hello from the web app!');
})
.catch((error) => {
console.error('Failed to connect to presentation:', error);
});
}
</script>
</head>
<body>
<button onclick="requestPresentation()">Connect to Presentation</button>
</body>
</html>
이 예제에서는 `navigator.presentation.request()` 메서드를 사용하여 프레젠테이션 세션을 요청하는 `requestPresentation()` 함수를 정의합니다. 세션이 설정되면 프레젠테이션 디스플레이에 연결되었음을 나타내는 메시지를 콘솔에 기록합니다. 또한 프레젠테이션 객체의 `onclose` 및 `onmessage` 이벤트에 대한 이벤트 리스너를 설정합니다. 마지막으로 `Presentation.send()` 메서드를 사용하여 프레젠테이션 디스플레이에 메시지를 보냅니다.
프레젠테이션 API를 사용하려면 웹 앱이 HTTPS를 통해 제공되어야 하며 프레젠테이션 디스플레이도 API를 지원해야 합니다.
다음은 프레젠테이션 API를 사용하여 간단한 프레젠테이션 디스플레이를 만드는 방법의 예입니다.
<!DOCTYPE html>
<html>
<head>
<title>Presentation Display Example</title>
<script>
// Listen for incoming presentation connections
navigator.presentation.defaultSession.onconnect = (event) => {
console.log('Presentation connected');
const presentation = event.receiver;
presentation.onmessage = (event) => {
console.log('Received message:', event.data);
};
presentation.onclose = () => {
console.log('Presentation closed');
};
// Send a message to the web app
presentation.send('Hello from the presentation display!');
};
</script>
</head>
<body>
<h1>This is the presentation display</h1>
</body>
</html>
이 예제에서는 `navigator.presentation.defaultSession.onconnect` 이벤트 리스너를 사용하여 들어오는 프레젠테이션 연결을 수신합니다. 연결이 설정되면 프레젠테이션이 연결되었음을 나타내는 메시지를 콘솔에 기록합니다. 프레젠테이션 객체의 `onmessage` 및 `onclose` 이벤트에 대한 이벤트 리스너를 설정합니다. 마지막으로 `Presentation.send()` 메서드를 사용하여 웹 앱에 메시지를 다시 보냅니다.
이 예제에서는 웹 앱과 프레젠테이션 디스플레이가 서로 다른 장치에서 호스팅되고 프레젠테이션 디스플레이에는 Presentation API를 사용하여 웹 앱에서 검색할 수 있는 고유한 URL이 있다고 가정합니다.