CODEWITHSUNDEEP
javascriptelectronvideo-capturehls.js
Mohammed Housseyn Taleb
Mohammed Housseyn Taleb

Reputation: 1828

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

First this is not a duplicate I m not reading from camera stream. so I have not found any tutorial or documentation in this subject.

I m building a server client application, my server is using ffmpeg to transcode and stream some ipcameras content, and my electron client is consuming and displaying this cameras in my app.

to do so I have the following implementation

a player adding function


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);
        }
    });



}

and the play function


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();
        });
    });
}

Is there any solution to record the played video ?

Upvotes: 4

Views: 2309

Answers (1)

Leon
Leon

Reputation: 584

I think the solution is in events Hls.Events.BUFFER_APPENDING or Hls.Events.BUFFER_APPENDED.

BUFFER_APPENDING is fired when a segment append to the buffer - data: { segment : segment object }

BUFFER_APPENDED is fired when appending a segment to the buffer data is done: { parent : segment parent that triggered BUFFER_APPENDING, pending : nb of segments waiting for appending for this segment parent, timeRanges : { video: TimeRange, audio: TimeRange }

I couldn't test it, but you can try:

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');

Upvotes: 2

Related Questions