Add option to keep last frame when pause a video tile (#1872)

* Add option to keep last frame when pause a video tile * Move setting to meetingConfig
aws · Dec 13, 2021 · 3002fd7 · 3002fd7
1 parent 7db9183
commit 3002fd7
Show file tree

Hide file tree

Showing 16 changed files with 3,574 additions and 3,398 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,8 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 ### Added
-- Add `supportDownlinkBandwidthEstimation` API to check whether the browser support downlink bandwidth estimation 
+- Add `supportDownlinkBandwidthEstimation` API to check whether browsers support downlink bandwidth estimation 
   which requires for priority based downlink policy to work.
+- Add `keepLastFrameWhenPaused` in `DefaultVideoTile` as an option to keep last frame when pausing a video tile.
 
 ### Removed
 

diff --git a/demos/browser/app/meetingV2/meetingV2.html b/demos/browser/app/meetingV2/meetingV2.html
@@ -105,6 +105,10 @@ <h1 class="h3 mb-3 font-weight-normal">Join a meeting</h1>
               <input type="checkbox" checked id="preconnect" class="custom-control-input">
               <label for="preconnect" class="custom-control-label">Open signaling connection early</label>
             </div>
+            <div class="custom-control custom-checkbox" style="text-align: left;">
+              <input type="checkbox" id="pause-last-frame" class="custom-control-input">
+              <label for="pause-last-frame" class="custom-control-label">Keep Video Last Frame When Paused</label>
+            </div>
             <div class="custom-control custom-checkbox" style="text-align: left;">
               <input type="checkbox" id="event-reporting" class="custom-control-input">
               <label for="event-reporting" class="custom-control-label">Enable event reporting</label>

diff --git a/demos/browser/app/meetingV2/meetingV2.ts b/demos/browser/app/meetingV2/meetingV2.ts
@@ -1555,6 +1555,11 @@ export class DemoMeetingApp
       this.priorityBasedDownlinkPolicy.addObserver(this);
     }
     configuration.applicationMetadata = ApplicationMetadata.create('amazon-chime-sdk-js-demo', '2.0.0');
+
+    if ((document.getElementById('pause-last-frame') as HTMLInputElement).checked) {
+      configuration.keepLastFrameWhenPaused = true;
+    }
+
     this.meetingSession = new DefaultMeetingSession(
       configuration,
       this.meetingLogger,
@@ -1639,7 +1644,6 @@ export class DemoMeetingApp
     window.addEventListener('unhandledrejection', (event: PromiseRejectionEvent) => {
       this.log(event.reason);
     });
-
     this.audioVideo.start();
   }
 

diff --git a/demos/browser/app/meetingV2/styleV2.scss b/demos/browser/app/meetingV2/styleV2.scss
@@ -497,7 +497,7 @@ svg {
     margin-left: 0;
     margin-top: 0;
   }
-  
+
   #video-preview  {
     max-height: 300px;
   }
@@ -920,6 +920,10 @@ a.markdown:active {
   display: block;
 }
 
+.video-tile-pause-state {
+  position: absolute;
+}
+
 .vf-active::before {
   content: "✓ "
 }

diff --git a/docs/assets/js/search.json b/docs/assets/js/search.json
diff --git a/docs/classes/defaultvideotile.html b/docs/classes/defaultvideotile.html
@@ -126,7 +126,7 @@ <h3>constructor</h3>
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L111">src/videotile/DefaultVideoTile.ts:111</a></li>
+									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L129">src/videotile/DefaultVideoTile.ts:129</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-parameters-title">Parameters</h4>
@@ -162,7 +162,7 @@ <h3>bind<wbr>Video<wbr>Element</h3>
 							<aside class="tsd-sources">
 								<p>Implementation of <a href="../interfaces/videotile.html">VideoTile</a>.<a href="../interfaces/videotile.html#bindvideoelement">bindVideoElement</a></p>
 								<ul>
-									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L201">src/videotile/DefaultVideoTile.ts:201</a></li>
+									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L219">src/videotile/DefaultVideoTile.ts:219</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-parameters-title">Parameters</h4>
@@ -186,7 +186,7 @@ <h3>bind<wbr>Video<wbr>Stream</h3>
 							<aside class="tsd-sources">
 								<p>Implementation of <a href="../interfaces/videotile.html">VideoTile</a>.<a href="../interfaces/videotile.html#bindvideostream">bindVideoStream</a></p>
 								<ul>
