I have a very simple HTML page that connects the page to my Twilio backend:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/@twilio/voice-sdk@2.0.1/dist/twilio.min.js"></script>
<script>
connection = null;
call = async () => {
const response = await fetch(
"https://my.token.endpoint/token"
);
const data = await response.json();
const device = new Twilio.Device(data.token);
connection = await device.connect();
connection.on(
"error",
(err) =>
(document.getElementById("error-display").innerHTML = err.message)
);
};
stop = () => {
connection?.disconnect();
connection = null;
};
</script>
</head>
<body>
<button onclick="call()">call</button>
<button onclick="stop()">stop</button>
<p id="error-display"></p>
</body>
</html>
When I open the HTML page from my Windows 10 machine using Chrome 102.0.5005.115, clicking the call button successfully connects to my Twilio backend.
However when I open the HTML page from my Android 12 mobile device using Chrome 102.0.5005.125, clicking the call button triggered the following error:
AcquisitionFailedError (31402): The browser and end-user allowed permissions, however getting the media failed. Usually this is due to bad constraints, but can sometimes fail due to browser, OS or hardware issues.