Skip to content

How to get SDP from the browser.

April 19, 2014

I love small working sample to understand what is going under the hood without bogged down by unnecessary details. Here small step by step instruction along with full functional working code to generate SDP from the browser.

Here are steps.

1) Create stun config.


var pc_config = {
"iceServers": [{ "url": "stun:stun1.l.google.com:19302" }]
};

2) Create RTCPeerconnection with this config

try {
pc = new RTCPeerConnection(pc_config);
} catch (e) {
console.log("Failed to create PeerConnection, exception: " + e.message);
}

3)  Write callback for ice candidates

 

pc.onicecandidate = function (evt) {
if (evt.candidate) {
console.log('ICE candidate:');
console.log(evt.candidate);
} else {

console.log("End of candidates.");
if (pc != null) {
var sdp = pc.localDescription;
console.log(sdp);
}

}

};

 

4) call get user media and pass callback

 


navigator.webkitGetUserMedia({video: true,audio:true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
video.controls = true;
localMediaStream = stream;

dumpOffer(stream);
}, errorCallback);

 

5 ) In callback set the local sdp in peer connection.

// st
pc.addStream(stream);

pc.createOffer(function(offer) {

pc.setLocalDescription(offer);

console.log("offer created");
console.log(offer.sdp);
}, errorCallback);

Here full functional code


<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div style="text-align:center;">
 <video id="basic-stream" class="videostream" autoplay></video>
 <p><button id="capture-button">Capture video</button> <button id="stop-button">Stop</button></p>
</div>

<h2 id="toc-screenshot">Taking screenshots</h2>

<script>
function errorCallback(e) {
 if (e.code == 1) {
 alert('User denied access to their camera');
 } else {
 alert('getUserMedia() not supported in your browser.');
 }

}

window.IceCandidate = window.RTCIceCandidate || window.mozRTCIceCandidate || window.RTCIceCandidate;

 RTCPeerConnection = webkitRTCPeerConnection || mozRTCPeerConnection;
 var pc_config = {
 "iceServers": [{ "url": "stun:stun1.l.google.com:19302" }]
 };
 try {
 pc = new RTCPeerConnection(pc_config);
 } catch (e) {
 console.log("Failed to create PeerConnection, exception: " + e.message);
 }

//-------------------------------
 pc.onicecandidate = function (evt) {
 if (evt.candidate) {
 console.log('ICE candidate:');
 console.log(evt.candidate);
 } else {

 console.log("End of candidates.");
 if (pc != null) {
 var sdp = pc.localDescription;
 console.log(sdp);
 }

 }

 };

//----------------

function dumpOffer(stream){

 // st
 pc.addStream(stream);

 pc.createOffer(function(offer) {

 pc.setLocalDescription(offer);

 console.log("offer created");
 console.log(offer.sdp);

 }, errorCallback);

 //end

}

(function() {
var video = document.querySelector('#basic-stream');
var button = document.querySelector('#capture-button');
var localMediaStream = null;

button.addEventListener('click', function(e) {
 if (navigator.getUserMedia) {
 navigator.getUserMedia('video', function(stream) {
 video.src = stream;
 video.controls = true;
 localMediaStream = stream;
 dumpOffer(stream);
 }, errorCallback);
 } else if (navigator.webkitGetUserMedia) {
 navigator.webkitGetUserMedia({video: true,audio:true}, function(stream) {
 video.src = window.URL.createObjectURL(stream);
 video.controls = true;
 localMediaStream = stream;

 dumpOffer(stream);

 }, errorCallback);
 } else {
 errorCallback({target: video});
 }
}, false);

document.querySelector('#stop-button').addEventListener('click', function(e) {
 video.pause();
 localMediaStream.stop(); // Doesn't do anything in Chrome.
}, false);
})();
</script>
</body>
</html>
Advertisements

From → Tech

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: