JSFiddle - React, Tailwind, and code Playground
HTML
Browser SDP <br />
<textarea id="localSessionDescription" readonly="true"></textarea>
<br />
<button onclick="window.copySDP()">
Copy browser SDP to clipboard
</button>
<br />
<br />
<br />
Application SDP<br />
<textarea id="remoteSessionDescription"></textarea> <br />
<button onclick="window.startSession()"> Start Session </button><br />
<br />
Video<br />
<div id="remoteVideos"></div> <br />
Logs<br />
<div id="div"></div>
CSS
textarea {
width: 500px;
min-height: 75px;
}
JavaScript
/* eslint-env browser */
let pc = new RTCPeerConnection({
iceServers: [{
urls: 'stun:stun.l.google.com:19302'
}]
})
let log = msg => {
document.getElementById('div').innerHTML += msg + '<br>'
}
pc.ontrack = function(event) {
var el = document.createElement(event.track.kind)
el.srcObject = event.streams[0]
el.autoplay = true
el.controls = true
document.getElementById('remoteVideos').appendChild(el)
}
pc.oniceconnectionstatechange = e => log(pc.iceConnectionState)
pc.onicecandidate = event => {
if (event.candidate === null) {
document.getElementById('localSessionDescription').value = btoa(JSON.stringify(pc.localDescription))
}
}
// Offer to receive 1 audio, and 1 video track
pc.addTransceiver('video', {
'direction': 'sendrecv'
})
pc.addTransceiver('audio', {
'direction': 'sendrecv'
})
pc.createOffer().then(d => pc.setLocalDescription(d)).catch(log)
window.startSession = () => {
let sd = document.getElementById('remoteSessionDescription').value
if (sd === '') {
return alert('Session Description must not be empty')
}
try {
pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(atob(sd))))
} catch (e) {
alert(e)
}
}
window.copySDP = () => {
let browserSDP = document.getElementById('localSessionDescription')
browserSDP.focus();
browserSDP.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
log('Copying SDP was ' + msg);
} catch (err) {
log('Oops, unable to copy SDP ' + err);
}
}