From 61db96accbe4ae4eea011de3695e4dccf3b22df2 Mon Sep 17 00:00:00 2001 From: Todd Anderson Date: Tue, 7 Oct 2025 10:43:04 -0400 Subject: [PATCH 1/2] fix: nicer messaging on mobile for screenshare. Fixes RED5DEV-1796. --- package-lock.json | 4 ++-- .../index.html | 6 +++++ .../index.js | 22 +++++++++++++++++-- src/page/test/publishScreenShare/index.html | 6 +++++ src/page/test/publishScreenShare/index.js | 22 +++++++++++++++++-- static/script/red5pro-utils.js | 20 +++++++++++++++++ 6 files changed, 74 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index ddc8695f6..4330c856d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "red5pro-html-sdk-testbed", - "version": "20.0.0", + "version": "15.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "red5pro-html-sdk-testbed", - "version": "20.0.0", + "version": "15.0.0", "license": "LICENSE", "dependencies": { "@babel/core": "^7.17.4" diff --git a/src/page/sm-test/publishStreamManagerProxyScreenShare/index.html b/src/page/sm-test/publishStreamManagerProxyScreenShare/index.html index e850c4381..f78330652 100644 --- a/src/page/sm-test/publishStreamManagerProxyScreenShare/index.html +++ b/src/page/sm-test/publishStreamManagerProxyScreenShare/index.html @@ -21,6 +21,12 @@ margin: 0!important; } + + {{> top-bar }} diff --git a/src/page/sm-test/publishStreamManagerProxyScreenShare/index.js b/src/page/sm-test/publishStreamManagerProxyScreenShare/index.js index ea6538a19..bc09174d0 100644 --- a/src/page/sm-test/publishStreamManagerProxyScreenShare/index.js +++ b/src/page/sm-test/publishStreamManagerProxyScreenShare/index.js @@ -23,7 +23,7 @@ NONINFRINGEMENT. IN NO EVENT SHALL INFRARED5, INC. BE LIABLE FOR ANY CLAIM, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -;(function (window, document, red5prosdk) { +;(function (window, document, red5prosdk, showModal) { 'use strict' var configuration = (function () { @@ -211,6 +211,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. data: error.message, }) } + return null } const getConfiguration = () => { @@ -265,6 +266,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. publisher.on('*', onPublisherEvent) await publisher.initWithStream(config, stream) await publisher.publish() + const [videoTrack] = stream.getVideoTracks() + videoTrack.onended = async () => { + if (targetPublisher) { + unpublish(targetPublisher) + } + } onPublishSuccess(publisher) streamTitle.innerText = stream1 targetPublisher = publisher @@ -301,6 +308,17 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. const startup = async () => { // Kick off. const stream = await capture() + if (!stream) { + var content = document.createElement('div') + content.style = 'text-align: center;' + content.innerHTML = ` +

Failed to capture screen share.

+
+

If on a Mobile browser, this capability is not available.

+ ` + showModal(content) + return + } await setupPublisher(stream) } @@ -322,4 +340,4 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. } window.addEventListener('pagehide', shutdown) window.addEventListener('beforeunload', shutdown) -})(this, document, window.red5prosdk) +})(this, document, window.red5prosdk, window.showModal) diff --git a/src/page/test/publishScreenShare/index.html b/src/page/test/publishScreenShare/index.html index d53e359cd..4e538c2eb 100644 --- a/src/page/test/publishScreenShare/index.html +++ b/src/page/test/publishScreenShare/index.html @@ -21,6 +21,12 @@ margin: 0!important; } + + {{> top-bar }} diff --git a/src/page/test/publishScreenShare/index.js b/src/page/test/publishScreenShare/index.js index 8c33b01e5..1f90ea61d 100644 --- a/src/page/test/publishScreenShare/index.js +++ b/src/page/test/publishScreenShare/index.js @@ -24,7 +24,7 @@ WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ // Chrome & Firefox -;(function (window, document, red5prosdk) { +;(function (window, document, red5prosdk, showModal) { 'use strict' var configuration = (function () { @@ -75,6 +75,17 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. captureButton.addEventListener('click', async () => { const stream = await capture() + if (!stream) { + var content = document.createElement('div') + content.style = 'text-align: center;' + content.innerHTML = ` +

Failed to capture screen share.

+
+

If on a Mobile browser, this capability is not available.

+ ` + showModal(content) + return + } setupPublisher(stream) }) @@ -201,6 +212,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. data: error.message, }) } + return null } function unpublish(publisher) { @@ -253,6 +265,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. return targetPublisher.publish() }) .then(function () { + const [videoTrack] = mediaStream.getVideoTracks() + videoTrack.onended = async () => { + if (targetPublisher) { + unpublish(targetPublisher) + } + } onPublishSuccess(targetPublisher) }) .catch(function (error) { @@ -285,4 +303,4 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. } window.addEventListener('pagehide', shutdown) window.addEventListener('beforeunload', shutdown) -})(this, document, window.red5prosdk) +})(this, document, window.red5prosdk, window.showModal) diff --git a/static/script/red5pro-utils.js b/static/script/red5pro-utils.js index fe0c683cc..c0238a8af 100644 --- a/static/script/red5pro-utils.js +++ b/static/script/red5pro-utils.js @@ -705,4 +705,24 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. window.exposeSubscriberGlobally = function (subscriber) { window.r5pro_subscriber = subscriber } + + window.showModal = (content) => { + const div = document.createElement('div'); + div.classList.add('modal'); + const container = document.createElement('div'); + const button = document.createElement('a'); + const close = document.createTextNode('close'); + button.href = "#"; + button.appendChild(close); + button.classList.add('modal-close'); + container.appendChild(button); + container.appendChild(content); + div.appendChild(container); + document.body.appendChild(div); + button.addEventListener('click', (event) => { + event.preventDefault(); + document.body.removeChild(div); + return false; + }); + } })(this) From 0b86b2f5d5340a760e9014130aebd038045a5bdf Mon Sep 17 00:00:00 2001 From: Todd Anderson Date: Tue, 7 Oct 2025 10:52:01 -0400 Subject: [PATCH 2/2] fix: black background on encrypted video display. Fixes RED5DEV-1798 --- src/page/sm-test/castlabsStreamManagerProxy/index.html | 1 + src/page/test/castlabs/index.html | 1 + 2 files changed, 2 insertions(+) diff --git a/src/page/sm-test/castlabsStreamManagerProxy/index.html b/src/page/sm-test/castlabsStreamManagerProxy/index.html index f44101abb..a2e96ad26 100644 --- a/src/page/sm-test/castlabsStreamManagerProxy/index.html +++ b/src/page/sm-test/castlabsStreamManagerProxy/index.html @@ -77,6 +77,7 @@

Encrypted Playback