Я пытаюсь создать веб-страницу, которая отображает камеру при запуске, когда нажмите кнопку, чтобы начать запись, и нажмите кнопку, чтобы остановить запись воспроизведения видео после того, как оно прекращает запись. у меня это показывает камеру, но функции кнопок в настоящее время не работают. я покажу тебе мой код
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Display Webcam Stream</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<button id="btn-start-recording" onclick="go()">Start Recording now</button>
<button id="btn-stop-recording" onclick="stop()">stop recording</button>
<div id="container">
<video autoplay="true" id="videoElement"></video>
<canvas id="myCanvas" width="500" height="375"></canvas>
</div>
<script src="recording.js"></script>
</body>
</html>
Мой javascript:
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(function (stream) {
video.srcObject = stream;
})
.catch(function (err0r) {
console.log("Something went wrong!");
alert("you need a webcam and micophone to record a Video");
document.getElementById("btn-start-recording").disabled = true;
//document.getElementById("btn-stop-recording").disabled = true;
});
}
var newvideo = document.getElementById("video");
//startup();
function stop() {
var stream = video.srcObject;
var tracks = stream.getTracks();
for (var i = 0; i < tracks.length; i++) {
var track = tracks[i];
track.stop();
}
stopRecording();
alert("started");
// var create = "false";
// recording(create);
}
function stopRecording() {
var chunks = [];
// var blob = new Blob(chunks, { 'type' : 'video/mp4' });
let blob = recorder.getBlob();
var videoURL = URL.createObjectURL(blob);
if(videoURL != null) {
video.src = videoURL;
video.play();
}
else
alert("Error didn't create video please try again");
}
function gorecording() {
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(async function(stream) {
let recorder = RecordRTC(stream, {
type: 'video'
});
recorder.startRecording();
const sleep = m => new Promise(r => setTimeout(r, m));
await sleep(3000);
recorder.stopRecording(function() {
let blob = recorder.getBlob();
invokeSaveAsDialog(blob);
});
});
}
function draw () {
ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function startRecording() {
var canvas = document.getElementById("canvas");
var video = document.getElementById("videoElement");
var colors = ["red", "blue", "yellow", "orange", "black", "white", "green"];
draw();
//var ctx = canvas.getContext("2d");
alert("helloooo");
}
function SstartRecording() {
var ctx = canvas.getContext("2d");
alert("helloooo");
var video = document.querySelector("video");
var colors = ["red", "blue", "yellow", "orange", "black", "white", "green"];
draw();
var videoStream = canvas.captureStream(30);
var mediaRecorder = new MediaRecorder(videoStream);
var chunks = [];
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
};
mediaRecorder.onstop = function(e) {
var blob = new Blob(chunks, { 'type' : 'video/mp4' });
chunks = [];
var videoURL = URL.createObjectURL(blob);
video.src = videoURL;
};
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
};
mediaRecorder.start();
setInterval(draw, 300);
setTimeout(function (){ mediaRecorder.stop(); }, 5000);
alert("hello");
}
//}
function go() {
//var create = "true";
startRecording();
//recording(create);
}
function recording(create) {
var canvas = document.querySelector("#myCanvas");
var videoStream = canvas.captureStream(30);
var mediaRecorder = new MediaRecorder(videoStream);
var chunks = [];
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
};
mediaRecorder.onstop = function(e) {
var blob = new Blob(chunks, { 'type' : 'video/mp4' });
chunks = [];
var videoURL = URL.createObjectURL(blob);
video.src = videoURL;
};
if (create == "true") {
mediaRecorder.start();
} else {
mediaRecorder.stop();
}
}
И мой css:
.display-cover {'
display: flex;
justify-content: center;
align-items: center;
width: 70%;
margin: 5% auto;
position: relative;
}
/*
#container
{
position: absolute;
left: 20px;
top: 30px;
} */
#videoElement {
width: 100%;
background: rgba(0, 0, 0, 0.2);
}
body{
background-color: aqua;
}
У кого-нибудь есть идеи?