javascript - 如何录制从我的流媒体服务器播放的 Electron 视频

Question

首先，这不是我没有从相机流中读取的副本。所以我在这个主题中没有找到任何教程或文档。

我正在构建一个服务器客户端应用程序，我的服务器正在使用 ffmpeg 对一些 ipcameras 内容进行转码和流式传输，而我的 Electron 客户端正在我的应用程序中使用和显示这些摄像头。

为此，我有以下实现

玩家添加功能

function addPlayer(p) {
    var node = document.createElement("div");
    node.setAttribute('class', "item4X4");
    node.setAttribute('id', "panel-video-" + p);
    node.innerHTML = "<div ondblclick='fullscreen(" + `"` + p + `"` + ")' class='item-content'><div class='panel-heading'><div class='panel-title-box'><span>Users vs returning</span></div><div class='panel-body padding-0'><video class='autosize' id='player_" + p + "' style='width:100%; height:240px;' autoplay muted></video></div></div>";

    /*document.getElementById("grid").appendChild(node);*/

    grid.add([node]);


    grid.show([node], {
        onFinish: function (items) {
            playVideo(p);
        }
    });



}

和播放功能

function playVideo(p1) {

    var video = document.getElementById('player_' + p1);
    var player = new Hls();
    source = screenSource(p1);
    console.log(source);
    player.attachMedia(video);
    player.on(Hls.Events.MEDIA_ATTACHED, function () {
        player.loadSource(source);
        player.on(Hls.Events.MANIFEST_PARSED, function () {
            video.play();
        });
    });
}

有没有办法录制播放的视频？

Answer 1

我认为解决方案在于事件 Hls.Events.BUFFER_APPENDING或 Hls.Events.BUFFER_APPENDED .

当段附加到缓冲区时会触发 BUFFER_APPENDING - 数据:{段:段对象}

将段附加到缓冲区时会触发 BUFFER_APPENDED
数据完成:{父:触发BUFFER_APPENDING的段父，待处理:WAITING附加此段父的段的nb，timeRanges:{视频:TimeRange，音频:TimeRange}

我无法测试它，但您可以尝试:

var streamRecord = [];

function startRecord(p1) {
    var video = document.getElementById('player_' + p1);
    var player = new Hls();
    source = screenSource(p1);
    console.log(source);
    player.attachMedia(video);

    player.on(Hls.Events.MEDIA_ATTACHED, function () {
        player.loadSource(source);
        /*player.on(Hls.Events.MANIFEST_PARSED, function () {
            video.play();
        });*/
        player.on(Hls.Events.BUFFER_APPENDING, function (event, data) {
            streamRecord[data.type].push(data.data);
        });
    });
}


var downloadURL = function(data, fileName) {
    var a;
    a = document.createElement('a');
    a.href = data;
    a.download = fileName;
    document.body.appendChild(a);
    a.style = 'display: none';
    a.click();
    a.remove();
};

var downloadVideo = function(data, fileName) {
    var blob, url;
    blob = new Blob([data], { type: 'application/octet-stream' });
    url = window.URL.createObjectURL(blob);
    downloadURL(url, fileName);
    setTimeout(function() {
        return window.URL.revokeObjectURL(url);
    }, 1000);
};

downloadVideo(streamRecord, 'video.mp4');