-									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L155">src/videotile/DefaultVideoTile.ts:155</a></li>
+									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L173">src/videotile/DefaultVideoTile.ts:173</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-parameters-title">Parameters</h4>
@@ -228,7 +228,7 @@ <h3>capture</h3>
 							<aside class="tsd-sources">
 								<p>Implementation of <a href="../interfaces/videotile.html">VideoTile</a>.<a href="../interfaces/videotile.html#capture">capture</a></p>
 								<ul>
-									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L257">src/videotile/DefaultVideoTile.ts:257</a></li>
+									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L275">src/videotile/DefaultVideoTile.ts:275</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">ImageData</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h4>
@@ -246,7 +246,7 @@ <h3>destroy</h3>
 							<aside class="tsd-sources">
 								<p>Implementation of <a href="../interfaces/videotile.html">VideoTile</a>.<a href="../interfaces/videotile.html#destroy">destroy</a></p>
 								<ul>
-									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L124">src/videotile/DefaultVideoTile.ts:124</a></li>
+									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L142">src/videotile/DefaultVideoTile.ts:142</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
@@ -264,7 +264,7 @@ <h3>device<wbr>Pixel<wbr>Ratio<wbr>Changed</h3>
 							<aside class="tsd-sources">
 								<p>Implementation of <a href="../interfaces/devicepixelratioobserver.html">DevicePixelRatioObserver</a>.<a href="../interfaces/devicepixelratioobserver.html#devicepixelratiochanged">devicePixelRatioChanged</a></p>
 								<ul>
-									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L138">src/videotile/DefaultVideoTile.ts:138</a></li>
+									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L156">src/videotile/DefaultVideoTile.ts:156</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-parameters-title">Parameters</h4>
@@ -288,7 +288,7 @@ <h3>id</h3>
 							<aside class="tsd-sources">
 								<p>Implementation of <a href="../interfaces/videotile.html">VideoTile</a>.<a href="../interfaces/videotile.html#id">id</a></p>
 								<ul>
-									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L143">src/videotile/DefaultVideoTile.ts:143</a></li>
+									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L161">src/videotile/DefaultVideoTile.ts:161</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4>
@@ -306,7 +306,7 @@ <h3>mark<wbr>Poor<wbr>Connection</h3>
 							<aside class="tsd-sources">
 								<p>Implementation of <a href="../interfaces/videotile.html">VideoTile</a>.<a href="../interfaces/videotile.html#markpoorconnection">markPoorConnection</a></p>
 								<ul>
-									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L239">src/videotile/DefaultVideoTile.ts:239</a></li>
+									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L257">src/videotile/DefaultVideoTile.ts:257</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4>
@@ -324,7 +324,7 @@ <h3>pause</h3>
 							<aside class="tsd-sources">
 								<p>Implementation of <a href="../interfaces/videotile.html">VideoTile</a>.<a href="../interfaces/videotile.html#pause">pause</a></p>
 								<ul>
-									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L225">src/videotile/DefaultVideoTile.ts:225</a></li>
+									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L243">src/videotile/DefaultVideoTile.ts:243</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
@@ -342,7 +342,7 @@ <h3>set<wbr>Stream<wbr>Id</h3>
 							<aside class="tsd-sources">
 								<p>Implementation of <a href="../interfaces/videotile.html">VideoTile</a>.<a href="../interfaces/videotile.html#setstreamid">setStreamId</a></p>
 								<ul>
-									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L270">src/videotile/DefaultVideoTile.ts:270</a></li>
+									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L288">src/videotile/DefaultVideoTile.ts:288</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-parameters-title">Parameters</h4>
@@ -366,7 +366,7 @@ <h3>state</h3>
 							<aside class="tsd-sources">
 								<p>Implementation of <a href="../interfaces/videotile.html">VideoTile</a>.<a href="../interfaces/videotile.html#state">state</a></p>
 								<ul>
-									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L147">src/videotile/DefaultVideoTile.ts:147</a></li>
+									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L165">src/videotile/DefaultVideoTile.ts:165</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-returns-title">Returns <a href="videotilestate.html" class="tsd-signature-type">VideoTileState</a></h4>
@@ -384,7 +384,7 @@ <h3>state<wbr>Ref</h3>
 							<aside class="tsd-sources">
 								<p>Implementation of <a href="../interfaces/videotile.html">VideoTile</a>.<a href="../interfaces/videotile.html#stateref">stateRef</a></p>
 								<ul>
