| <!doctype html> |
| <html> |
| <head> |
| <title>Test setSinkId behavior with permissions / device changes</title> |
| <link rel="author" title="Dominique Hazael-Massieux" href="mailto:dom@w3.org"/> |
| <link rel="help" href="https://www.w3.org/TR/audio-output/#dom-htmlmediaelement-setsinkid"> |
| <meta name="timeout" content="long"> |
| |
| </head> |
| <body> |
| <h1 class="instructions">Description</h1> |
| <p class="instructions">This test checks that <code>setSinkId</code> follows the algorithm, this includes manually checking the proper rendering on new output devices.</p> |
| <p class="instructions">When prompted to access microphones, please accept as this is the only current way to get permissions for associated output devices.</p> |
| <p class="instructions">For each authorized output device, check that selecting it makes the audio beat rendered on the corresponding device.</p> |
| <p>Available but unauthorized devices (only those for which we can gain permission can be selected):</p> |
| <ul id="available"></ul> |
| <p>Authorized devices:</p> |
| <ul id="authorized"></ul> |
| <audio controls id="beat" src="/media/sound_5.mp3" loop></audio> |
| |
| <div id='log'></div> |
| <script src=/resources/testharness.js></script> |
| <script src=/resources/testharnessreport.js></script> |
| <script> |
| "use strict"; |
| |
| const is_output = d => d.kind === "audiooutput"; |
| const by_id = (id) => d => d.groupId === id; |
| const is_input = d => d.kind === "audioinput"; |
| const audio = document.getElementById("beat"); |
| const available = document.getElementById("available"); |
| const authorized = document.getElementById("authorized"); |
| |
| let outputList; |
| |
| const selectDeviceTester = (t) => (e) => { |
| const groupId = e.target.dataset["groupid"]; |
| const device = outputList.find(by_id(groupId)); |
| if (audio.paused) audio.play(); |
| promise_test(pt => audio.setSinkId(device.deviceId).then(() => { |
| assert_equals(device.deviceId, audio.sinkId); |
| |
| const pass = document.createElement("button"); |
| const fail = document.createElement("button"); |
| |
| const result = (bool) => () => { |
| assert_true(bool, "Sound rendered on right device"); |
| fail.remove(); |
| pass.remove(); |
| audio.pause(); |
| e.target.checked = false; |
| e.target.disabled = true; |
| t.done(); |
| }; |
| |
| pass.style.backgroundColor = "#0f0"; |
| pass.textContent = "\u2713 Sound plays on " + device.label; |
| pass.addEventListener("click", result(true)); |
| |
| fail.style.backgroundColor = "#f00"; |
| fail.textContent = "\u274C Sound doesn't play on " + device.label; |
| fail.addEventListener("click", result(true)); |
| |
| const container = e.target.parentNode.parentNode; |
| container.appendChild(pass); |
| container.appendChild(fail); |
| }), "setSinkId for " + device.label + " resolves"); |
| }; |
| |
| const addAuthorizedDevice = (groupId) => { |
| const device = outputList.find(by_id(groupId)); |
| const async_t = async_test("Selecting output device " + device.label + " makes the audio rendered on the proper device"); |
| const li = document.createElement("li"); |
| const label = document.createElement("label"); |
| const input = document.createElement("input"); |
| input.type = "radio"; |
| input.name = "device"; |
| input.dataset["groupid"] = device.groupId; |
| input.addEventListener("change", selectDeviceTester(async_t)); |
| const span = document.createElement("span"); |
| span.textContent = device.label; |
| label.appendChild(input); |
| label.appendChild(span); |
| li.appendChild(label); |
| authorized.appendChild(li); |
| }; |
| |
| const authorizeDeviceTester = (t) => (e) => { |
| const groupId = e.target.dataset["groupid"]; |
| navigator.mediaDevices.getUserMedia({audio: {groupId}}) |
| .then( () => { |
| addAuthorizedDevice(groupId); |
| t.done(); |
| }); |
| }; |
| |
| promise_test(gum => |
| navigator.mediaDevices.getUserMedia({audio: true}).then( |
| () => { |
| promise_test(t => |
| navigator.mediaDevices.enumerateDevices().then(list => { |
| assert_not_equals(list.find(is_output), undefined, "media device list includes at least one audio output device"); |
| outputList = list.filter(is_output); |
| outputList.forEach(d => { |
| const li = document.createElement("li"); |
| assert_not_equals(d.label, "", "Audio Output Device Labels are available after permission grant"); |
| li.textContent = d.label; |
| // Check permission |
| promise_test(perm => navigator.permissions.query({name: "speaker", deviceId: d.deviceId}).then(({state}) => { |
| if (state === "granted") { |
| addAuthorizedDevice(d.groupId); |
| } else if (state === "prompt") { |
| const inp = list.find(inp => inp.kind === "audioinput" && inp.groupId === d.groupId); |
| if (inp || true) { |
| const async_t = async_test("Authorizing output devices via permission requests for microphones works"); |
| const button = document.createElement("button"); |
| button.textContent = "Authorize access"; |
| button.dataset["groupid"] = d.groupId; |
| button.addEventListener("click", async_t.step_func_done(authorizeDeviceTester(async_t))); |
| li.appendChild(button); |
| } |
| available.appendChild(li); |
| } |
| }, () => { |
| // if we can't query the permission, we assume it's granted :/ |
| addAuthorizedDevice(d.groupId); |
| }) |
| , "Query permission to use " + d.label); |
| }); |
| }), "List media devices"); |
| }), "Authorize mike access"); |
| </script> |