Récupérer le flux d'une webcam pour l'envoyer via websocket

Version imprimable

02/08/2013, 14h51
scandinave

Récupérer le flux d'une webcam pour l'envoyer via websocket

Bonjour,
j'essaye actuellement de faire une petite application de streaming video ,genre skype via websocket.

Pour l'instant, je capte la camera dans un balise video, Video que je redirige vers un canvas.

Pour broadcast le contenu de cette vidéo , j'ai pour l'instant réussi a prendre des screenshot du canvas,grace context.createImageData() que je broadcast vers les autre utilisateur. Ensuite j'affiche cette image dans un autre canvas grace à context.putImageData.

Le probleme c'est que cela est incroyablement lent a afficher. Je que le systeme de scrrenshot n'est pas adapter.

Je voudrais donc savoir comment récupérer directement le flux video pour l'envoyer via websocket au serveur?
02/08/2013, 15h02
Matthieu2000

-> forum java

euh.... non. Je sais exploiter un flux coté java. Ce que je veux sais savoir comment récupérer le flux de ma balise video pour l'envoyer au serveur via javascript.

J'ai ceci pour l'instant :
Code:

1 2 3 4 5 6 7 8 9 10 11 Visio.prototype.defineImageBinary = function(){ var image = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height); var buffer = new ArrayBuffer(image.data.length); var bytes = new Uint8Array(buffer); for(var i=0; i<bytes.length; i++) { bytes[i] = image.data[i]; } this.socket.sendBinary(bytes); };
seulement ceci n'envoi qu'un image et non un flux.

02/08/2013, 16h00
Bovino

Tu peux regarder du côté de Capturing Audio & Video in HTML5.
02/08/2013, 16h14
scandinave

Merci ,mais j'ai déjà lu est fais tout ça. cela marche correctement, j'ai bien accès a ma webcam.

Ce que je veux maintenant c'est envoyé le flux de ma webcam vers mon serveur.

apparemment faut que je regarde du coté de rtcPeerConnection api
02/08/2013, 16h48
danielhagnoul

À toutes fins utiles, un bon tutoriel : http://www.netmagazine.com/tutorials/get-started-webrtc

Je viens de le lire et de tester, cela fonctionne bien sous chrome, mon flux vidéo et audio est bien transmis à ma page web, mais par à coups. C'est sans doute dû à la faiblesse de mon matériel, je suis sur un notebook.

C'est normal que cela ram, et cela ne viens pas de ton PC. J'ai aussi fais un tuto de ce style.

En gros j'essayais de steamer de multiple screenshot du canvas vers les autre utilisateurs pour ensuite afficher ces même images à la suite les une des autres pour en faire une vidéo.

Sauf que pour clean le canvas + dessiner une image, même mon PC Core I7 n'y arrive pas de manière fluide :)

Non la solution pour la vidéo je l'es trouvé ici.

https://bitbucket.org/webrtc/codelab

D'ailleurs je bloque sur le point 3.

J'ai un peu adapter mon code. Mais la fonction Call() n'appelle pas toutes mes méthodes.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Visio() {
    this.localStream, this.localPeerConnection, this.remotePeerConnection;
    this.cam = new Cam();
    var localVideo = document.getElementById("localVideo");
    var remoteVideo = document.getElementById("remoteVideo");
    var startButton = document.getElementById("startButton");
    var callButton = document.getElementById("callButton");
    var hangupButton = document.getElementById("hangupButton");
    startButton.disabled = false;
    callButton.disabled = true;
    hangupButton.disabled = true;
    var that = this;
    startButton.onclick = function(){that.start(that);};
    callButton.onclick = function(){that.call(that);};
    hangupButton.onclick = function(){that.hangup(that);};
 
 
 
};

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Visio.prototype.call = function(visio){
    callButton.disabled = true;
    hangupButton.disabled = false;
    console.log("Starting call...");
    if (visio.localStream.getVideoTracks().length > 0) {
        visio.trace('Using video device: ' + visio.localStream.getVideoTracks()[0].label);
    }
    if (visio.localStream.getAudioTracks().length > 0) {
        visio.trace('Using audio device: ' + visio.localStream.getAudioTracks()[0].label);
    }
 
    var servers = null;
 
    visio.localPeerConnection = new RTCPeerConnection(servers);
    console.log("Created local peer connection object localPeerConnection");
    visio.localPeerConnection.onicecandidate = visio.gotLocalIceCandidate;
 
    visio.remotePeerConnection = new RTCPeerConnection(servers);
    console.log("Created remote peer connection object remotePeerConnection");
    visio.remotePeerConnection.onicecandidate = visio.gotRemoteIceCandidate;
    visio.remotePeerConnection.onaddstream = visio.gotRemoteStream;
 
    visio.localPeerConnection.addStream(visio.localStream);
    console.log("Added localStream to localPeerConnection");
    visio.localPeerConnection.createOffer(visio.gotLocalDescription);
};

Code:

visio.gotLocalIceCandidate

n'est pas appelé. Visio correspont bien à mon object pourtant. Un problème de closure surement mais je n'arrive pas à le résoudre.