From cc5adb50f02c168507e121579e73cc19d91c5f3c Mon Sep 17 00:00:00 2001
From: Ely Ronnen <elyronnen@gmail.com>
Date: Sun, 20 Aug 2023 20:53:49 +0300
Subject: [PATCH 1/2] GetDisplayMedia demo: make start button switch to stop
 button once screen sharing started in order to demonstrate stopping screen
 share from javascript

---
 .../getusermedia/getdisplaymedia/js/main.js   | 35 ++++++++++++-------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/content/getusermedia/getdisplaymedia/js/main.js b/src/content/getusermedia/getdisplaymedia/js/main.js
index 4f90d195e6..69caac5950 100644
--- a/src/content/getusermedia/getdisplaymedia/js/main.js
+++ b/src/content/getusermedia/getdisplaymedia/js/main.js
@@ -8,7 +8,8 @@
 'use strict';
 
 const preferredDisplaySurface = document.getElementById('displaySurface');
-const startButton = document.getElementById('startButton');
+const startStopButton = document.getElementById('startButton');
+const videoElement = document.querySelector('video');
 
 if (adapter.browserDetails.browser === 'chrome' &&
     adapter.browserDetails.version >= 107) {
@@ -21,16 +22,15 @@ if (adapter.browserDetails.browser === 'chrome' &&
 }
 
 function handleSuccess(stream) {
-  startButton.disabled = true;
+  startStopButton.textContent = 'Stop';
   preferredDisplaySurface.disabled = true;
-  const video = document.querySelector('video');
-  video.srcObject = stream;
+  videoElement.srcObject = stream;
 
   // demonstrates how to detect that the user has stopped
   // sharing the screen via the browser UI.
   stream.getVideoTracks()[0].addEventListener('ended', () => {
     errorMsg('The user has ended sharing the screen');
-    startButton.disabled = false;
+    startStopButton.textContent = 'Start';
     preferredDisplaySurface.disabled = false;
   });
 }
@@ -48,18 +48,27 @@ function errorMsg(msg, error) {
 }
 
 
-startButton.addEventListener('click', () => {
-  const options = {audio: true, video: true};
-  const displaySurface = preferredDisplaySurface.options[preferredDisplaySurface.selectedIndex].value;
-  if (displaySurface !== 'default') {
-    options.video = {displaySurface};
+startStopButton.addEventListener('click', () => {
+  if (startStopButton.textContent === 'Start') {
+    const options = {audio: true, video: true};
+    const displaySurface = preferredDisplaySurface.options[preferredDisplaySurface.selectedIndex].value;
+    if (displaySurface !== 'default') {
+      options.video = {displaySurface};
+    }
+    navigator.mediaDevices.getDisplayMedia(options)
+        .then(handleSuccess, handleError);
+  }
+  else {
+    // demonstrates how to stop the stream from JavaScript
+    errorMsg('JavaScript has ended sharing the screen');
+    videoElement.srcObject.getTracks().forEach(track => track.stop());
+    videoElement.srcObject = null;
+    startStopButton.textContent = 'Start';
   }
-  navigator.mediaDevices.getDisplayMedia(options)
-      .then(handleSuccess, handleError);
 });
 
 if ((navigator.mediaDevices && 'getDisplayMedia' in navigator.mediaDevices)) {
-  startButton.disabled = false;
+  startStopButton.disabled = false;
 } else {
   errorMsg('getDisplayMedia is not supported');
 }

From 00c3b807edd1e247dde644e60a0b902cfd919b57 Mon Sep 17 00:00:00 2001
From: Ely Ronnen <elyronnen@gmail.com>
Date: Thu, 5 Oct 2023 14:50:53 +0300
Subject: [PATCH 2/2] use displayMediaStarted boolean

---
 src/content/getusermedia/getdisplaymedia/js/main.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/content/getusermedia/getdisplaymedia/js/main.js b/src/content/getusermedia/getdisplaymedia/js/main.js
index 69caac5950..8bb45cca55 100644
--- a/src/content/getusermedia/getdisplaymedia/js/main.js
+++ b/src/content/getusermedia/getdisplaymedia/js/main.js
@@ -10,6 +10,7 @@
 const preferredDisplaySurface = document.getElementById('displaySurface');
 const startStopButton = document.getElementById('startButton');
 const videoElement = document.querySelector('video');
+let displayMediaStarted = false;
 
 if (adapter.browserDetails.browser === 'chrome' &&
     adapter.browserDetails.version >= 107) {
@@ -22,6 +23,7 @@ if (adapter.browserDetails.browser === 'chrome' &&
 }
 
 function handleSuccess(stream) {
+  displayMediaStarted = true;
   startStopButton.textContent = 'Stop';
   preferredDisplaySurface.disabled = true;
   videoElement.srcObject = stream;
@@ -49,7 +51,7 @@ function errorMsg(msg, error) {
 
 
 startStopButton.addEventListener('click', () => {
-  if (startStopButton.textContent === 'Start') {
+  if (!displayMediaStarted) {
     const options = {audio: true, video: true};
     const displaySurface = preferredDisplaySurface.options[preferredDisplaySurface.selectedIndex].value;
     if (displaySurface !== 'default') {
@@ -64,6 +66,7 @@ startStopButton.addEventListener('click', () => {
     videoElement.srcObject.getTracks().forEach(track => track.stop());
     videoElement.srcObject = null;
     startStopButton.textContent = 'Start';
+    displayMediaStarted = false;
   }
 });