如何录制从我的流媒体服务器播放的电子视频

Question

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

我正在构建一个服务器客户端应用程序，我的服务器正在使用 ffmpeg 转码和流式传输一些 ipcameras 内容，我的电子客户端正在我的应用程序中使用和显示这些相机。

为此我有以下实现

播放器添加功能


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 当段追加到缓冲区时触发 - data: { segment : segment object }

BUFFER_APPENDED 在将段附加到缓冲区时触发数据已完成：{ parent：触发 BUFFER_APPENDING 的片段父级，pending：等待添加此片段父级的片段的 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');

如何录制从我的流媒体服务器播放的电子视频

How to record video in electron that is played from my streaming server

javascript

video-capture

electron

hls.js