|
|
|
@ -30,6 +30,9 @@
|
|
|
|
|
</div>
|
|
|
|
|
<button id="start" onclick="start()">Start</button>
|
|
|
|
|
<button id="stop" style="display: none" onclick="stop()">Stop</button>
|
|
|
|
|
<button class="btn btn-primary" id="btn_start_record">Start Recording</button>
|
|
|
|
|
<button class="btn btn-primary" id="btn_stop_record" disabled>Stop Recording</button>
|
|
|
|
|
<!-- <button class="btn btn-primary" id="btn_download">Download Video</button> -->
|
|
|
|
|
<input type="hidden" id="sessionid" value="0">
|
|
|
|
|
<form class="form-inline" id="echo-form">
|
|
|
|
|
<div class="form-group">
|
|
|
|
@ -92,6 +95,90 @@
|
|
|
|
|
//ws.send(message);
|
|
|
|
|
$('#message').val('');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$('#btn_start_record').click(function() {
|
|
|
|
|
// 开始录制
|
|
|
|
|
console.log('Starting recording...');
|
|
|
|
|
fetch('/record', {
|
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
type: 'start_record',
|
|
|
|
|
}),
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json'
|
|
|
|
|
},
|
|
|
|
|
method: 'POST'
|
|
|
|
|
}).then(function(response) {
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
console.log('Recording started.');
|
|
|
|
|
$('#btn_start_record').prop('disabled', true);
|
|
|
|
|
$('#btn_stop_record').prop('disabled', false);
|
|
|
|
|
// $('#btn_download').prop('disabled', true);
|
|
|
|
|
} else {
|
|
|
|
|
console.error('Failed to start recording.');
|
|
|
|
|
}
|
|
|
|
|
}).catch(function(error) {
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$('#btn_stop_record').click(function() {
|
|
|
|
|
// 结束录制
|
|
|
|
|
console.log('Stopping recording...');
|
|
|
|
|
fetch('/record', {
|
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
type: 'end_record',
|
|
|
|
|
}),
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json'
|
|
|
|
|
},
|
|
|
|
|
method: 'POST'
|
|
|
|
|
}).then(function(response) {
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
console.log('Recording stopped.');
|
|
|
|
|
$('#btn_start_record').prop('disabled', false);
|
|
|
|
|
$('#btn_stop_record').prop('disabled', true);
|
|
|
|
|
// $('#btn_download').prop('disabled', false);
|
|
|
|
|
} else {
|
|
|
|
|
console.error('Failed to stop recording.');
|
|
|
|
|
}
|
|
|
|
|
}).catch(function(error) {
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// $('#btn_download').click(function() {
|
|
|
|
|
// // 下载视频文件
|
|
|
|
|
// console.log('Downloading video...');
|
|
|
|
|
// fetch('/record_lasted.mp4', {
|
|
|
|
|
// method: 'GET'
|
|
|
|
|
// }).then(function(response) {
|
|
|
|
|
// if (response.ok) {
|
|
|
|
|
// return response.blob();
|
|
|
|
|
// } else {
|
|
|
|
|
// throw new Error('Failed to download the video.');
|
|
|
|
|
// }
|
|
|
|
|
// }).then(function(blob) {
|
|
|
|
|
// // 创建一个 Blob 对象
|
|
|
|
|
// const url = window.URL.createObjectURL(blob);
|
|
|
|
|
// // 创建一个隐藏的可下载链接
|
|
|
|
|
// const a = document.createElement('a');
|
|
|
|
|
// a.style.display = 'none';
|
|
|
|
|
// a.href = url;
|
|
|
|
|
// a.download = 'record_lasted.mp4';
|
|
|
|
|
// document.body.appendChild(a);
|
|
|
|
|
// // 触发下载
|
|
|
|
|
// a.click();
|
|
|
|
|
// // 清理
|
|
|
|
|
// window.URL.revokeObjectURL(url);
|
|
|
|
|
// document.body.removeChild(a);
|
|
|
|
|
// console.log('Video downloaded successfully.');
|
|
|
|
|
// }).catch(function(error) {
|
|
|
|
|
// console.error('Error:', error);
|
|
|
|
|
// });
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</html>
|
|
|
|
|