-									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L151">src/videotile/DefaultVideoTile.ts:151</a></li>
+									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L169">src/videotile/DefaultVideoTile.ts:169</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-returns-title">Returns <a href="videotilestate.html" class="tsd-signature-type">VideoTileState</a></h4>
@@ -402,7 +402,7 @@ <h3>unmark<wbr>Poor<wbr>Connection</h3>
 							<aside class="tsd-sources">
 								<p>Implementation of <a href="../interfaces/videotile.html">VideoTile</a>.<a href="../interfaces/videotile.html#unmarkpoorconnection">unmarkPoorConnection</a></p>
 								<ul>
-									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L248">src/videotile/DefaultVideoTile.ts:248</a></li>
+									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L266">src/videotile/DefaultVideoTile.ts:266</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4>
@@ -420,7 +420,7 @@ <h3>unpause</h3>
 							<aside class="tsd-sources">
 								<p>Implementation of <a href="../interfaces/videotile.html">VideoTile</a>.<a href="../interfaces/videotile.html#unpause">unpause</a></p>
 								<ul>
-									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L232">src/videotile/DefaultVideoTile.ts:232</a></li>
+									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L250">src/videotile/DefaultVideoTile.ts:250</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
@@ -437,19 +437,33 @@ <h3><span class="tsd-flag ts-flagStatic">Static</span> connect<wbr>Video<wbr>Str
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L16">src/videotile/DefaultVideoTile.ts:16</a></li>
+									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L22">src/videotile/DefaultVideoTile.ts:22</a></li>
 								</ul>
 							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Connect a video stream to a video element by setting the srcObject of the video element to the video stream.</p>
+								</div>
+							</div>
 							<h4 class="tsd-parameters-title">Parameters</h4>
 							<ul class="tsd-parameters">
 								<li>
 									<h5>videoStream: <span class="tsd-signature-type">MediaStream</span></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>The video stream input.</p>
+									</div>
 								</li>
 								<li>
 									<h5>videoElement: <span class="tsd-signature-type">HTMLVideoElement</span></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>The video element input.</p>
+									</div>
 								</li>
 								<li>
 									<h5>localTile: <span class="tsd-signature-type">boolean</span></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>Flag to indicate whether this is a local video.</p>
+									</div>
 								</li>
 							</ul>
 							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
@@ -460,22 +474,42 @@ <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</spa
 					<a name="disconnectvideostreamfromvideoelement" class="tsd-anchor"></a>
 					<h3><span class="tsd-flag ts-flagStatic">Static</span> disconnect<wbr>Video<wbr>Stream<wbr>From<wbr>Video<wbr>Element</h3>
 					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static">
-						<li class="tsd-signature tsd-kind-icon">disconnect<wbr>Video<wbr>Stream<wbr>From<wbr>Video<wbr>Element<span class="tsd-signature-symbol">(</span>videoElement<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLVideoElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span>, dueToPause<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
+						<li class="tsd-signature tsd-kind-icon">disconnect<wbr>Video<wbr>Stream<wbr>From<wbr>Video<wbr>Element<span class="tsd-signature-symbol">(</span>videoElement<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLVideoElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span>, dueToPause<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span>, keepLastFrameWhenPaused<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 					</ul>
 					<ul class="tsd-descriptions">
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L68">src/videotile/DefaultVideoTile.ts:68</a></li>
+									<li>Defined in <a href="https://github.com/aws/amazon-chime-sdk-js/blob/master/src/videotile/DefaultVideoTile.ts#L83">src/videotile/DefaultVideoTile.ts:83</a></li>
 								</ul>
 							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Disconnect a video stream to a video element by clearing the srcObject of the video element.
+									This will also stop all the tracks of the current stream in the srcObject.</p>
+								</div>
+							</div>
 							<h4 class="tsd-parameters-title">Parameters</h4>
 							<ul class="tsd-parameters">
 								<li>
 									<h5>videoElement: <span class="tsd-signature-type">HTMLVideoElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>The video element input.</p>
+									</div>
 								</li>
 								<li>
 									<h5>dueToPause: <span class="tsd-signature-type">boolean</span></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>A flag to indicate whether this function is called due to pausing video tile.
+										If true, then we will not stop the stream&#39;s tracks and just clearing out the srcObject.</p>
+									</div>
+								</li>
+								<li>
+									<h5><span class="tsd-flag ts-flagDefault value">Default value</span> keepLastFrameWhenPaused: <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">undefined</span><span class="tsd-signature-symbol"> = false</span></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>If true and dueToPause is also true, then we will not clear out the srcObject of the
+										video element when it is paused and therefore, the last frame of the stream will be shown.</p>
+									</div>
 								</li>
 							</ul>
 							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>