Are you a programmer or a web developer? Do you want to build a video recorder system with JavaScript?Then this article will help you to know how to create a video recorder system with the help of this ID card.
To create a video record with JavaScript, you first need to be proficient in JavaScript.You also need to know about Media Capture Media Recorder and streams API. If you have a good knowledge of these topics, you can create video records with JavaScript.
If you do not have the knowledge, I will provide the source code myself. With that source code, you can create JavaScript video records.
This javascript video recorder can be made in many ways. Many people create functions and send texts at their own convenience and it works accordingly. If you are a skilled javascript programmer then you can create your own function and you can work according to your function.
Now if you want to know what JavaScript is, how it works, how function-key functions work, also Ameria Capture Media Recorder, etc., you can go to YouTube and complete any one course on JavaScript, then you can easily understand what these are and their What works and how to work with them.
Below are some codes. This code will basically go to Speed Video Recorder. If you want to make a screen video recorder, you can copy this code and paste it in your HTML file, then you can see its output. It will not work without a front camera.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MediaCapture and Streams API</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>MediaCapture, MediaRecorder and Streams API</h1>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit molestiae itaque facere totam saepe tempore esse temporibus, quae reprehenderit aliquid iusto ea laborum, iure eligendi odio exercitationem sapiente illum quos.</p>
<button id="btnStop">STOP RECORDING</button></p>
<video controls></video><br>
<video id="vid2" controls style="display:"></video>
<!-- could save to canvas and do image manipulation and saving too -->
</main>
<script>
let constraintObj = {
audio: false,
video:true
};
// width: 1280, height: 720 -- preference only
// facingMode: {exact: "user"}
// facingMode: "environment"
//handle older browsers that might implement getUserMedia in some way
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
navigator.mediaDevices.getUserMedia = function(constraintObj) {
let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraintObj, resolve, reject);
});
}
}else{
navigator.mediaDevices.enumerateDevices()
.then(devices => {
devices.forEach(device=>{
console.log(device.kind.toUpperCase(), device.label);
//, device.deviceId
})
})
.catch(err=>{
console.log(err.name, err.message);
})
}
navigator.mediaDevices.getUserMedia(constraintObj)
.then(function(mediaStreamObj) {
//connect the media stream to the first video element
let video = document.querySelector('video');
if ("srcObject" in video) {
video.srcObject = mediaStreamObj;
} else {
//old version
video.src = window.URL.createObjectURL(mediaStreamObj);
}
video.onloadedmetadata = function(ev) {
//show in the video element what is being captured by the webcam
video.play();
};
//add listeners for saving video/audio
let start = document.getElementById('btnStart');
let stop = document.getElementById('btnStop');
let vidSave = document.getElementById('vid2');
let mediaRecorder = new MediaRecorder(mediaStreamObj);
let chunks = [];
window.addEventListener('load', (ev)=>{
mediaRecorder.start();
console.log(mediaRecorder.state);
})
stop.addEventListener('click', (ev)=>{
mediaRecorder.stop();
console.log(mediaRecorder.state);
});
mediaRecorder.ondataavailable = function(ev) {
chunks.push(ev.data);
}
mediaRecorder.onstop = (ev)=>{
let blob = new Blob(chunks, { 'type' : 'video/mp4;' });
chunks = [];
let videoURL = window.URL.createObjectURL(blob);
var x = vidSave.src = videoURL;
vidSave.src = videoURL;
/// firebase upload code here
console.log(x);
alert(x);
}
})
.catch(function(err) {
console.log(err.name, err.message);
});
/*********************************
getUserMedia returns a Promise
resolve - returns a MediaStream Object
reject returns one of the following errors
AbortError - generic unknown cause
NotAllowedError (SecurityError) - user rejected permissions
NotFoundError - missing media track
NotReadableError - user permissions given but hardware/OS error
OverconstrainedError - constraint video settings preventing
TypeError - audio: false, video: false
*********************************/
</script>
</body>
</html>
Thank you very much for your valuable time here
No comments