fix: temporary fix to make things work

Author: technikhil314

.eslintrc.js

@@ -33,7 +33,7 @@ module.exports = {
   },
   rules: {
     "no-alert": 0,
-    "no-console": ["error", { allow: ["error", "info"] }],
+    "no-console": ["error", { allow: ["error", "info", "debug"] }],
     "react/prop-types": 0,
     "react/sort-prop-types": 0,
     "import/order": 0,
@@ -78,10 +78,5 @@ module.exports = {
       },
     },
   ],
-  ignorePatterns: [
-    "stories/**/*",
-    "node_modules/**/*",
-    "build/**/*",
-    "canvasjs.min.jsx",
-  ],
+  ignorePatterns: ["stories/**/*", "node_modules/**/*", "build/**/*", "canvasjs.min.jsx"],
 };

packages/frontend/components/vlogVideo.jsx

@@ -3,7 +3,6 @@ import * as tf from "@tensorflow/tfjs";
 import * as bodyPix from "@tensorflow-models/body-pix";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { classNames } from "../utils/classNames";
-import { userMediaConstraints } from "../utils/constants";
 import { loadBodyPix, readAsObjectURL, rgb2hsl } from "../utils/helpers";
 let backgroundBlurAmount = 6;
 let edgeBlurAmount = 0;
@@ -69,7 +68,7 @@ function VlogVideo({ isRecording, config }, ref) {
     let frame = ctx.getImageData(0, 0, canvasRef.current.width, canvasRef.current.height);
     let data = frame.data;
     let len = data.length;
-    for (let i = 0, j = 0; j < len; i++, j += 4) {
+    for (let j = 0; j < len; j += 4) {
       let hsl = rgb2hsl(data[j], data[j + 1], data[j + 2]);
       let h = hsl[0],
         s = hsl[1],
@@ -164,24 +163,11 @@ function VlogVideo({ isRecording, config }, ref) {
     (async () => {
       try {
         displayStream.current = await navigator.mediaDevices.getDisplayMedia({
-          video: {
-            width: globalThis.screen.width,
-            height: globalThis.screen.height,
-            displaySurface: {
-              exact: "monitor",
-            },
-          },
+          video: {},
         });
         let finalMediaConstraints = {
-          ...userMediaConstraints,
-          audio: {
-            ...userMediaConstraints.audio,
-            deviceId: { exact: config.audioDevice },
-          },
-          video: {
-            ...userMediaConstraints.video,
-            deviceId: { exact: config.videoDevice },
-          },
+          audio: {},
+          video: {},
         };
         if (isWithoutVideo) {
           delete finalMediaConstraints.video;

packages/frontend/hooks/useGetDevices.js

@@ -1,11 +1,13 @@
 import { useEffect, useState } from "react";
+import { debug } from "../utils/helpers";
 
 export default function useGetDevices() {
   let defaultDevices = {
     audio: [],
     video: [],
   };
   const [devices, setDevices] = useState(defaultDevices);
+  debug(devices);
   useEffect(() => {
     (async () => {
       if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
@@ -14,7 +16,7 @@ export default function useGetDevices() {
       try {
         const cameraPermission = await navigator.permissions.query({ name: "camera" });
         const micPermission = await navigator.permissions.query({ name: "microphone" });
-        //toggleLoader()
+        debug({ cameraPermission, micPermission });
         if (cameraPermission.state !== "granted" || micPermission.state !== "granted") {
           const stream = await navigator.mediaDevices.getUserMedia({
             video: true,

packages/frontend/pages/index.jsx

@@ -136,7 +136,7 @@ export default function Vlog() {
           <form className="w-full mx-auto md:w-1/4" onSubmit={handleFormSubmit}>
             {!initialState && (
               <>
-                {devices.audio.length ? (
+                {/* {devices.audio.length ? (
                   <div className="flex flex-col mb-2">
                     <label className="w-full font-semibold" htmlFor="audioDevice">
                       Select audio input
@@ -205,7 +205,7 @@ export default function Vlog() {
                   <label htmlFor="withoutVideo" className="font-semibold">
                     Without Video
                   </label>
-                </div>
+                </div> */}
                 <button
                   type="submit"
                   className="flex-grow-0 w-full px-4 py-2 mt-5 font-bold text-white transition bg-green-500 rounded hover:bg-green-700"

packages/frontend/utils/constants.js

@@ -5,11 +5,7 @@ export const text = {
 };
 
 export const userMediaConstraints = {
-  audio: {
-    echoCancellation: true,
-    noiseSuppression: true,
-    sampleRate: 44100,
-  },
+  audio: {},
   video: {},
 };
 

packages/frontend/utils/helpers.js

@@ -91,3 +91,9 @@ export function rgb2hsl(r, g, b) {
 
   return [h, s * 100, l * 100];
 }
+
+export function debug(...msg) {
+  if (process.env.NEXT_PUBLIC_DEBUG) {
+    console.debug(msg);
+  }
+}