GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2026-01-29 09:01:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

#44 添加视频录制支持

Browse Source 
使用浏览器前端 API
支持 mjpeg 和 h.264 模式下的视频录制
录制格式为wbem（vp8）
This commit is contained in:
mofeng-git
2024-11-04 13:25:18 +00:00
parent 6fbfc2b343
commit 1a13760df0
8 changed files with 100 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/share/i18n/i18n_en.json
View File

@@ -109,6 +109,10 @@
"kvm_text76":"Connect drive to Server",
"kvm_text77":"Disconnect",
"kvm_text78":"Reset",
"kvm_text79":"Video Record<br>",
"kvm_text80":"Record video using the browser API, and will be downloaded automatically",
"kvm_text81":"Start recording",
"kvm_text82":"End recording",
"atx-ask-switch":"Ask click confirmation",
"hid-recorder-loop-switch":"Infinite loop playback",

4
web/share/i18n/i18n_zh.json
View File

@@ -109,6 +109,10 @@
"kvm_text76":"连接 MSD 到主机",
"kvm_text77":"断开连接",
"kvm_text78":"重置",
"kvm_text79":"视频录制<br>",
"kvm_text80":"使用浏览器 API 录制视频（无音频），结束录制后视频文件会自动下载",
"kvm_text81":"开始录制",
"kvm_text82":"结束录制",
"atx-ask-switch":"点击二次确认",
"hid-recorder-loop-switch":"无限循环重放",

77
web/share/js/kvm/stream.js
View File

@@ -97,9 +97,15 @@ export function Streamer() {
tools.el.setOnClick($("stream-screenshot-button"), __clickScreenshotButton);
tools.el.setOnClick($("stream-reset-button"), __clickResetButton);
tools.el.setOnClick($("stream-record-start-button"), __clickRecordStartButton);
tools.el.setOnClick($("stream-record-stop-button"), __clickRecordStopButton);
$("stream-window").show_hook = () => __applyState(__state);
$("stream-window").close_hook = () => __applyState(null);
//hidden stream-record-stop-button
document.getElementById('stream-record-stop-button').disabled = true;
};
/************************************************************************/
@@ -304,6 +310,77 @@ export function Streamer() {
});
};
var stream_mjpeg_refresh_img;
var stream_now_fps
let mediaRecorder;
var __clickRecordStartButton = function() {
wm.confirm("Are you sure you want to record stream?").then(function (ok) {
if (ok) {
stream_now_fps = tools.slider.getValue($("stream-desired-fps-slider"));
let recordedBlobs = [];
//"mjpeg" or "janus"
let stream_type = document.querySelector('input[name="stream-mode-radio"]:checked').value;
if ( stream_type == "mjpeg"){
var stream_mjpeg_img = document.getElementById('stream-image');
var stream_mjpeg_canvas = document.getElementById('stream-mjpeg-canvas');
var ctx = stream_mjpeg_canvas.getContext('2d');
stream_mjpeg_canvas.width = stream_mjpeg_img.width;
stream_mjpeg_canvas.height = stream_mjpeg_img.height;
const stream = stream_mjpeg_canvas.captureStream(stream_now_fps); // Capture FPS
mediaRecorder = new MediaRecorder(stream);
}else{
const stream = document.getElementById("stream-video")
stream.captureStream = stream.captureStream || stream.mozCaptureStream;
mediaRecorder = new MediaRecorder(stream.captureStream());
}
mediaRecorder.ondataavailable = function(event) {
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
}
};
mediaRecorder.onstop = function() {
const blob = new Blob(recordedBlobs, {type: 'video/webm'});
var url = URL.createObjectURL(blob);
const a = document.createElement('a');
document.body.appendChild(a);
const now = new Date();
const year = now.getFullYear();
const month = ('0' + (now.getMonth() + 1)).slice(-2);
const day = ('0' + now.getDate()).slice(-2);
const hours = ('0' + now.getHours()).slice(-2);
const minutes = ('0' + now.getMinutes()).slice(-2);
const seconds = ('0' + now.getSeconds()).slice(-2);//Get now time
a.style = "display: none";
a.href = url;
a.download = stream_type +"_"+ year + month + day + hours + minutes + seconds + ".webm";
a.click();
window.URL.revokeObjectURL(url);
};
mediaRecorder.start();
document.getElementById('stream-record-start-button').disabled = true;
document.getElementById('stream-record-stop-button').disabled = false;
if (stream_type == "mjpeg"){
stream_mjpeg_refresh_img = setInterval(function() {
ctx.drawImage(stream_mjpeg_img, 0, 0, stream_mjpeg_img.width, stream_mjpeg_img.height);
}, 1000 / stream_now_fps);
}
}
});
};
var __clickRecordStopButton = function() {
mediaRecorder.stop();
clearInterval(stream_mjpeg_refresh_img);
document.getElementById('stream-record-start-button').disabled = false;
document.getElementById('stream-record-stop-button').disabled = true;
};
var __sendParam = function(name, value) {
tools.httpPost(`/api/streamer/set_params?${name}=${value}`, function(http) {
if (http.status !== 200) {