2014-05-23 12 views
6

Devo eseguire lo streaming di mp3 o mp4 da un server node.js e guardarlo su una pagina html5. Sto cercando di usare socket.io per accelerare le comunicazioni e spero che ridurrà la latenza che ho usando il semplice http. Ho impostato socket.io nel mio progetto, sia sul client (applicazione web mobile) che sul server, ma non riesco a capire né trovare sul Web come inviare correttamente i dati e portarli a un tag.Streaming audio/video con socket (.io) dal server node.js alla pagina html5

+0

Hai mai capire questo? – nathanengineer

risposta

4

si prega di vedere progetto socket.io-stream https://www.npmjs.org/package/socket.io-stream

+2

l'ho implementato ma non so come farlo in un tag video .. come faccio a passare il flusso di dati in html? – Sunrising

+2

Ho un problema simile. Come hai passato lo stream al tag video? – TheEnvironmentalist

+0

era qualcuno in grado di eseguire lo streaming di un flusso di tag video su un altro flusso di tag video utilizzando il progetto fornito? – Coderji

3

Prova ffmpeg per rendere la sincronizzazione streaming audio/video. Nei tag audio e video HTML5 viene riprodotto automaticamente quando si fornisce l'indirizzo di origine del server nell'elemento src del tag audio/video.

0

Controllare questo esempio: esempio

var captureMe = function() { 
 
     if (!videoStreamUrl) alert('error') 
 

 
     context.translate(canvas.width, 0); 
 
     context.scale(-1, 1); 
 

 
context.drawImage(video, 0, 0, video.width, video.height); 
 
     var base64dataUrl = canvas.toDataURL('image/png'); 
 
     context.setTransform(1, 0, 0, 1, 0, 0); 
 
     var img = new Image(); 
 
     img.src = base64dataUrl; 
 
     window.document.body.appendChild(img); 
 
    } 
 

 
    button.addEventListener('click', captureMe); 
 

 
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; 
 
    window.URL.createObjectURL = window.URL.createObjectURL || window.URL.webkitCreateObjectURL || window.URL.mozCreateObjectURL || window.URL.msCreateObjectURL; 
 

 
    navigator.getUserMedia({video: true}, function (stream) { 
 
     allow.style.display = "none"; 
 
     videoStreamUrl = window.URL.createObjectURL(stream); 
 
     video.src = videoStreamUrl; 
 
    }, function() { 
 
     console.log('streaming error'); 
 
    }); 
 
    };

lavoro anonymous chat video test

link originale http://html5.by/blog/html5-image-capture-getusermedia-stream-api-mirror/