Render canvas several times

Sometimes Chromium does not render one or more frames to the stream
captured from a canvas, so the canvas is now rendered several times and
for a longer period to try to avoid that issue.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

2 files changed, 16 insertions, 2 deletions

diff --git a/src/utils/media/pipeline/BlackVideoEnforcer.js b/src/utils/media/pipeline/BlackVideoEnforcer.js
index eeb2f781a..76dcd3af8 100644
--- a/src/utils/media/pipeline/BlackVideoEnforcer.js
+++ b/src/utils/media/pipeline/BlackVideoEnforcer.js
@@ -121,19 +121,29 @@ export default class BlackVideoEnforcer extends TrackSinkSource {
 		outputCanvasContext.fillStyle = 'black'
 		outputCanvasContext.fillRect(0, 0, outputCanvasElement.width, outputCanvasElement.height)
 
+		// Sometimes Chromium does not render one or more frames to the stream
+		// captured from a canvas, so repeat the drawing several times for
+		// several seconds to work around that.
+		this._renderInterval = setInterval(() => {
+			outputCanvasContext.fillRect(0, 0, outputCanvasElement.width, outputCanvasElement.height)
+		}, 100)
+
 		this._setOutputTrack('default', this._outputStream.getVideoTracks()[0])
 
 		this._disableOrRemoveOutputTrackTimeout = setTimeout(() => {
 			clearTimeout(this._disableOrRemoveOutputTrackTimeout)
 			this._disableOrRemoveOutputTrackTimeout = null
 
+			clearInterval(this._renderInterval)
+			this._renderInterval = null
+
 			if (this.getInputTrack()) {
 				this._setOutputTrackEnabled('default', false)
 			} else {
 				this._stopBlackVideo()
 				this._setOutputTrack('default', null)
 			}
-		}, 1000)
+		}, 5000)
 	}
 
 	_stopBlackVideo() {
@@ -144,6 +154,9 @@ export default class BlackVideoEnforcer extends TrackSinkSource {
 		clearTimeout(this._disableOrRemoveOutputTrackTimeout)
 		this._disableOrRemoveOutputTrackTimeout = null
 
+		clearInterval(this._renderInterval)
+		this._renderInterval = null
+
 		this._outputStream.getTracks().forEach(track => {
 			this._disableRemoveTrackWhenEnded(track)
 
diff --git a/src/utils/media/pipeline/BlackVideoEnforcer.spec.js b/src/utils/media/pipeline/BlackVideoEnforcer.spec.js
index 1a83426ce..70c20f1da 100644
--- a/src/utils/media/pipeline/BlackVideoEnforcer.spec.js
+++ b/src/utils/media/pipeline/BlackVideoEnforcer.spec.js
@@ -135,13 +135,14 @@ describe('BlackVideoEnforcer', () => {
 
 	afterEach(() => {
 		clearTimeout(blackVideoEnforcer._disableOrRemoveOutputTrackTimeout)
+		clearInterval(blackVideoEnforcer._renderInterval)
 	})
 
 	afterAll(() => {
 		jest.restoreAllMocks()
 	})
 
-	const DISABLE_OR_REMOVE_TIMEOUT = 1000
+	const DISABLE_OR_REMOVE_TIMEOUT = 5000
 
 	const STOPPED = true