Skip to content

Instantly share code, notes, and snippets.

@mxriverlynn

mxriverlynn/webcam.css

Last active March 30, 2020 12:05
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save mxriverlynn/9493718 to your computer and use it in GitHub Desktop.
Save mxriverlynn/9493718 to your computer and use it in GitHub Desktop.
Download ZIP
webrtc webcam in 20 lines
Raw
webcam.css
body {
margin: 0px;
padding: 0px;
}
#player {
width: 100%;
height: 100%;
}
Raw
webcam.html
<!doctype html>
<html>
<head>
<title>WebRTC WebCam</title>
<link rel="stylesheet" href="webcam.css"/>
<script src="webcam.js"></script>
</head>
<video id="player" autoplay="true"></video>
</html>
Raw
webcam.js
(function(){
var mediaOptions = { audio: false, video: true };
if (!navigator.getUserMedia) {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
}
if (!navigator.getUserMedia){
return alert('getUserMedia not supported in this browser.');
}
navigator.getUserMedia(mediaOptions, success, function(e) {
console.log(e);
});
function success(stream){
var video = document.querySelector("#player");
video.src = window.URL.createObjectURL(stream);
}
})();
@123AP
Copy link

123AP commented May 4, 2018

""looking for complete javascript code to access multiple camera drivers"""".

I am trying to use multiple cameras on web application . List of camera drivers should come in the drop down. I should be able to choose required camera driver from the drop down. Based on my selection, i will capture the photo. Whenver i change the drop down option, the corresponding camera driver should open."

CURRENTLY USING RTCMulticonnection for accessing multiple devices *

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment