Adds a noAutoPlayVideo configuration option (used in testing). (#4714)

This adds an option to disable video autoplay that will be used mostly with maleus (our selenium-based load testing tool for testing the new bridge). Disabling video rendering lowers the resource utilisation of the selenium nodes.

config.js

@@ -60,6 +60,10 @@ var config = {
 
         // Enables the test specific features consumed by jitsi-meet-torture
         // testMode: false
+
+        // Disables the auto-play behavior of *all* newly created video element.
+        // This is useful when the client runs on a host with limited resources.
+        // noAutoPlayVideo: false
     },
 
     // Disables ICE/UDP by filtering out local and remote UDP candidates in

modules/UI/videolayout/LocalVideo.js

@@ -273,7 +273,7 @@ LocalVideo.prototype._updateVideoElement = function() {
     // case video does not autoplay.
     const video = this.container.querySelector('video');
 
-    video && video.play();
+    video && !config.testing?.noAutoPlayVideo && video.play();
 };
 
 export default LocalVideo;

modules/UI/videolayout/SmallVideo.js

@@ -199,7 +199,7 @@ SmallVideo.createStreamElement = function(stream) {
         element.muted = true;
     }
 
-    element.autoplay = true;
+    element.autoplay = !config.testing?.noAutoPlayVideo;
     element.id = SmallVideo.getStreamElementID(stream);
 
     return element;

react/features/base/media/components/web/Video.js

@@ -26,7 +26,13 @@ type Props = {
     /**
      * The JitsiLocalTrack to display.
      */
-    videoTrack: ?Object
+    videoTrack: ?Object,
+
+    /**
+     * Used to determine the value of the autoplay attribute of the underlying
+     * video element.
+     */
+    autoPlay: boolean
 };
 
 /**
@@ -44,7 +50,7 @@ class Video extends Component<Props> {
      */
     static defaultProps = {
         className: '',
-
+        autoPlay: true,
         id: ''
     };
 
@@ -131,7 +137,7 @@ class Video extends Component<Props> {
     render() {
         return (
             <video
-                autoPlay = { true }
+                autoPlay = { this.props.autoPlay }
                 className = { this.props.className }
                 id = { this.props.id }
                 ref = { this._setVideoElement } />

react/features/base/media/components/web/VideoTrack.js

@@ -23,7 +23,14 @@ type Props = AbstractVideoTrackProps & {
      * The value of the id attribute of the video. Used by the torture tests
      * to locate video elements.
      */
-    id: string
+    id: string,
+
+    /**
+     *
+     * Used to determine the value of the autoplay attribute of the underlying
+     * video element.
+     */
+    _noAutoPlayVideo: boolean
 };
 
 /**
@@ -53,7 +60,7 @@ class VideoTrack extends AbstractVideoTrack<Props> {
     render() {
         return (
             <Video
-                autoPlay = { true }
+                autoPlay = { !this.props._noAutoPlayVideo }
                 className = { this.props.className }
                 id = { this.props.id }
                 onVideoPlaying = { this._onVideoPlaying }
@@ -64,4 +71,22 @@ class VideoTrack extends AbstractVideoTrack<Props> {
     _onVideoPlaying: () => void;
 }
 
-export default connect()(VideoTrack);
+
+/**
+ * Maps (parts of) the Redux state to the associated VideoTracks props.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{
+ *     _noAutoPlayVideo: boolean
+ * }}
+ */
+function _mapStateToProps(state) {
+    const testingConfig = state['features/base/config'].testing;
+
+    return {
+        _noAutoPlayVideo: testingConfig?.noAutoPlayVideo
+    };
+}
+
+export default connect(_mapStateToProps)(VideoTrack);

react/features/large-video/components/LargeVideo.web.js

@@ -4,16 +4,26 @@ import React, { Component } from 'react';
 
 import { Watermarks } from '../../base/react';
 import { Captions } from '../../subtitles/';
+import { connect } from '../../base/redux';
 
 declare var interfaceConfig: Object;
 
+type Props = {
+
+    /**
+     * Used to determine the value of the autoplay attribute of the underlying
+     * video element.
+     */
+    _noAutoPlayVideo: boolean
+}
+
 /**
  * Implements a React {@link Component} which represents the large video (a.k.a.
  * the conference participant who is on the local stage) on Web/React.
  *
  * @extends Component
  */
-export default class LargeVideo extends Component<{}> {
+class LargeVideo extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -51,7 +61,7 @@ export default class LargeVideo extends Component<{}> {
                       */}
                     <div id = 'largeVideoWrapper'>
                         <video
-                            autoPlay = { true }
+                            autoPlay = { !this.props._noAutoPlayVideo }
                             id = 'largeVideo'
                             muted = { true } />
                     </div>
@@ -63,3 +73,24 @@ export default class LargeVideo extends Component<{}> {
         );
     }
 }
+
+
+/**
+ * Maps (parts of) the Redux state to the associated LargeVideo props.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{
+ *     _noAutoPlayVideo: boolean
+ * }}
+ */
+function _mapStateToProps(state) {
+    const testingConfig = state['features/base/config'].testing;
+
+    return {
+        _noAutoPlayVideo: testingConfig?.noAutoPlayVideo
+    };
+}
+
+
+export default connect(_mapStateToProps)(LargeVideo);