기본 Bluetooth 통신 장치에 대한 호출 관리 방법(HTML)

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

이 자습서에서는 기본 Bluetooth 통신 장치의 호출 처리를 구성하는 방법을 보여 줍니다.

알아야 할 사항

기술

  • Windows Runtime

사전 요구 사항

  • HTML, JavaScript, Windows 이벤트 및 이벤트 처리기에 대해 잘 알고 있어야 합니다.
  • 이 샘플을 실행하려면 Bluetooth를 지원하고 Windows 8 이상 운영 체제를 실행하는 컴퓨터가 필요합니다.

지침

단계 1: Default.html 파일 코드

CallControl 샘플에서는 다음 HTML 스크립트를 사용하여 화면에 UI 요소를 배열하여 해당 기능을 사용할 수 있도록 합니다.

  • 다음은 CallControl 샘플에서 사용하는 HTML 코드입니다.
<!DOCTYPE html>
<html>
<head>
    <title>Call Control</title>
    
    <!-- WinJS references -->
    <link href="winjs/css/ui-light.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="WinJS/js/base.js"></script>
    <script type="text/javascript" src="WinJS/js/ui.js"></script>
    <script type="text/javascript" src="WinJS/js/wwaapp.js"></script>

    <!-- SDK Base references -->
    <link rel="stylesheet" type="text/css" href="css/base-sdk.css" />
    <script type="text/javascript" src="base-sdk.js"></script>

    <!-- Sample references -->
    <link rel="stylesheet" type="text/css" href="css/program.css" />
    <script type="text/javascript" src="program.js"></script>

</head>
<body role="application">
    <div id="rootGrid">
        <div id="header" role="contentinfo">
        </div>
        <div id="content">
            <h1>
                Call Control</h1>
            <h2 id="inputLabel">
                Input</h2>
            <div id="input" role="main" aria-labelledby="inputLabel">
                <div class="options">
                    <h3 id="listLabel">
                        Select scenario:</h3>
                    <select size="4" id="scenarios" aria-labelledby="listLabel">
                        <option selected="selected" value="1">1) Call Controls</option>
                    </select>
                </div>
                <div class="details" role="region" aria-labelledby="descLabel" aria-live="assertive">
                    <h3 id="descLabel">
                        Description:</h3>
                    <!-- Scenario 1 Input -->
                    <div class="item" id="scenario1Input">
                        <p>
                            To use this sample, ensure you have a bluetooth device and press the initialize
                            the call control button. After initialization you will be able to simulate an incoming
                            call by pressing the indicate phone call button. Use your bluetooth device to answer
                            and hang up the call. Redial and dial should work after initialization. Some devices
                            require a stream to be opened so a file will start playing to the default communications
                            device.
                        </p>
                        <button class="action" id="scenario1Initialize">
                            Initialize Call Buttons</button>
                        <button class="action secondary" id="scenario1Ring" disabled="disabled">
                            Indicate Phone Call</button>
                        <br />
                        <br />
                    </div>
                </div>
            </div>
            <div class="clear">
            </div>
            <h2 id="outputLabel">
                Output</h2>
            <div id="output" role="region" aria-labelledby="outputLabel" aria-live="assertive">
                <div id="statusMessage">
                </div>
                <!-- Scenario 1 Output -->
                <div class="item" id="scenario1Output">
                    <audio id="audiotag" src="folk_rock.mp3" msaudiocategory="communications"
                        msaudiodevicetype="communications" loop>
                    </audio>
                </div>
            </div>
        </div>
        <div id="footer" role="contentinfo">
        </div>
    </div>
</body>
</html>

단계 2: Default.js 파일 코드

초기화의 일부로 CallControl 샘플에서는 이벤트 수신기를 구성하고 응답 단추 및 끊기 단추와 같은 단추에 응답하는 이벤트 처리기에 이벤트 수신기를 연결합니다.

  • 다음은 CallControl 샘플에서 사용하는 JavaScript 코드입니다.
//// THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
//// ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
//// THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
//// PARTICULAR PURPOSE.
////
//// Copyright (c) Microsoft Corporation. All rights reserved

