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>
标签：function,Webcam,stream,javascript,tracks,video,Cam,var From： https://www.cnblogs.com/geovindu/p/16795419.html