Комбинированная часть другого скрипта не удалась при загрузке.

divpixel

Скрипт RecordRTC позволяет осуществлять запись с веб-камеры через веб-страницу. Один из их скриптов предназначен только для ручной записи, другой — для автоматической записи и загрузки. Оба скрипта успешно работают по отдельности. Этот код успешно работает для ручного запуска/остановки записи:

 <!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>

Код (JavaScript):

RedSupport

У вас есть элемент с идентификатором «your-video-id»? Это может быть частью/большой частью проблемы.

Еще есть кронштейн

[B]

Код (разметка): , это было из-за копирования и вставки сюда? Зачем смешивать и сопоставлять js и jQuery? Конечно, это сработает, но... Кроме того, я бы использовал $.post вместо makeXMLHttpRequest.

Я понимаю, что вы копируете и вставляете, но жизнь была бы проще, и код читался бы лучше.

Похожие темы	Дата
[javascript.ru] - Node.js От А До Я	19.10.2024, 18:10
Курс по angularjs	19.10.2024, 18:10
[itvdn] Видео Курс Angularjs Essential	19.10.2024, 18:10
Server Side Filtering using jQuery Ajax PHP and MySQL by unknow	19.10.2024, 18:10
Пример панели для подписи для новичков	19.10.2024, 18:10
Назначение истекшей даты и времени размещенному маркеру	19.10.2024, 18:10
Подсказка проверки jQuery	19.10.2024, 18:10
Справка по точке останова Javascript	19.10.2024, 18:10
Живой поиск jQuery — вернитесь к первому результату после того, как страница нашла все доступные результаты.	19.10.2024, 18:10
FullStack-Мастер: Разработка CRM-системы на Node.js, Express, Angular 6 - WebForMySelf (2018)	19.10.2024, 18:10

Комбинированная часть другого скрипта не удалась при загрузке.

divpixel

RedSupport

I AM

Интересно