4

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 ?

Mohammed Housseyn Taleb
  • 1,979
  • 21
  • 49
  • Maybe this will help you: https://www.electronjs.org/docs/api/desktop-capturer – Brain Foo Long Apr 18 '20 at 19:06
  • you said tha your app is" consuming and displaying this cameras " so its running a – Rkv88 - Kanyan Apr 18 '20 at 19:10
  • Have you looking on us `Media recorder` https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder ? – Hagai Harari Apr 18 '20 at 19:13
  • my electron app have no connection to the cameras, I m only showing a video source that is being streamed from my rtsp server – Mohammed Housseyn Taleb Apr 18 '20 at 19:31

1 Answers1

2

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');
Leon
  • 458
  • 3
  • 15