빠른 시작: 앱에서 원격 재생 기능 사용(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
원격 재생 기능을 사용하면 사용자가 컴퓨터의 오디오, 동영상 또는 이미지를 홈 네트워크의 장치로 쉽게 스트리밍할 수 있습니다. 이 항목에서는 Windows 스토어 앱에서 원격 재생 기능을 사용하여 사용자가 미디어를 대상 장치에 스트리밍할 수 있도록 설정하는 방법을 보여 줍니다.
목표: 원격 재생 기능을 사용하여 미디어를 대상 장치로 스트리밍합니다.
사전 요구 사항
Microsoft Visual Studio
지침
1. 새 프로젝트 만들기 및 미디어 라이브러리에 액세스할 수 있도록 설정
- Visual Studio를 열고 파일 메뉴에서 새 프로젝트를 선택합니다. Javascript 섹션에서 새 응용 프로그램을 선택합니다. 응용 프로그램의 이름을 PlayToSample로 지정하고 확인을 클릭합니다.
- package.appxmanifest 파일을 열고 기능 탭을 선택합니다. 음악 라이브러리, 사진 라이브러리 및 비디오 라이브러리 기능을 선택하여 응용 프로그램이 컴퓨터의 미디어 라이브러리에 액세스할 수 있게 합니다. 매니페스트 파일을 저장하고 닫습니다.
2. HTML UI 추가
Default.html 파일을 열고 다음 HTML을 <body> 섹션에 추가합니다.
<div style="position:fixed;width:300px;height:30px;"> <button id="videoButton">Video</button> <button id="audioButton">Audio</button> <button id="imageButton">Image</button> </div> <div id="displayDiv" style="position:fixed;top:40px;height:360px"> <div id="videoDiv"> <video id="vplayer" height="338" width="600" controls > Cannot play video. </video> </div> <div id="audioDiv"> <audio id="aplayer" controls >Cannot play audio.</audio> </div> <div id="imageDiv"> <img id="iplayer" height="338" width="600" alt="image"> </div> <br/> </div> <div id="messageDiv" style="position:fixed;top:400px;height:auto"></div>
3. 초기화 코드 추가
이 단계의 코드는 HTML 단추의 클릭 이벤트에 대한 이벤트 처리기를 만듭니다. showDiv 함수는 표시할 HTML5 미디어 요소(<video>, <audio> 또는 <img>)를 전환하고 활성 요소에 대한 참조를 유지합니다. 이 참조는 요소의 원본을 재생 대상으로 스트림하기 위해 PlayToManager에 전달됩니다. 바로 가기 함수인 id는 getElementById 함수에 편리하게 액세스하기 위한 것입니다.
js 폴더를 엽니다. Default.js 파일을 열고 다음 코드를 기본 WinJS.Application.onmainwindowactivated 함수 대신 추가합니다.
app.onactivated = function (eventObject) { if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { id("videoButton").addEventListener("click", videoButtonClick, false); id("audioButton").addEventListener("click", audioButtonClick, false); id("imageButton").addEventListener("click", imageButtonClick, false); videoButtonClick(); WinJS.UI.processAll(); } }; function id(tagName) { return document.getElementById(tagName); } // Save a reference to the current media element for PlayTo. var mediaElement; function showDiv(divName) { id("audioDiv").style.display = "none"; id("aplayer").src = null; id("imageDiv").style.display = "none"; id("videoDiv").style.display = "none"; id("vplayer").src = null; id(divName).style.display = "block"; switch (divName) { case "audioDiv": mediaElement = id("aplayer"); break; case "videoDiv": mediaElement = id("vplayer"); break; case "imageDiv": mediaElement = id("iplayer"); break; } } function videoButtonClick() { showDiv("videoDiv"); getVideoFile(0); } function audioButtonClick() { showDiv("audioDiv"); getAudioFile(0); } function imageButtonClick() { showDiv("imageDiv"); getImageFile(0); }
4. 로컬 미디어 라이브러리에서 미디어 원본을 가져오는 코드 추가
이 단계의 코드는 HTML 단추의 클릭 이벤트 동안 호출됩니다. 각 함수는 선택한 미디어 라이브러리에서 찾은 첫 번째 항목을 관련 HTML5 미디어 요소에서 재생 또는 표시합니다. 예를 들어 응용 프로그램에서 비디오 단추를 클릭하면 getVideoFile 함수가 비디오의 첫 번째 비디오 항목을 가져오고 이 비디오를 <video> 태그에 대한 원본으로 설정하고 재생합니다.
Default.js 파일에서 다음 코드를 이전 단계의 코드 뒤에 추가합니다.
function getVideoFile(fileIndex) { try { var videosLibrary = Windows.Storage.KnownFolders.videosLibrary; videosLibrary.getFilesAsync().then(function (resultLibrary) { if (resultLibrary.length > 0) { id("messageDiv").innerHTML += "Play video: " + resultLibrary[fileIndex].name + "<br/>"; id("vplayer").src = URL.createObjectURL(resultLibrary[fileIndex]); id("vplayer").play(); } }); } catch (ex) { id("messageDiv").innerHTML += "Exception encountered: " + ex.message + "<br/>"; } } function getAudioFile(fileIndex) { try { var musicLibrary = Windows.Storage.KnownFolders.musicLibrary; musicLibrary.getFilesAsync().then(function (resultLibrary) { if (resultLibrary.length > 0) { id("messageDiv").innerHTML += "Play audio: " + resultLibrary[fileIndex].name + "<br/>"; id("aplayer").src = URL.createObjectURL(resultLibrary[fileIndex]); id("aplayer").play(); } }); } catch (ex) { id("messageDiv").innerHTML += "Exception encountered: " + ex.message + "<br/>"; } } function getImageFile(fileIndex) { try { var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary; picturesLibrary.getFilesAsync().then(function (resultLibrary) { if (resultLibrary.length > 0) { id("messageDiv").innerHTML += "Show image: " + resultLibrary[fileIndex].name + "<br/>"; id("iplayer").src = URL.createObjectURL(resultLibrary[fileIndex]); } }); } catch (ex) { id("messageDiv").innerHTML += "Exception encountered: " + ex.message + "<br/>"; } }
5. 재생 코드 추가
이 단계의 코드만 있으면 응용 프로그램에서 원격 재생 기능을 사용하도록 설정할 수 있습니다. 현재 응용 프로그램의 PlayToManager에 대한 참조를 가져오고 sourcerequested 이벤트의 이벤트 처리기를 연결합니다. sourcerequested 이벤트 처리기에서 HTML5 미디어 요소의 msPlayToSource 속성을 PlayToManager의 setSource 메서드에 전달합니다. 그러면 PlayToManager에서 사용자가 선택한 재생 대상으로 미디어를 스트리밍합니다.
Default.js 파일에서 다음 코드를 이전 단계의 코드 뒤에 추가합니다.
var ptm = Windows.Media.PlayTo.PlayToManager.getForCurrentView(); ptm.addEventListener("sourcerequested", sourceRequestHandler, false); function sourceRequestHandler(e) { try { var sr = e.sourceRequest; var controller; try { controller = mediaElement.msPlayToSource; } catch (ex) { id("messageDiv").innerHTML += "msPlaytoSource failed: " + ex.message + "<br/>"; } sr.setSource(controller); } catch (ex) { id("messageDiv").innerHTML += "Exception encountered: " + ex.message + "<br/>"; } }
6. 재생 대상 만들기(옵션)
응용 프로그램을 실행하려면 원격 재생 기능이 미디어를 스트리밍할 수 있는 대상 장치가 필요합니다. 인증된 원격 재생 수신기가 없는 경우 Windows Media Player를 대상 장치로 사용할 수 있습니다. Windows Media Player를 대상 장치로 사용하려면 컴퓨터가 개인 네트워크에 연결되어 있어야 합니다.
- Windows Media Player를 시작합니다.
- 스트림 메뉴를 확장하고 내 플레이어 원격 제어 허용... 옵션을 사용하도록 설정합니다. Windows Media Player를 열어 둡니다. 실행되고 있어야 재생 대상으로 사용할 수 있습니다.
- 장치 및 프린터 제어판을 엽니다. 장치 및 프린터 추가를 클릭합니다. 장치 및 프린터 추가 마법사의 이 PC에 추가할 장치 또는 프린터 선택 창에서 사용자 PC의 디지털 미디어 렌더러를 찾습니다. 이것이 사용자 PC의 Windows Media Player입니다. 선택하고 다음을 클릭합니다. 마법사가 완료되면 멀티미디어 장치 목록에 Windows Media Player 인스턴스가 표시됩니다.
7. 앱 실행
- Visual Studio에서 F5(디버그) 키를 눌러 앱을 실행합니다. 미디어 단추 중 하나를 선택하여 다른 미디어 라이브러리에 있는 첫 번째 미디어 항목을 재생하거나 볼 수 있습니다. 미디어가 재생되는 동안 장치 참 메뉴를 열고 재생 대상을 선택하여 미디어를 대상 장치로 스트리밍합니다.
요약
이 빠른 시작에서는 비디오 및 오디오 콘텐츠를 재생하고 이미지를 표시하는 응용 프로그램에 원격 재생 기능을 추가했습니다. 원격 재생 기능을 사용하여 응용 프로그램의 콘텐츠를 네트워크의 인증된 원격 재생 수신기로 스트리밍할 수 있습니다.
관련 항목
예제