Video ohne Audio in .NET9 MAUI HYBRIDWEBVIEW ⇐ Android

[Anonymous]

Ich entwickle eine .NET 9 MAUI Mobile App für Android. Diese App enthält eine Seite, auf der ich eine Hybridwebview in meiner XAML-Seite lade: < /p>

Code: Select all

     

 
< /code>
Diese Hybridwebview enthält später eine Azure -Rede zum Avatar -Video mit einem Standard -Azure -Rede -Avatar.  Ich rufe das JavaScript auf.  Ich muss den Avatar durch diesen Anruf generieren: < /p>
var result = await hybridWebView.InvokeJavaScriptAsync("speak",     HybridJsContext.Default.DictionaryStringString,
[com.Message, Controllers.CurrentLanguage], [HybridJsContext.Default.String, HybridJsContext.Default.String]);
< /code>
Jetzt in meiner Index.html-Seite Ich verwende diesen HTML-Code: < /p>




[img]your-image-source.png[/img]





< /code>
und dieses Skript: < /p>
if (typeof SpeechSDK === "undefined") {
console.log("INFO FROM INDEX.HTML: ERROR-IN-SCRIPT: Speech SDK is not loaded.", "color: red; font-size: 16px;");
} else {
window.speechConfig = SpeechSDK.SpeechConfig.fromSubscription("[SUBSCRIPTIONKEY]", "[REGION]");
window.avatarConfig = new SpeechSDK.AvatarConfig("lisa", "casual-sitting");

window.peerConnection = new RTCPeerConnection({
iceServers: [{
urls: ["[TURN-URL-AND-PORT]"],
username: "[USERNAME]",
credential: "[CREDENTIALS]"
}]
});

// Log connection state changes
window.peerConnection.oniceconnectionstatechange = function () {
console.log("INFO FROM INDEX.HTML: ICE Connection State: " + window.peerConnection.iceConnectionState, "color: orange; font-size: 14px;");
if (window.peerConnection.iceConnectionState === 'connected') {
console.log("INFO FROM INDEX.HTML: TURN server connection established.", "color: green; font-size: 14px;");
} else if (window.peerConnection.iceConnectionState === 'failed') {
console.error("ERROR FROM INDEX.HTML: TURN server connection failed.", "color: red; font-size: 14px;");
}
};

window.peerConnection.ontrack = function (event) {
console.log("INFO FROM INDEX.HTML: Track received: " + event.track.kind, "color: blue; font-size: 14px;");
if (event.track.kind === 'video') {
const videoElement = document.createElement('video');
videoElement.srcObject = event.streams[0];
videoElement.autoplay = true;
videoElement.muted = true; // Add this line to enable autoplay
videoElement.playsInline = true; // For iOS
videoElement.style.width = '100%';
window.remoteVideoDiv = document.getElementById('remoteVideo');
remoteVideoDiv.innerHTML = '';
remoteVideoDiv.appendChild(videoElement);
console.info("INFO FROM INDEX.HTML: Video element appended.", "color: green; font-size: 12px;");
}

if (event.track.kind === 'audio') {
window.audioElement = document.createElement('audio');
audioElement.srcObject = event.streams[0];
audioElement.autoplay = true;
audioElement.muted = true;
document.body.appendChild(audioElement);
console.info("INFO FROM INDEX.HTML: cAudio element appended.", "color: green; font-size: 12px;");
}
};

window.peerConnection.addTransceiver('video', { direction: 'sendrecv' });
window.peerConnection.addTransceiver('audio', { direction: 'sendrecv' });

window.avatarSynthesizer = new SpeechSDK.AvatarSynthesizer(window.speechConfig, window.avatarConfig);

window.avatarSynthesizer.startAvatarAsync(window.peerConnection).then(
() =>  {
console.info("INFO FROM INDEX.HTML: Avatar started successfully.", "color: green; font-size: 14px;");
window.HybridWebView.InvokeDotNet('FinishInitializeAvatar');
// window.speak("Hello, this is a test message from your avatar.", "en");
}
).catch(
(error) => {
console.error("ERROR FROM INDEX.HTML: ERROR-IN-SCRIPT: Avatar failed to start. Error: " + error, "color: red; font-size: 16px;");
}
);
}
< /code>
und schließlich. Dies ist der Code, den ich aufrufe, um die Rede auszuführen: < /p>
window.speak = (textToSpeech, detectedLanguage) => {
const audioElement = document.getElementById('audio');

if (audioElement) {
audioElement.muted = false;
}
const videoElement = document.getElementById('video');

if (videoElement) {
videoElement.muted = false;
}
window.audioElement.muted = false;
window.remoteVideoDiv.muted = false;
let myMap = new Map([["de", "de-DE"], ["en", "en-GB"], ["fr", "fr-FR"], ["es", "es-ES"], ["pl", "pl-PL"], ["pt", "pt-PT"], ["tr", "tr-TR"], ["nl", "nl-NL"]]);
let language = myMap.get(detectedLanguage);

let spokenText = textToSpeech;
let spokenSsml = `


${htmlEncode(spokenText)}


`;

return window.avatarSynthesizer.speakSsmlAsync(spokenSsml).then(
(result) => {
if (result.reason === SpeechSDK.ResultReason.SynthesizingAudioCompleted) {
console.log("INFO FROM INDEX.HTML: Speech synthesized successfully with text " + spokenText, "color: green; font-size: 12px;");
return "success";
}
return "failed";
})
.catch((error) => {
console.log("ERROR FROM INDEX.HTML: ERROR-IN-SCRIPT: Failed to synthesize speech. Error: " + error, "color: red; font-size: 16px;");
//let jsonObject = JSON.stringify("failed");
//return jsonObject;
return "failed";
});
}
< /code>
Dies funktioniert alles gut. Ich kann den Avatar sehen. Ich sehe, dass der Avatar spricht (Lippen bewegt sich usw.).
Aber ich höre kein Audio! Ich habe Android-Berechtigungen getestet, die so aussehen: < /p>











< /code>
Ich habe Headsets geändert, Geräte geändert, der Android -Emulator sowie reale Geräte (Pixel 8) geändert. >
const audioElement = document.getElementById('audio');

if (audioElement) {
audioElement.muted = false;
}
const videoElement = document.getElementById('video');

if (videoElement) {
videoElement.muted = false;
}
window.audioElement.muted = false;
window.remoteVideoDiv.muted = false;