Tip: js/webrtc chat pres stun server – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Tip: js/webrtc chat pres stun server – JavaScript, AJAX, jQuery – Fórum – Programujte.comTip: js/webrtc chat pres stun server – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
peter
~ Anonymní uživatel
2528 příspěvků
9. 2. 2016   #1
-
0
-

Kdyby jste se nekdo moc nudil, mam tu tip pro js chat, ktery vyuziva stun server, treba googlu.

Dole kod pro html chat pro firefox pres stun server. Ted je tam nastaveny prazdny server=null, takze je treba to spustit pro 2 lidi ve dvou oknech firefoxu. Jeden vytvari mistnost (hosting), ostatni se pripojuji (guest), jestli to chapu spravne.

Okno1 - vytvorit channel (vygeneruje kod)
Okno1 - zkopirovat JSON kod z textarea u join do schranky
Okno2 - vlozit JSON kod ze schranky a kliknut na join (vygeneruje kod)
Okno2 - zkopirovat kod u ansfer
Okno1 - vlozit kod ansfer a kliknut na ansfer
A ted je mozne si psat.

Dalo mi dost prace najit funkcni kod, ktery generuje vubec nejake session-description.
Googlem spis najdete videochat, nahravani z web-cam a pod, pomoci webRTC.

<html>
<!--
http://pastebin.com/g2YVvrRd
http://stackoverflow.com/…-datachannel
-->
    <head>
        <title>WebRTC Basic</title>
    </head>
    <body>
        <header><h1>WebRTC Basic</h1></header>

        <section>

            <div id="info" class="disconnected">
                you must first create or join a channel
            </div>

            <form id="signal" action="">
                <p>
					<label for="channel">channel: </label>
					<input id="channel" type="text" value="test" />
					<button id="create">create</button>
                </p>

                <p>
					<label for="offer">offer: </label>
					<textarea id="offer" rows="8" cols="60"></textarea>
					<button id="join">join</button>
                </p>

                <p>
					<label for="answer">answer: </label>
					<textarea id="answer" rows="8" cols="60"></textarea>
					<button id="submitAnswer" disabled>submit answer</button>
                </p>
            </form>

            <form id="chat" action="" onsubmit="return false;">
                <label for="message"> message: </label>
                <input id="message" autocomplete="off" disabled />
                <input type="button" id="send" disabled value="send">
            </form>

            <div id="messages"></div>

        </section>
        <!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script-->
<script type="text/javascript">

var host = null, guest = null;

//var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
//var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;
//var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;

var channelID;

var RTC = {};
RTC.conn      = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;;
RTC.session   = window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription || window.msRTCSessionDescription;
RTC.candidate = window.RTCIceCandidate || window.mozRTCIceCandidate;

var cfg = {}
cfg.server = {};
//cfg.server.url = {url: ['stun:stun.l.google.com 19302']};
//cfg.server.url = {iceServers: [{url:'stun:stun.l.google.com 19302'}]};
cfg.server.url = null;
cfg.server.opt = null;
cfg.server.opt = {optional: [{'DtlsSrtpKeyAgreement': true}, {'RtpDataChannels': true}]};

function setChannelEvents(channel) {
	channel.onmessage = function (event) {
		var message = event.data || event;
		console.log('** channel.onmessage: ', message);
	$("messages").innerHTML += '<br>'+message;
	};

	channel.onopen = function () {
		console.log('** channel.onopen');
		// and finally we can do this
		channel.send('hello world!');
	$("messages").innerHTML += '<br>sending';

	};

	channel.onerror = function (err) {
		console.error('** channel.onerror: ', err);
	};

	channel.onclose = function (err) {
		console.log('** channel.onclose: ', err);
	};
}


// ---------------------------------------------------------------------
// Host object creates the offer for a WebRTC session
function classHost(id) {
	var self = this;
	this.id = id;
	this.peer = new RTC.conn(cfg.server.url,cfg.server.opt);
	this.dataChannel = this.peer.createDataChannel(id, {
		reliable: true
	});

	this.peer.onicecandidate = function (event) {
		if (!event.candidate) { // when ice is complete, there is an event without a candidate (on Chrome anyhow)
			console.log(self.peer);
			self.offer = self.peer.localDescription;
			self.cb(self.offer);
		}
	}

	setChannelEvents(this.dataChannel);
}

classHost.prototype.createOffer = function (cb) {
	var self = this;

	this.peer.createOffer(function (offer) {
		console.log('Host.peer.createOffer callback: ', offer);
		self.cb = cb;
		self.peer.setLocalDescription(offer, function () {
			// We wait for ICE to complete before continuing
			//self.offer = offer;
			//cb(offer);
		}, function (err) {
			console.error(err);
		});
	}, function (err) {
		console.error(err);
	}, null);

}

classHost.prototype.setRemoteDescription = function (answer, cb) {
	var self = this;
	console.log('Host.setRemoteDescription: ', answer);

	var _sd = new RTC.session(answer);

	this.peer.setRemoteDescription(_sd, cb, function (err) {
		console.error(err);
	});
};


// ---------------------------------------------------------------------
// Guest object answers the offer from the host
function classGuest(id) {
	this.id = id;
	this.peer = new RTC.conn(cfg.server.url,cfg.server.opt);

	this.dataChannel = this.peer.createDataChannel(id, {
		reliable: true
	});

	var self = this;
	this.peer.ondatachannel = function (event) {
		console.log('Guest.peer.datachannel: ', event);
		self.dataChannel = event.channel;
		setChannelEvents(self.dataChannel);
	};
	this.peer.onicecandidate = function (event) {
		if (!event.candidate) { // when ice is complete, there is an event without a candidate (on Chrome anyhow)
			self.answer = self.peer.localDescription;
			self.cb(self.answer);
		}
	}
}

