Geek asks and answers

Use webcam as HTML background

I have a computer that has a webcam on it, and sometimes a website is displayed in our night club ...

I would like to combine these two and display the website with the html background source, which is the video output from the webcam on the same computer.

The webcam should not be broadcast on the Internet, the website should only localize the video signal locally ... I do not know how we will do this, but the effect is similar to this, only we are not using Youtube as the video source - http: // www. seanmccambridge.com/tubular/ !

Perhaps it will be a combination of html, css, possibly jquery and java or flash (for accessing video from a webcam) ...

+5
source share
1 answer

HTML, .

<body>
    <video id="video-bg>
    <div id="site_wrapper">
       <!--the html-->
    </div>
</body>

CSS html position:absolute. , .

#site_wrapper{
    position:relative;
}

#video-bg {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
}

getUserMedia, blob <video>. MDN:

navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
    function(stream) {
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(stream);
      video.onloadedmetadata = function(e) {
      video.play();
    };
  },
  function(err) {
    console.log("The following error occured: " + err.name);
  }
);

- , - .

. - , "local" , . , , , .

, "" . -, .

+2

More articles:


All Articles