ScarletsFiction / SFMediaStream

HTML5 media streamer library for playing music, video, playlist, or even live streaming microphone & camera with node server
MIT License
101 stars 30 forks source link

Video not play #7

Open crisari666 opened 4 years ago

crisari666 commented 4 years ago

I am sending and receiving data but video is not playing: look my code

HTML SEND VIDEO:

<script type="text/javascript" src='<?echo base_url() ?>assets/js/SFMediaStreamer.js?<?echo strtotime('Y-m-d H:i:s') ?>'>



JS SEND VIDEO

` (function(){ var socket; $(()=>{

    await socketC();
    mediaRecord();
    btnAction();
});
function mediaRecord(){
    var presenterMedia = new ScarletsMediaPresenter({
        audio:true, video: true
    }, 1000); // 1sec

    presenterMedia.debug = true;
    presenterMedia.onRecordingReady = function(packet){
        console.log("Recording started!");
        console.log("Header size: " + packet.data.size + "bytes");
        console.log(packet.data);
        // Every new streamer must receive this header packet
        // console.log(socket);
        let blob = new Blob([packet.data]
            , {type:'video/webm'}
        );
        socket.emit('bufferHeader', blob);
        // socket.emit('data', new Uint8Array(packet));
        // socket.emit('prueba', {data: 888});
    }

    presenterMedia.onBufferProcess = function(packet){
        console.log("Buffer sent: " + packet[0].size + "bytes");

        // console.log(packet);
        socket.emit('stream', {data:packet});
    }
    presenterMedia.startRecording();

    setTimeout(()=>{
        presenterMedia.stopRecording();

    }, 60000);

}
async function socketC(){
    socket = await  io.connect(
        "https://xxxx.xxxxx.xxxx:xxxx",
        {transports: [ 'websocket' ], upgrade:false}
    );
    socket.on('connect',()=>{
        console.log('socket conectado');
        mediaRecord();
    });
}
function btnAction(){
    $('#btn').click(()=>{
        socket.emit('test', {data: 666});
    })
}

})();`

console

image

JS BACKEND: Socket connection

` 'use strict' let socket = require('socket.io'); let app = require('express')(); let logger = require('winston'); let http = require('http'); let https = require('https'); let fs = require('fs'); logger.remove(logger.transports.Console); logger.add(logger.transports.Console, {colorize:true, timestamp:true}); logger.info('SocketIO > listening on port ');

let https_server = https.createServer({ key: fs.readFileSync('../../ssl/mycpanel.pem'), cert: fs.readFileSync('../../ssl/mycpanel.pem') }, app).listen(3010);

var io = socket.listen(https_server);

io.sockets.on('connection',function(socket){ console.log('NUEVA CONEXION'); socket.on('prueba',function(data){ console.log('data prueba socjet', data); }) socket.on('bufferHeader', function(data){ console.log("bufferHeader", data); io.sockets.emit('bufferHead', data); }); socket.on('stream', function(data){ console.log("streamer", data); io.sockets.emit('stream', data); }); socket.on('videoCam',(data)=>{ io.sockets.emit('videoCam', data); console.log(data); }); // socket.on('newOrderToBill', (data)=>{ // console.log(data); // io.sockets.emit('newOrderToBill',data); // }); }); `

HTML RECEIVE VIDEO

JS RECEIVE VIDEO

` var video = document.querySelector('#video1'); var video2 = document.querySelector('#video2'); var scarlet = false; var socket; var chunks = []; var ms = new MediaSource(); var uno = false; $(()=>{

    socketC();
    setTimeout(()=>{
        socket.disconnect();
    }, 50000);
    // receiveVideo();
});
function socketC(){
    socket = io.connect(
        "https://host3.virtualsoccergroups.com:3010",
        {transports: [ 'websocket' ], upgrade:false}
    );
    socket.on('connect',function(){
        if(!scarlet){
            playVideo();
            //for prevent propagation if socket reconnect
            scarlet = true;
        }
        console.log('socket on')
    });
}

 function playVideo(){
    var videoStreamer = new ScarletsVideoStreamer(video, 1000); // 1sec
    videoStreamer.playStream();

    // First thing that must be received
    socket.on('bufferHead', function(packet){
        console.log('bufferHeader',packet);
        videoStreamer.setBufferHeader(packet);
    });

    socket.on('stream', function(packet){
        console.log("Buffer received: " , packet);
        videoStreamer.receiveBuffer(packet);
    });

    // Add an effect
    var ppDelay = ScarletsMediaEffect.pingPongDelay();

    // Stream (source) -> Ping pong delay -> destination
    videoStreamer.audioConnect(ppDelay.input);
    ppDelay.output.connect(ScarletsMedia.audioContext.destination);

 }

function download(blob) {
    var link = document.createElement('a');
    link.setAttribute('download', 'video.webm');
    link.setAttribute('href', URL.createObjectURL(blob));
    link.style.display = "none";
    // NOTE: We need to add temporarily the link to the DOM so
    //       we can trigger a 'click' on it.
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

function btnAction(){
    $('#btnPlay').click(function(){
        // playVideo();
        video.play();
    })
}

` console: image

StefansArya commented 4 years ago

I think I need to add some tricky code in the library because I also have some problem for the implementation 😅 .

1563687283403

When I restarted the Presenter, the streamer work correctly.. But if I also restart the streamer it paused again..

crisari666 commented 4 years ago

can you share your code bro?