diff --git a/bigbluebutton-html5/public/compatibility/sip.js b/bigbluebutton-html5/public/compatibility/sip.js index c898a47e6e407c8171a4da7aefde347f9a9db1d1..73beb201d8079d9c580e19fa760618554af69592 100755 --- a/bigbluebutton-html5/public/compatibility/sip.js +++ b/bigbluebutton-html5/public/compatibility/sip.js @@ -11755,15 +11755,51 @@ MediaStreamManager.render = function render (streams, elements) { } function ensureMediaPlaying (mediaElement) { - var interval = 100; - mediaElement.ensurePlayingIntervalId = SIP.Timers.setInterval(function () { - if (mediaElement.paused && mediaElement.srcObject) { - mediaElement.play(); - } - else { - SIP.Timers.clearInterval(mediaElement.ensurePlayingIntervalId); - } - }, interval); + let startPlayPromise = mediaElement.play(); + + if (startPlayPromise !== undefined) { + startPlayPromise.then(() => { + // Start whatever you need to do only after playback + // has begun. + }).catch(error => { + if (error.name === "NotAllowedError") { + var savedStyle = document.getElementById("app").style; + document.getElementById("app").style = "display: none"; + document.body.style = "display: flex; align-items: center; width: 100%; justify-content: center"; + var promptDiv = document.createElement("DIV"); + promptDiv.style = "font-size: 1.5rem; display: flex; align-items: center; flex-direction: column; margin: 0.25rem"; + var promptLabel = document.createElement("DIV"); + promptLabel.innerHTML = "We need your approval to play the audio"; + promptLabel.style = "color: var(--color-off-white); margin: 0.25rem"; + promptDiv.appendChild(promptLabel); + var playButton = document.createElement("BUTTON"); + playButton.innerHTML = "Play"; + playButton.style = "background-color: var(--color-primary); color: var(--color-off-white); border-radius: 4px; border: none; padding: 4px 8px; margin: 0.25rem;"; + playButton.onclick = () => { + mediaElement.play(); + document.body.style = undefined; + document.getElementById("app").style = savedStyle; + document.body.removeChild(promptDiv); + window.dispatchEvent(new Event('resize')); + } + promptDiv.appendChild(playButton); + document.body.appendChild(promptDiv) + } else { + // Handle a load or playback error + } + }); + } else { + var interval = 100; + mediaElement.ensurePlayingIntervalId = SIP.Timers.setInterval(function () { + if (mediaElement.paused && mediaElement.srcObject) { + mediaElement.play(); + } + else { + SIP.Timers.clearInterval(mediaElement.ensurePlayingIntervalId); + } + }, interval); + } + } function attachAndPlay (elements, stream, index) {