kawa-/rtcdatachannel.html

## rtcdatachannel.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>RTCDataChannel Example</title>
</head>
<body>
<div>
    <div>
        <h2>RTCDataChannel Example</h2>
        <ul>
            <li>Sending data via local RTCPeerConnection</li>
            <li>RTCDataChannel is used</li>
            <li>Only Chrome. Not Firefox</li>
            <li>Reference: <a href="https://www.webrtc-experiment.com/docs/rtc-datachannel-for-beginners.html">RTCDataChannel
                for Beginners</a></li>
        </ul>
    </div>

    <hr>

    <div>
        <p>Write something and click submit:<br/><input type="text" id="input-text" value="Hi!"><br><input type="submit"
                                                                                                           onclick="clickToSubmit();">
        </p>
    </div>

    <hr>

    <div>
        <p>Here is your writings via local RTCPeerConnection:</p>
        <pre id="input-div"></pre>
    </div>

    <script>
        var iceServers = {
            iceServers: [
                {
                    url: 'stun:stun.l.google.com:19302'
                }
            ]
        };

        var optionalRtpDataChannels = {
            optional: [
                {
                    RtpDataChannels: true
                }
            ]
        };

        var offerer = new webkitRTCPeerConnection(iceServers, optionalRtpDataChannels);
        var answerer;
        var answererDataChannel;

        var offererDataChannel = offerer.createDataChannel('RTCDataChannel', {
            reliable: false
        });
        setChannelEvents(offererDataChannel, 'offerer');

        offerer.onicecandidate = function (event) {
            if (!event || !event.candidate) return;
            answerer && answerer.addIceCandidate(event.candidate);
        };

        var mediaConstraints = {
            optional: [],
            mandatory: {
                OfferToReceiveAudio: false,
                OfferToReceiveVideo: false
            }
        };

        offerer.createOffer(function (sessionDescription) {
            offerer.setLocalDescription(sessionDescription);
            createAnswer(sessionDescription);
        }, function () {
            console.log("Create Offer failed");
        }, mediaConstraints);


        function createAnswer(offerSDP) {
            answerer = new webkitRTCPeerConnection(iceServers, optionalRtpDataChannels);
            answererDataChannel = answerer.createDataChannel('RTCDataChannel', {
                reliable: false
            });

            setChannelEvents(answererDataChannel, 'answerer');

            answerer.onicecandidate = function (event) {
                if (!event || !event.candidate) return;
                offerer && offerer.addIceCandidate(event.candidate);
            };

            answerer.setRemoteDescription(offerSDP);
            answerer.createAnswer(function (sessionDescription) {
                answerer.setLocalDescription(sessionDescription);
                offerer.setRemoteDescription(sessionDescription);
            }, function () {
                console.log("Create Answer failed");
            }, mediaConstraints);
        }

        function setChannelEvents(channel, channelNameForConsoleOutput) {
            channel.onmessage = function (event) {
                console.debug(channelNameForConsoleOutput, 'received a message:', event.data);
                document.getElementById('input-div').innerHTML = event.data;
            };

            channel.onopen = function () {
                //channel.send('first text message over RTP data ports');
            };
            channel.onclose = function (e) {
                console.error(e);
            };
            channel.onerror = function (e) {
                console.error(e);
            };
        }

        function clickToSubmit() {
            var text = document.getElementById("input-text").value;
            offererDataChannel.send(text);
        }
    </script>

</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>RTCDataChannel Example</title>
	</head>
	<body>
	<div>
	<div>
	<h2>RTCDataChannel Example</h2>
	<ul>
	<li>Sending data via local RTCPeerConnection</li>
	<li>RTCDataChannel is used</li>
	<li>Only Chrome. Not Firefox</li>
	<li>Reference: <a href="https://www.webrtc-experiment.com/docs/rtc-datachannel-for-beginners.html">RTCDataChannel
	for Beginners</a></li>
	</ul>
	</div>

	<hr>

	<div>
	<p>Write something and click submit:<br/><input type="text" id="input-text" value="Hi!"><br><input type="submit"
	onclick="clickToSubmit();">
	</p>
	</div>

	<hr>

	<div>
	<p>Here is your writings via local RTCPeerConnection:</p>
	<pre id="input-div"></pre>
	</div>

	<script>
	var iceServers = {
	iceServers: [
	{
	url: 'stun:stun.l.google.com:19302'
	}
	]
	};

	var optionalRtpDataChannels = {
	optional: [
	{
	RtpDataChannels: true
	}
	]
	};

	var offerer = new webkitRTCPeerConnection(iceServers, optionalRtpDataChannels);
	var answerer;
	var answererDataChannel;

	var offererDataChannel = offerer.createDataChannel('RTCDataChannel', {
	reliable: false
	});
	setChannelEvents(offererDataChannel, 'offerer');

	offerer.onicecandidate = function (event) {
	if (!event \|\| !event.candidate) return;
	answerer && answerer.addIceCandidate(event.candidate);
	};

	var mediaConstraints = {
	optional: [],
	mandatory: {
	OfferToReceiveAudio: false,
	OfferToReceiveVideo: false
	}
	};

	offerer.createOffer(function (sessionDescription) {
	offerer.setLocalDescription(sessionDescription);
	createAnswer(sessionDescription);
	}, function () {
	console.log("Create Offer failed");
	}, mediaConstraints);


	function createAnswer(offerSDP) {
	answerer = new webkitRTCPeerConnection(iceServers, optionalRtpDataChannels);
	answererDataChannel = answerer.createDataChannel('RTCDataChannel', {
	reliable: false
	});

	setChannelEvents(answererDataChannel, 'answerer');

	answerer.onicecandidate = function (event) {
	if (!event \|\| !event.candidate) return;
	offerer && offerer.addIceCandidate(event.candidate);
	};

	answerer.setRemoteDescription(offerSDP);
	answerer.createAnswer(function (sessionDescription) {
	answerer.setLocalDescription(sessionDescription);
	offerer.setRemoteDescription(sessionDescription);
	}, function () {
	console.log("Create Answer failed");
	}, mediaConstraints);
	}

	function setChannelEvents(channel, channelNameForConsoleOutput) {
	channel.onmessage = function (event) {
	console.debug(channelNameForConsoleOutput, 'received a message:', event.data);
	document.getElementById('input-div').innerHTML = event.data;
	};

	channel.onopen = function () {
	//channel.send('first text message over RTP data ports');
	};
	channel.onclose = function (e) {
	console.error(e);
	};
	channel.onerror = function (e) {
	console.error(e);
	};
	}

	function clickToSubmit() {
	var text = document.getElementById("input-text").value;
	offererDataChannel.send(text);
	}
	</script>

	</div>
	</body>
	</html>