feat: option to disable video completely

Partially addresses
#31.

This is for Delta Touch (Ubuntu Touch),
where incoming video seems to cause crashes.

Note that if one party didn't `disableVideoCompletely`,
they will still be able to send outgoing video,
but the other party (who has `disableVideoCompletely`)
will not see it.

Author: WofWca

README.md

@@ -25,6 +25,10 @@ In order to start the app in audio-only mode initially,
 provide `noOutgoingVideoInitially` in the query (search) string
 of the initial URL, e.g. `/index.html?noOutgoingVideoInitially#startCall`.
 
+In order to completely disable incoming and outgoing video,
+provide `disableVideoCompletely` in the query string of the URL.
+See <https://github.com/deltachat/calls-webapp/issues/31>.
+
 ## Contributing
 
 ### Installing Dependencies

src/App.tsx

@@ -20,6 +20,14 @@ export default function App() {
   const outVidRef = useRef<HTMLVideoElement | null>(null);
   const incVidRef = useRef<HTMLVideoElement | null>(null);
 
+  const disableVideoCompletelyRef = useRef<boolean | null>(null);
+  if (disableVideoCompletelyRef.current == null) {
+    disableVideoCompletelyRef.current = location.search.includes(
+      "disableVideoCompletely",
+    );
+  }
+  const disableVideoCompletely = disableVideoCompletelyRef.current;
+
   const enableVideoInitiallyRef = useRef<boolean | null>(null);
   if (enableVideoInitiallyRef.current == null) {
     enableVideoInitiallyRef.current = !location.search.includes(
@@ -29,8 +37,9 @@ export default function App() {
   const enableVideoInitially = enableVideoInitiallyRef.current;
 
   const [isOutAudioEnabled, setIsOutAudioEnabled] = useState(true);
-  const [isOutVideoEnabled, setIsOutVideoEnabled] =
+  const [isOutVideoEnabled_, setIsOutVideoEnabled] =
     useState(enableVideoInitially);
+  const isOutVideoEnabled = disableVideoCompletely ? false : isOutVideoEnabled_;
   const isOutAudioEnabledRef = useRef(isOutAudioEnabled);
   isOutAudioEnabledRef.current = isOutAudioEnabled;
   const isOutVideoEnabledRef = useRef(isOutVideoEnabled);
@@ -40,7 +49,7 @@ export default function App() {
     let stream: MediaStream;
     try {
       stream = await navigator.mediaDevices.getUserMedia({
-        video: true,
+        video: !disableVideoCompletely,
         audio: true,
       });
     } catch (error) {
@@ -61,7 +70,7 @@ export default function App() {
       .forEach((t) => (t.enabled = isOutVideoEnabledRef.current));
 
     return stream;
-  }, []);
+  }, [disableVideoCompletely]);
   const [outStream, setOutStream] = useState<MediaStream | null>(null);
   useEffect(() => {
     let outdated = false;
@@ -84,10 +93,13 @@ export default function App() {
 
   const manager = useMemo(() => {
     const onIncStream = (incStream: MediaStream) => {
+      if (disableVideoCompletely) {
+        incStream.getVideoTracks().forEach((t) => incStream.removeTrack(t));
+      }
       incVidRef.current!.srcObject = incStream;
     };
     return new CallsManager(outStreamPromise, onIncStream, setState);
-  }, [outStreamPromise]);
+  }, [outStreamPromise, disableVideoCompletely]);
 
   useEffect(() => {
     if (outStream == undefined) {
@@ -113,7 +125,8 @@ export default function App() {
   }, [outStream, isOutAudioEnabled, isOutVideoEnabled]);
 
   const outStreamHasVideoTrack =
-    outStream == undefined || outStream.getVideoTracks().length >= 1;
+    !disableVideoCompletely &&
+    (outStream == undefined || outStream.getVideoTracks().length >= 1);
 
   const endCall = useCallback(() => {
     manager.endCall();