classGuest.prototype.setRemoteDescription = function (offer, cb) {
	var self = this;
	var _desc = new RTC.session(offer);
	console.log('Guest desc: ', _desc, offer);

	this.peer.setRemoteDescription(_desc, function () {
		self.offer = offer;
		cb();
	}, function (err) {
		console.error(err);
	});
};

classGuest.prototype.createAnswer = function (cb) {
	var self = this;

	this.peer.createAnswer(function (answer) {
		console.log('Guest.peer.createAnswer callback: ', answer);
		self.answer = answer;
		self.cb = cb;
		self.peer.setLocalDescription(answer, function () {
			// Again, waiting for ICE
			//cb(answer);
		}, function (err) {
			console.error(err);
		});
	}, function (err) {
		console.error(err);
	});
};


// ---------------------------------------------------------------------
//alert(JSON);
function $(id)
{return document.getElementById(id);}

//			$('document').ready(function () {

$("create").onclick = function () {
	$("join").disabled = true;
	$("submitAnswer").disabled = false;

	channelID = $("channel").value;
	host = new classHost(channelID);
	host.createOffer(function (offer) {
		$('offer').value = JSON.stringify(offer);
	})
	return false;
};


$("join").onclick = function () {
	//$("#create").attr("disabled", "disabled");
	//$("#submitAnswer").attr("disabled", "disabled");
	$("create").disabled = true;
	$("submitAnswer").disabled = false;

	channelID = $("channel").value;
	offer = $("offer").value;
	guest = new classGuest(channelID);
	guest.setRemoteDescription(JSON.parse(offer), function () {
		console.log('Guest.setRemoteDescription completed');
		guest.createAnswer(function (answer) {
			$("answer").value = JSON.stringify(answer);
		});
//	guest.dataChannel.send('Guest joined');
	$("message").disabled = false;
	$("send").disabled = false;
	});
	return false;
};

$("submitAnswer").onclick = function () {
	var answer = $("answer").value;
	host.setRemoteDescription(JSON.parse(answer), function () {
		console.log('-- complete');
		// We wait before the data channel is set up, before we transmit anything (peer.onremotedatachannel)
		//host.dataChannel.send('hello world!');
	});
//	host.dataChannel.send('Host joined');
	$("message").disabled = false;
	$("send").disabled = false;
	return false;
};

$("send").onclick = function () {
	var message = $("message").value;
	var name = host && host.id ? 'host' : (guest && guest.id ? 'guest' : 'unknown')
	$("messages").innerHTML += '<br>'+name+'> '+message;
	if (host && host.id)  {host.dataChannel.send(name+'> ' + message);}
	if (guest && guest.id) {guest.dataChannel.send(name+'> ' + message);}
	return false;
};
//			});

/*
$(document).ready(function () {

	$("#create").click(function () {
		$("#join").attr("disabled", "disabled");
		$("#submitAnswer").removeAttr("disabled");

		channelID = $("#channel").val();
		host = new Host(channelID);
		host.createOffer(function (offer) {
			$('#offer').val(JSON.stringify(offer));
		})
		return false;
	});


	$("#join").click(function () {
		$("#create").attr("disabled", "disabled");
		$("#submitAnswer").attr("disabled", "disabled");

		channelID = $("#channel").val();
		offer = $("#offer").val();
		guest = new Guest(channelID);
		guest.setRemoteDescription(JSON.parse(offer), function () {
			console.log('Guest.setRemoteDescription completed');
			guest.createAnswer(function (answer) {
				$("#answer").val(JSON.stringify(answer));
			});
		});
		return false;
	});

	$("#submitAnswer").click(function () {
		var answer = $("#answer").val();
		host.setRemoteDescription(JSON.parse(answer), function () {
			console.log('-- complete');
			// We wait before the data channel is set up, before we transmit anything (peer.onremotedatachannel)
			//host.dataChannel.send('hello world!');
		});
		return false;
	});

});
*/
        </script>
    </body>
</html>
Nahlásit jako SPAM
IP: 2001:718:2601:26c:79ca:ee...–
Reklama
Reklama
ondrej39+1
Věrný člen
9. 2. 2016   #2
-
0
-

Na takovéto dumpy doporučuji spíš VCS než fórum.   

Nahlásit jako SPAM
IP: 78.156.159.–
Inject all the dependencies!
peter
~ Anonymní uživatel
2528 příspěvků
12. 2. 2016   #3
-
0
-

Pro vic uzivatelu je pro kazdeho treba udelat spojeni peer-to-peer.
Stun server - prenasi data. Dalsi server prenasi certifikaty (offer, ansfer), ten muze byt treba web-socket. Casem to doplnim. To jen, kdyby si nekdo chtel hrat nebo nepochopil priklady najdene googlem.

Nahlásit jako SPAM
IP: 2001:718:2601:26c:e587:d5...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 25 hostů

Podobná vlákna

Server pro chat winsock vs boost asio — založil rodinne.baleni.ryze

Java komunikace pres server — založil Yurda

Tip k češtině v C++ — založil hybridfusion

Tip na algoritmus — založil JanK

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý