Skip to content

Instantly share code, notes, and snippets.

@maowug

maowug/testLocalStream.html

Created August 16, 2015 10:15
Show Gist options
  • Save maowug/687e98bc49834261bcb7 to your computer and use it in GitHub Desktop.
Save maowug/687e98bc49834261bcb7 to your computer and use it in GitHub Desktop.
Download ZIP
test webrtc
Raw
testLocalStream.html
<!doctype html>
<html>
<head>
<title>Self Camera</title>
</head>
<body>
<video id="myVideo" width="400" height="300" autoplay="1" ></video>
<script type="text/javascript">
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);
}
);
</script>
</body>
</html>
Raw
testManualSignalling.html
<!DOCTYPE html>
<html>
<head>
<title>WebRTC 1 to 1 handshake</title>
</head>
<body>
<button type="button" onclick="startVideo();">Start video</button>
<button type="button" onclick="stopVideo();">Stop video</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<button type="button" onclick="connect();">Connect</button>
<button type="button" onclick="hangUp();">Hang Up</button>
<br />
<div>
<video id="local-video" autoplay style="width: 240px; height: 180px; border: 1px solid black;"></video>
<video id="remote-video" autoplay style="width: 240px; height: 180px; border: 1px solid black;"></video>
</div>
<p>
SDP to send:<br />
<textarea id="text-for-send-sdp" rows="5" cols="100" disabled="1">SDP to send</textarea>
</p>
<p>
SDP to receive:<br />
<textarea id="text-for-receive-sdp" rows="5" cols="100"></textarea><br />
<button type="button" onclick="onSDP();">Receive SDP</button>
</p>
<p>
ICE Candidate to send:<br />
<textarea id="text-for-send-ice" rows="5" cols="100" disabled="1">ICE Candidate to send</textarea>
</p>
<p>
ICE Candidates to receive:<br />
<textarea id="text-for-receive-ice" rows="5" cols="100"></textarea><br />
<button type="button" onclick="onICE();">Receive ICE Candidates</button>
</p>
<script>
// ----------------- 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;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment