132 lines
6.6 KiB
HTML
132 lines
6.6 KiB
HTML
<!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>
|