javascripthtmlcodecgetusermediavp8

Is my webcam stream invisible because of codec?


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)


Solution

  • 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>