javascript: Webcam

  
var stop = function() {
  var stream = video.srcObject;
  var tracks = stream.getTracks();

  for (var i = 0; i < tracks.length; i++) {
    var track = tracks[i];
    track.stop();
  }

  video.srcObject = null;
}

var start = function(){
	var video = document.getElementById('video'),
	 vendorUrl = window.URL || window.webkitURL;

	if (navigator.mediaDevices.getUserMedia) {
		navigator.mediaDevices.getUserMedia({ video: true })
		.then(function (stream) {
		  video.srcObject = stream;
		}).catch(function (error) {
		  console.log("Something went wrong!");
		});
	}
}
$(function() {
    start();
});

　　

<!DOCTYPE html>
<html lang="en">
<head>
	<title>html5-js-live-cam</title>
	<link rel="stylesheet" href="css/style.css">
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-sm-12">
			<div class="card">
			  <h5 class="card-header h5 text-center">HTML 5 & JS live Cam</h5>
			  <div class="card-body">
				<div class="booth">
					<video id="video" width="100%" height="100%" autoplay></video>
				</div>
				<div class="text-right">
					<a href="#!" class="btn btn-danger" onClick="stop()">Stop Cam</a>
					<a href="#!" class="btn btn-success" onClick="start()">Start Cam</a>
				</div>
			  </div>
			</div>
			
		</div>
	</iv>
</div>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" ></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

　　

posted @ 2022-10-16 00:03  ®Geovin Du Dream Park™  阅读(38)  评论(0)    收藏  举报