Playing video on html5 video tag:
---------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Run webcam into video tag</title>
<link rel="stylesheet" href="">
</head>
<body>
<h5>Playing video and you can take image from it</h5>
<video width="320" id="webCamera" autoplay muted playsinline class="handsome" type='video/mp4'></video>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
// Playing video
const video = document.getElementById('webCamera');
startVideo();
function startVideo() {
var front = false;
video.style.width = document.width + 'px';
video.style.height = document.height + 'px';
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.setAttribute('playsinline', '');
var constraints = {
audio: false,
video: {
facingMode: (front? 'user' : 'environment')
}
}
navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
video.srcObject = stream;
});
}
</script>
</body>
</html>
---------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Run webcam into video tag</title>
<link rel="stylesheet" href="">
</head>
<body>
<h5>Playing video and you can take image from it</h5>
<video width="320" id="webCamera" autoplay muted playsinline class="handsome" type='video/mp4'></video>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
// Playing video
const video = document.getElementById('webCamera');
startVideo();
function startVideo() {
var front = false;
video.style.width = document.width + 'px';
video.style.height = document.height + 'px';
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.setAttribute('playsinline', '');
var constraints = {
audio: false,
video: {
facingMode: (front? 'user' : 'environment')
}
}
navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
video.srcObject = stream;
});
}
</script>
</body>
</html>
No comments:
Post a Comment