Is my webcam stream invisible because of codec?

Question

Is my webcam stream invisible because of codec?

143 Views Asked by Tsu'Na At 04 May 2023 at 14:21

I've to disp on a webpage the user webcam. I've a "working" html page, as it do not give errors. unfortunately, the video of the camera is invisible. It's here, as I see with elements inspection tool (F12) : it highlight a rectangle where the video should be, but there is nothing visible. Here is the code :

<html lang="fr">
    <head>
    </head>

    <body">
        <main>
            <video style="background-color: blue;" id="playback" width="60%" height="60%"></video>
            <script>
                const constraints = {
                    video: {
                    width: {
                        min: 1280,
                        ideal: 1920,
                        max: 2560,
                    },
                    height: {
                        min: 720,
                        ideal: 1080,
                        max: 1440
                    },
                    }
                };

                if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
                    console.log("OK getUserMedia")
                }
                else(console.log("!OK getUserMedia"))

                navigator.mediaDevices.getUserMedia(constraints)
                .then(function(stream){
                    console.log("cam on");
                    document.addEventListener("DOMContentLoaded", function() {
                        video = document.getElementById("playback");
                        video.srcObject = stream;
                    } )
                })
                .catch (function(error) {
                console.log("error camera acces", e);
                })
            </script>
        </main>
    </body>
</html>

how annoying ! So I tried checking browser updates, another browser, another computer, another wifi connexion (hopeless I am, yesss), adding key words as autoplay muted playsinline or controls, forcing css visibility tag at visible... nothing helps. So one step back, two forwards. I decided to forgot cam for a while, and using a local video : same issue, it's invisible (good name, good path...). Then i saw on forums some people talking 'bout codec ! I downloaded a mp4 the codec of the stream is the issue ? according to this page, getUserMedia send a stream with VP8 codec, which is supposed to supported by all browsers, so it's unlikely but eh ! at this state, I can try everything. :( In your opinion, is the codec the issue ? can I change it ? May you think to other ways I can explore ? ---EDIT--- Naivly I tried to addcodec: 'h264' to constraints but eheh no. x)

Original Q&A

There are 1 best solutions below

**Dai** · Accepted Answer · 2023-05-04T14:30:27.277000

The problem is your call to getUserMedia returns a Promise<> that resolves after the DOMContentLoaded event...
- ...which means the video.srcObject = stream; statement will never be evaluated.
Additionally, there's a few other things wrong with your existing code:
- You need to return or throw if getUserMedia is unavailable, but your code has a single inline else branch with no return.
- Your code in .catch (function(error) { console.log("error camera acces", e); } ) is incorrect: there is no variable named e: it's error.
Instead, await the getUserMedia Promise after DOMContentLoaded, like so:

const constraints = {
  video: {
    width: {
      min: 1280,
      ideal: 1920,
      max: 2560,
    },
    height: {
      min: 720,
      ideal: 1080,
      max: 1440
    },
  }
};

window.addEventListener( 'DOMContentLoaded', setup );

async function setup() {

  if( !'mediaDevices' in navigator ) return;
  if( !'getUserMedia' in navigator.mediaDevices ) return;
  
  const videoEl = document.getElementById("playback");
  if( !videoEl ) return;
  
  //
  
  let stream;
  try {
      stream = await navigator.mediaDevices.getUserMedia(constraints)
  }
  catch( err ) {

    // Consider handling only the specific exceptions listed on MDN: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#exceptions

    console.error( "Error: %o", err );
    alert( "navigator.mediaDevices.getUserMedia failed: " + err );
    return;
  }
  
  videoEl.srcObject = stream;
}

<main>
  <video style="background-color: blue;" id="playback" width="60%" height="60%"></video>
</main>

Is my webcam stream invisible because of codec?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CODEC

Related Questions in GETUSERMEDIA

Related Questions in VP8

Trending Questions

Popular # Hahtags

Popular Questions