test webrtc

u.go
2015-08-16T10:15:33Z

testLocalStream.html

|
|
|
| Self Camera
|
|
|
|
|
| navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia;
| window.URL = window.URL || window.webkitURL;
|
| var video = document.getElementById('myVideo');
| var localStream = null;
| navigator.getUserMedia({video: true, audio: false},
| function(stream) { // for success case
| console.log(stream);
| video.src = window.URL.createObjectURL(stream);
| },
| function(err) { // for error case
| console.log(err);
| }
| );
|
|
|

testManualSignalling.html

|
|
|
| WebRTC 1 to 1 handshake
|
|
| Start video
| Stop video
| &nbsp;&nbsp;&nbsp;&nbsp;
| Connect
| Hang Up
|
|
|
|
|
|
|
| SDP to send:
| SDP to send
|
|
|
| SDP to receive:
|
| Receive SDP
|
|
|
| ICE Candidate to send:
| ICE Candidate to send
|
|
| ICE Candidates to receive:
|
| Receive ICE Candidates
|
|
|
|
| // ----------------- init --------------
|
| var textForSendSDP = document.getElementById('text-for-send-sdp');
| var textForSendICE = document.getElementById('text-for-send-ice');
| var textToReceiveSDP = document.getElementById('text-for-receive-sdp');
| var textToReceiveICE = document.getElementById('text-for-receive-ice');
| var iceSeparator = '------ ICE Candidate -------';
| var CR = String.fromCharCode(13);
|
| var localVideo = document.getElementById('local-video');
| var remoteVideo = document.getElementById('remote-video');
| var localStream = null;
| var peerConnection = null;
| var peerStarted = false;
| var mediaConstraints = {'mandatory': {'OfferToReceiveAudio':true, 'OfferToReceiveVideo':true }};
|
|
| //only display #SDP in this demo
| function sendSDP(sdp) {
| var text = JSON.stringify(sdp);
| console.log("---sending sdp text ---");console.log(text);
| textForSendSDP.value = text;
| }
|
| //only display #ICE in this demo
| function sendCandidate(candidate) {
| var text = JSON.stringify(candidate);
| console.log("---sending candidate text ---");console.log(text);
| textForSendICE.value = (textForSendICE.value + CR + iceSeparator + CR + text + CR);
| textForSendICE.scrollTop = textForSendICE.scrollHeight;
| }
|
|
| // ---------------------- handling connection -----------------------
| function prepareNewConnection() {
| var pc_config = {
| "iceServers":[]
| };
| var peer = null;
| try {
| peer = new webkitRTCPeerConnection(pc_config);
| } catch (e) {
| console.log("Failed to create peerConnection, exception: " + e.message);
| }
| // send any ice candidates to the other peer
| // peerConnection.addIceCandidate(candidate);
| peer.onicecandidate = function (evt) {
| if (evt.candidate) {
| console.log(evt.candidate);
| // display #ICE
| sendCandidate(
| {
| type: "candidate",
| sdpMLineIndex: evt.candidate.sdpMLineIndex,
| sdpMid: evt.candidate.sdpMid,
| candidate: evt.candidate.candidate
| }
| );
| } else {
| //ICE Candidate generated async
| console.log("End of candidates. --- phase=" + evt.eventPhase);
| }
| };
|
| console.log('Adding local stream...');
| peer.addStream(localStream);
| //addEventListener to RTCPeerConnection
| peer.addEventListener("addstream", onRemoteStreamAdded, false);
| peer.addEventListener("removestream", onRemoteStreamRemoved, false)
| // when remote stream in
| function onRemoteStreamAdded(event) {
| console.log("Added remote stream");
| remoteVideo.src = window.webkitURL.createObjectURL(event.stream);
| }
| // when remote removes a stream
| function onRemoteStreamRemoved(event) {
| console.log("Remove remote stream");
| remoteVideo.src = "";
| }
| return peer;
| }//eof prepareNewConnection
|
|
| // ----------------------//1 video handling -----------------------
| // start localStream
| function startVideo() {
| navigator.webkitGetUserMedia(
| {video: true, audio: false}
| , function (stream) { // success callback
| localStream = stream;
| localVideo.src = window.webkitURL.createObjectURL(stream);
| localVideo.play();
| localVideo.volume = 0;
| }, function (error) { // error
| console.error('An error occurred: [CODE ' + error.code + ']');
| return;
| }
| );
| }
|
| // stop local video
| function stopVideo() {
| localVideo.src = "";
| localStream.stop();
| }
|
|
| // --------//2 start with handling click event -----
|
| // start the connection upon user request
| function connect() {
| //if (!peerStarted && localStream && channelReady) {
| if (!peerStarted && localStream) {
| sendOffer();
| peerStarted = true;
| } else {
| alert("Local stream not running yet - try again.");
| }
| }
|
| // `connect` then sendOffer
| function sendOffer() {
| //global peerConnection inited to null
| peerConnection = prepareNewConnection();
| // create #SDP
| peerConnection.createOffer(
| // success callback
| function (sessionDescription) {
| peerConnection.setLocalDescription(sessionDescription);
| // to display local #SDP
| console.log("Sending: SDP: ", sessionDescription);sendSDP(sessionDescription);
| }
| ,function () {// error
| console.log("Create Offer failed");
| }
| ,mediaConstraints);
| }
|
| //on the remote side, when click on "SDP to receive"
| function onSDP() {
| var text = textToReceiveSDP.value;
| var evt = JSON.parse(text);
| //if peerConnection then onAnswer else onOffer
| if (peerConnection) {
| // just an aswer to `onOffer` from remote side
| onAnswer(evt);
| }
| else {
| // in the remote side: receive offer from local
| onOffer(evt);
| }
| textToReceiveSDP.value ="";
| }
|
| // IF//1 peerConnection, set answer -> setRemoteDescription to my RTCPeerConnection instance
| function onAnswer(evt) {
| console.log("Received Answer...");console.log(evt);
| setAnswer(evt);
| }
|
| function setAnswer(evt) {
| if (! peerConnection) {
| console.error('peerConnection NOT exist!');
| return;
| }
| peerConnection.setRemoteDescription(new RTCSessionDescription(evt));
| }
|
| // ELSE//2 on offer
| function onOffer(evt) {
| console.log("Received offer...");console.log(evt);
| setOffer(evt);
| sendAnswer(evt);
| }
|
| function setOffer(evt) {
| //set remote side #SDP
| if (peerConnection) {
| console.error('peerConnection alreay exist!');
| }
| peerConnection = prepareNewConnection();
| peerConnection.setRemoteDescription(new RTCSessionDescription(evt));
| }
|
| function sendAnswer(evt) {
| console.log('sending Answer. Creating remote session description...' );
| if (! peerConnection) {
| console.error('peerConnection NOT exist!');
| return;
| }
| peerConnection.createAnswer(function (sessionDescription) { // in case of success
| peerConnection.setLocalDescription(sessionDescription);
| // to display #SDP
| console.log("Sending: SDP");console.log(sessionDescription);sendSDP(sessionDescription);
| }, function () { // in case of error
| console.log("Create Answer failed");
| }, mediaConstraints);
| }
|
| // similarly, when click on "receive ICE"
| // multi ICE candidate
| function onICE() {
| var text = textToReceiveICE.value;
| var arr = text.split(iceSeparator);
| for (var i = 1, len = arr.length; i < len; i++) {
| var evt = JSON.parse(arr[i]);
| onCandidate(evt);
| }
|
| textToReceiveICE.value ="";
| }
|
| function onCandidate(evt) {
| var candidate = new RTCIceCandidate({sdpMLineIndex:evt.sdpMLineIndex, sdpMid:evt.sdpMid, candidate:evt.candidate});
| console.log("Received Candidate...");console.log(candidate);
| peerConnection.addIceCandidate(candidate);
| }
|
| //
|
|
|
| // stop the connection upon user request
| function hangUp() {
| console.log("Hang up.");
| //stop() ->
| peerConnection.close();
| peerConnection = null;
| peerStarted = false;
| }
|
|
|
|