[feat] enable audio stream autoplay
This commit is contained in:
@@ -81,6 +81,7 @@
|
|||||||
x5-video-player-fullscreen="true"
|
x5-video-player-fullscreen="true"
|
||||||
muted
|
muted
|
||||||
></video>
|
></video>
|
||||||
|
<audio id="audio" autoplay></audio>
|
||||||
|
|
||||||
<!-- Connecting overlay -->
|
<!-- Connecting overlay -->
|
||||||
<div id="connecting-overlay" class="connecting-overlay" style="display: none">
|
<div id="connecting-overlay" class="connecting-overlay" style="display: none">
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ const elements = {
|
|||||||
disconnectBtn: document.getElementById("disconnect"),
|
disconnectBtn: document.getElementById("disconnect"),
|
||||||
media: document.getElementById("media"),
|
media: document.getElementById("media"),
|
||||||
video: document.getElementById("video"),
|
video: document.getElementById("video"),
|
||||||
|
audio: document.getElementById("audio"),
|
||||||
connectionOverlay: document.getElementById("connection-overlay"),
|
connectionOverlay: document.getElementById("connection-overlay"),
|
||||||
connectedOverlay: document.getElementById("connected-overlay"),
|
connectedOverlay: document.getElementById("connected-overlay"),
|
||||||
connectedPanel: document.getElementById("connected-panel"),
|
connectedPanel: document.getElementById("connected-panel"),
|
||||||
@@ -220,6 +221,25 @@ function createPeerConnection() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
peer.ontrack = ({ track, streams }) => {
|
peer.ontrack = ({ track, streams }) => {
|
||||||
|
// Handle audio tracks
|
||||||
|
if (track.kind === "audio" && elements.audio) {
|
||||||
|
if (!elements.audio.srcObject) {
|
||||||
|
// First audio track: create new stream
|
||||||
|
const audioStream = streams && streams[0] ? streams[0] : new MediaStream([track]);
|
||||||
|
elements.audio.srcObject = audioStream;
|
||||||
|
elements.audio.autoplay = true;
|
||||||
|
// Try to play audio (may require user interaction)
|
||||||
|
elements.audio.play().catch(err => {
|
||||||
|
console.log("Audio autoplay prevented:", err);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Additional audio track: add to existing stream
|
||||||
|
elements.audio.srcObject.addTrack(track);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle video tracks
|
||||||
if (track.kind !== "video" || !elements.video) return;
|
if (track.kind !== "video" || !elements.video) return;
|
||||||
|
|
||||||
// Use track index as display_id (0, 1, 2, ...)
|
// Use track index as display_id (0, 1, 2, ...)
|
||||||
@@ -486,6 +506,11 @@ function teardownPeerConnection() {
|
|||||||
elements.video.srcObject.getTracks().forEach((track) => track.stop());
|
elements.video.srcObject.getTracks().forEach((track) => track.stop());
|
||||||
elements.video.srcObject = null;
|
elements.video.srcObject = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (elements.audio?.srcObject) {
|
||||||
|
elements.audio.srcObject.getTracks().forEach((track) => track.stop());
|
||||||
|
elements.audio.srcObject = null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateStatus(element, value) {
|
function updateStatus(element, value) {
|
||||||
|
|||||||
Reference in New Issue
Block a user