/// <reference path="base-sdk.js" />

(function () {

    // Initialize the call control object here using the default bluetooth communications device
    var callControls = null;
    var callToken;
    var audiotag;

    function id(elementId) {
        return document.getElementById(elementId);
    }

    function initDevice() {
        if (!callControls) {
            try {
                callControls = Windows.Media.Devices.CallControl.getDefault();

                if (callControls) {
                    // Add the event listener to listen for the various button presses
                    callControls.addEventListener("answerrequested", answerButton, false);
                    callControls.addEventListener("hanguprequested", hangupButton, false);
                    callControls.addEventListener("audiotransferrequested", audiotransferButton, false);
                    callControls.addEventListener("redialrequested", redialButton, false);
                    callControls.addEventListener("dialrequested", dialButton, false);

                    sdkSample.displayStatus("Call Controls Initialized");
                    id("scenario1Ring").disabled = false;
                } else {
                    sdkSample.displayError("No Bluetooth device detected.");
                }
            }
            catch (e) {                
                sdkSample.displayError("No Bluetooth device detected.");
            }
        }
    }

    function newIncomingCall() {
        // Indicate a new incoming call and ring the headset.
        callToken = callControls.indicateNewIncomingCall(true, "5555555555");
        sdkSample.displayStatus("Call Token: " + callToken);
    }

    function answerButton() {
        // When the answer button is pressed indicate to the device that the call was answered
        // and start a song on the headset (this is done by streaming music to the bluetooth
        // device in this sample)
        sdkSample.displayStatus("Answer requested: " + callToken);
        callControls.indicateActiveCall(callToken);
        audiotag = document.getElementById("audiotag");
        audiotag.play();
    }

    function hangupButton() {
        // Hang up request received.  The application should end the active call and stop
        // streaming to the headset
        sdkSample.displayStatus("Hangup requested");
        callControls.endCall(callToken);
        audiotag = document.getElementById("audiotag");
        audiotag.pause();
    }

    function audiotransferButton() {
        // Handle the audio transfer request here
        sdkSample.displayStatus("Audio Transfer requested");
    }

    function redialButton(redialRequestedEventArgs) {
        // Handle the redial request here.  Indicate to the device that the request was handled.
        sdkSample.displayStatus("Redial requested");
        redialRequestedEventArgs.handled = true;
    }

    function dialButton(dialRequestedEventArgs) {
        // A device may send a dial request by either sending a URI or if it is a speed dial,
        // an integer with the number to dial.
        if (typeof(dialRequestedEventArgs.contact) === "number") {
            sdkSample.displayStatus("Dial requested: " + dialRequestedEventArgs.contact);
            dialRequestedEventArgs.handled = true;
        }
        else {
            sdkSample.displayStatus("Dial requested: " + dialRequestedEventArgs.contact.schemeName + ":" +
            dialRequestedEventArgs.contact.path);
            dialRequestedEventArgs.handled = true;
        }
    }

    function initialize() {
        id("scenario1Initialize").addEventListener("click", initDevice, false);
        id("scenario1Ring").addEventListener("click", newIncomingCall, false);
        id("scenarios").addEventListener("change", onScenarioChanged, false);
    }

    function onScenarioChanged() {
        sdkSample.displayStatus("");
    }

    document.addEventListener("DOMContentLoaded", initialize, false);
})();

단계 3: CallControl 샘플 실행 및 테스트

  • 이 샘플을 빌드, 실행 및 테스트하는 방법은 이 샘플에 대한 설명에 포함되어 있습니다. 이 샘플의 빌드 및 기타 지침을 보려면 호출 제어 샘플을 참조하세요.

설명

일부 장치에서는 오디오 스트림을 먼저 열어야 하므로 기본 통신 장치에서 오디오 파일 재생이 시작될 수 있습니다.

Windows 스토어 앱에서 호출 관리에 대한 개발자 지침 및 모범 사례는 오디오 인식 앱 개발에 대한 지침을 참조하세요.

관련 항목

호출 제어 샘플

오디오 인식 앱 개발에 대한 지침