Discussion :

[scandinave]

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?

[Matthieu2000]

-> forum java

[scandinave]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Bovino]

Tu peux regarder du côté de Capturing Audio & Video in HTML5.

[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

[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.

[scandinave]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.