De base webrtc exemple

Je veux juste montrer la vidéo en deux éléments de la vidéo pour comprendre simplement comment webrtc œuvres. J'ai écrit ceci:

    <video id="video1" autoplay></video>
    <video id="video2" autoplay></video>

    <script type="text/javascript">
        var video1 = document.getElementById('video1');
        var video2 = document.getElementById('video2');
        var pc;

        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        navigator.getUserMedia({ audio: true, video: true }, function(stream){
            pc = new webkitRTCPeerConnection(null);

            pc.addStream(stream);

            pc.onaddstream = function(e){
                alert('onaddstream');
                video2.src = URL.createObjectURL(e.stream);
            };

            pc.onicecandidate = function(e){
                alert('onicecandidate');
                if (!e || !e.candidate) return;
                pc.addIceCandidate(e.candidate);
            };

            video1.src = URL.createObjectURL(stream);

            pc.createOffer(function(description){
                pc.setRemoteDescription(description);
                pc.setLocalDescription(description);
            });
        });
    </script>

Mais il ne fonctionne pas. Pouvez-vous m'aider?

Vous avez besoin d'un "suiveur" et "destinataire de l'appel' RTCPeerConnection: vous n'avez qu'un. Essayez @Muaz Khan exemple ou celui de simpl.info/rtcpeerconnection.

OriginalL'auteur karaxuna | 2013-09-18

  1. 4

    Essayer la démo suivante:

    <video id="peer2-to-peer1" autoplay controls style="width:40%;"></video>
<video id="peer1-to-peer2" autoplay controls style="width:40%;"></video>
<script>
var mediaConstraints = {
optional: [],
mandatory: {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
}
};
var offerer, answerer;
var offererToAnswerer = document.getElementById('peer1-to-peer2');
var answererToOfferer = document.getElementById('peer2-to-peer1');
window.RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
window.RTCSessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
window.RTCIceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;
navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
window.URL = window.webkitURL || window.URL;
window.iceServers = {
iceServers: [{
url: 'stun:23.21.150.121'
}]
};
/* offerer */
function offererPeer(stream) {
offerer = new RTCPeerConnection(window.iceServers);
offerer.addStream(stream);
offerer.onaddstream = function (event) {
offererToAnswerer.src = URL.createObjectURL(event.stream);
offererToAnswerer.play();
};
offerer.onicecandidate = function (event) {
if (!event || !event.candidate) return;
answerer.addIceCandidate(event.candidate);
};
offerer.createOffer(function (offer) {
offerer.setLocalDescription(offer);
answererPeer(offer, stream);
}, onSdpError, mediaConstraints);
}
/* answerer */
function answererPeer(offer, stream) {
answerer = new RTCPeerConnection(window.iceServers);
answerer.addStream(stream);
answerer.onaddstream = function (event) {
answererToOfferer.src = URL.createObjectURL(event.stream);
answererToOfferer.play();
};
answerer.onicecandidate = function (event) {
if (!event || !event.candidate) return;
offerer.addIceCandidate(event.candidate);
};
answerer.setRemoteDescription(offer, onSdpSucces, onSdpError);
answerer.createAnswer(function (answer) {
answerer.setLocalDescription(answer);
offerer.setRemoteDescription(answer, onSdpSucces, onSdpError);
}, onSdpError, mediaConstraints);
}
function getUserMedia(callback) {
navigator.getUserMedia({
audio: true,
video: true
}, callback, onerror);
function onerror(e) {
console.error(e);
}
}
getUserMedia(function (stream) {
offererPeer(stream);
});
function onSdpError(e) {
console.error('onSdpError', e);
}
function onSdpSucces() {
console.log('onSdpSucces');
}
</script>

    Prises de ici.

    Le code fonctionne. mais le tournant de 2 pages html - un pour capture vidéo seulement, et un autre pour l'affichage vidéo seulement est horrible!!! Savez-vous où trouver de la pure client/serveur, pas de p2p WebRTC exemple en JavaScript. Ou comment convertir le code - il n'a pas de dépendances, mais rend mon esprit fou.
    Lorsque j'exécute ce code, Il montre ma vidéo sur les deux éléments de la vidéo. J'ai essayé d'utiliser une autre machine de mon réseau. lorsque les deux machines de la charge même page, encore les deux éléments de la vidéo ne montre que de la vidéo locale
    WebRTC utilise le protocole SDP qui suit offre/réponse modèle. Ce modèle exige d'abord par les pairs pour créer l'offre et qui doivent être partagés avec la seconde par les pairs. Le processus que nous utilisons pour partager une offre de l'utilisateur avec d'autres est nommé en tant que "signalisation". La signalisation peut se faire de copier/coller votre code par exemple (github.com/cjb/serverless-webrtc) ou via websocket, XHR [POST/GET], SIP, XMPP, etc. Démonstration dans la "réponse" de simples cibles sur une seule page. Pas moyen de signalisation est utilisé ici. C'est pourquoi d'autres par les pairs ne peut pas être connecté.
    J'ai trouvé une autre réponse sur internet. Mais il nécessite d'wamp serveurs sur deux machines, chaque machine doit se connecter sur la page web sur leur serveur local. aussi, j'ai eu de définir l'adresse ip sur la machine distante où le websocket-server est en cours d'exécution. Mais j'ai besoin de vous connecter sur une même page web dans les deux machines et ne connexion sans attribuer des adresses IP. Est-il un moyen de faire cela?
    Veuillez vérifier ceci: muaz-khan.blogspot.com/2013/12/i-want-to-learn-webrtc.html Voir ce genre de choses est obligatoire de se connecter à deux pairs assis derrière les différents réseaux (par exemple, serveur signalisation + GLACE serveur).

    OriginalL'auteur Muaz Khan