Skip to content

Video not play #7

@crisari666

Description

@crisari666

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

HTML SEND VIDEO:

HOLA

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script> <script type="text/javascript" src='assets/js/SFMediaStreamer.js?'></script> <script type="text/javascript" src="assets/js/admin/streamingVideo.js?"></script>

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 **

HOLA

PLAY

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script> <script type="text/javascript" src="assets/js/SFMediaStreamer.js?"></script> <script type="text/javascript" src="assets/js/admin/recibeVideo.js?"></script>

**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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinghelp wantedExtra attention is needed

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions