- 17, May 2024
- #1
Скрипт RecordRTC позволяет осуществлять запись с веб-камеры через веб-страницу.
Один из их скриптов предназначен только для ручной записи, другой — для автоматической записи и загрузки.
Оба скрипта успешно работают по отдельности.
Этот код успешно работает для ручного запуска/остановки записи:
Код (JavaScript):
Я сравнил два сценария, скопировал и вставил часть «загрузки» другого сценария автоматической записи в приведенный выше сценарий в надежде на ручной запуск/остановку и последующую загрузку.
Поэтому неудивительно, что сейчас он даже не записывает, но вот комбинированный код.
Я надеюсь, что кто-нибудь сможет просмотреть это и предложить, как достичь моей цели: запустить, остановить и затем загрузить.
Большое спасибо за любую помощь.
Один из их скриптов предназначен только для ручной записи, другой — для автоматической записи и загрузки.
Оба скрипта успешно работают по отдельности.
Этот код успешно работает для ручного запуска/остановки записи:
<!DOCTYPE html>
<html>
<head>
<script src="[URL='https://lumtu.com/yti/agLLganNodHRwczovL2Nkbi53ZWJydGMtZXhwZXJpbWVudC5jb20vUmVjb3JkUlRDlUk']https://cdn.webrtc-experiment.com/RecordRTC.js[/URL]"></script>
<script src="[URL='https://lumtu.com/yti/a4CC4anNodHRwczovL3dlYnJ0Yy5naXRodWIuaW8vYWRhcHRlci9hZGFwdGVyLWxhdGVzdVGd']https://webrtc.github.io/adapter/adapter-latest.js[/URL]"></script>
</head>
<body>
<style>
html, body {
margin: 0!important;
padding: 0!important;
overflow: hidden!important;
width: 100%;
}
</style>
<title>Video Recording | RecordRTC</title>
<h1>Simple Video Recording using RecordRTC</h1>
<br>
<button id="btn-start-recording">Start Recording</button>
<button id="btn-stop-recording" disabled>Stop Recording</button>
<hr>
<video controls autoplay></video>
<script>
var video = document.querySelector('video');
function captureCamera(callback) {
navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function(camera) {
callback(camera);
}).catch(function(error) {
alert('Unable to capture your camera. Please check console logs.');
console.error(error);
});
}
function stopRecordingCallback() {
video.src = video.srcObject = null;
video.src = URL.createObjectURL(recorder.getBlob());
video.play();
recorder.camera.stop();
recorder.destroy();
recorder = null;
}
var recorder; // globally accessible
document.getElementById('btn-start-recording').onclick = function() {
this.disabled = true;
captureCamera(function(camera) {
setSrcObject(camera, video);
video.play();
recorder = RecordRTC(camera, {
type: 'video'
});
recorder.startRecording();
// release camera on stopRecording
recorder.camera = camera;
document.getElementById('btn-stop-recording').disabled = false;
});
};
document.getElementById('btn-stop-recording').onclick = function() {
this.disabled = true;
recorder.stopRecording(stopRecordingCallback);
};
[B]// get recorded blob
var blob = recorder.getBlob();
// generating a random file name
var fileName = getFileName('webm');
// we need to upload "File" --- not "Blob"
var fileObject = new File([blob], fileName, {
type: 'video/webm'
});
uploadToPHPServer(fileObject, function(response, fileDownloadURL) {
if(response !== 'ended') {
document.getElementById('header').innerHTML = response; // upload progress
return;
}
document.getElementById('header').innerHTML = '<a href="' + fileDownloadURL + '" target="_blank">' + fileDownloadURL + '</a>';
alert('Successfully uploaded recorded blob.');
// preview uploaded file
document.getElementById('your-video-id').src = fileDownloadURL;
// open uploaded file in a new tab
window.open(fileDownloadURL);
});
// release camera
document.getElementById('your-video-id').srcObject = document.getElementById('your-video-id').src = null;
camera.getTracks().forEach(function(track) {
track.stop();
});
});
}, milliSeconds);
});
function uploadToPHPServer(blob, callback) {
// create FormData
var formData = new FormData();
formData.append('video-filename', blob.name);
formData.append('video-blob', blob);
callback('Uploading recorded-file to server.');
makeXMLHttpRequest('save.php', formData, function(progress) {
if (progress !== 'upload-ended') {
callback(progress);
return;
}
var initialURL = '/uploads/' + blob.name;
callback('ended', initialURL);
});
}
function makeXMLHttpRequest(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
if (request.responseText === 'success') {
callback('upload-ended');
return;
}
alert(request.responseText);
return;
}
};
request.upload.onloadstart = function() {
callback('Upload started...');
};
request.upload.onprogress = function(event) {
callback('Upload Progress ' + Math.round(event.loaded / event.total * 100) + "%");
};
request.upload.onload = function() {
callback('progress-ending');
};
request.upload.onload = function() {
callback('Upload Complete.');
};
request.upload.onerror = function(error) {
callback('PHP upload failed.');
};
request.upload.onabort = function(error) {
callback('PHP upload aborted.');
};
request.open('POST', url);
request.send(data);
}
// this function is used to generate random file name
function getFileName(fileExtension) {
var d = new Date();
var year = d.getUTCFullYear();
var month = d.getUTCMonth();
var date = d.getUTCDate();
return 'RecordRTC-' + year + month + date + '-' + getRandomString() + '.' + fileExtension;
}
function getRandomString() {
if (window.crypto && window.crypto.getRandomValues && navigator.userAgent.indexOf('Safari') === -1) {
var a = window.crypto.getRandomValues(new Uint32Array(3)),
token = '';
for (var i = 0, l = a.length; i < l; i++) {
token += a[i].toString(36);
}
return token;
} else {
return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
}
};[/B]
</script>
</body>
</html> Код (JavaScript):
Я сравнил два сценария, скопировал и вставил часть «загрузки» другого сценария автоматической записи в приведенный выше сценарий в надежде на ручной запуск/остановку и последующую загрузку.
Поэтому неудивительно, что сейчас он даже не записывает, но вот комбинированный код.
Я надеюсь, что кто-нибудь сможет просмотреть это и предложить, как достичь моей цели: запустить, остановить и затем загрузить.
Большое спасибо за любую помощь.
<!DOCTYPE html> <html> <head> </head> <body> <style> html, body { margin: 0!important; padding: 0!important; overflow: hidden!important; width: 100%; } </style> <title>Video Recording | RecordRTC</title> <h1>Simple Video Recording using RecordRTC</h1> <br> <button id="btn-start-recording">Start Recording</button> <button id="btn-stop-recording" disabled>Stop Recording</button> <hr> <video controls autoplay></video> <script src="[URL='https://lumtu.com/yti/agLLganNodHRwczovL2Nkbi53ZWJydGMtZXhwZXJpbWVudC5jb20vUmVjb3JkUlRDlUk']https://cdn.webrtc-experiment.com/RecordRTC.js[/URL]"></script> <script src="[URL='https://lumtu.com/yti/a4CC4anNodHRwczovL3dlYnJ0Yy5naXRodWIuaW8vYWRhcHRlci9hZGFwdGVyLWxhdGVzdVGd']https://webrtc.github.io/adapter/adapter-latest.js[/URL]"></script> <script> var video = document.querySelector('video'); function captureCamera(callback) { navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function(camera) { callback(camera); }).catch(function(error) { alert('Unable to capture your camera. Please check console logs.'); console.error(error); }); } function stopRecordingCallback() { video.src = video.srcObject = null; video.src = URL.createObjectURL(recorder.getBlob()); video.play(); recorder.camera.stop(); recorder.destroy(); recorder = null; } var recorder; // globally accessible document.getElementById('btn-start-recording').onclick = function() { this.disabled = true; captureCamera(function(camera) { setSrcObject(camera, video); video.play(); recorder = RecordRTC(camera, { type: 'video' }); recorder.startRecording(); // release camera on stopRecording recorder.camera = camera; document.getElementById('btn-stop-recording').disabled = false; }); }; document.getElementById('btn-stop-recording').onclick = function() { this.disabled = true; recorder.stopRecording(stopRecordingCallback); }; </script> </body> </html>
![[артём Нестеренко] Реактивный Старт](/assets/images/icons/forum4.png){kind=icon}
![[Светлана Грабова] Мужчина класса Lux (2019)](/assets/images/icons/forum1.png){kind=icon}
