Skip to content

Commit

Permalink
update example
Browse files Browse the repository at this point in the history
  • Loading branch information
@adwpc
adwpc committed Nov 8, 2021
1 parent aa41932 commit 06695c9
Show file tree
Hide file tree
Showing 2 changed files with 353 additions and 235 deletions.
276 changes: 41 additions & 235 deletions examples/echotest/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
}
</style>

<title>Pion ion | Echotest</title>
<title>Pion ion-sfu | Echotest</title>
</head>

<body>
Expand All @@ -60,11 +60,30 @@ <h3>Pion</h3>
<button type="button" class="btn btn-primary" onclick="start(true)">
start with simulcast
</button>
<button type="button" class="btn btn-primary" onclick="joinRoom()">
joinRoom
</button>
<button type="button" class="btn btn-primary" onclick="leaveRoom()">
leaveRoom
</button>
</div>
</div>

<div class="row">
<div class="col-12 pt-4">Media</div>
<div class="col-12 pt-4">Media
<select id="select-box1">
<option value="vp8" selected="selected" >vp8</option>
<option value="h264">h264</option>
</select>
<select id="select-box2">
<option value="qvga">qvga_320_180</option>
<option value="vga" selected="selected" >vga_640_360</option>
<option value="shd">shd_960_540</option>
<option value="hd">hd_1280_720</option>
<option value="fhd">fhd_1980_1080</option>
<option value="qhd">qhd_2560_1440</option>
</select>
</div>
</div>
<div class="row">
<div class="col-6 pt-2">
Expand All @@ -84,29 +103,26 @@ <h3>Pion</h3>
<div class="col-3">
<strong>Video</strong>
<div class="radio">
<label
><input
<label><input
type="radio"
onclick="controlLocalVideo(this)"
value="true"
name="optlocalvideo"
checked
/>
Unmute</label
>
/>Unmute</label>
</div>

<div class="radio">
<label
><input
type="radio"
onclick="controlLocalVideo(this)"
value="false"
name="optlocalvideo"
/>
Mute</label
>
/>Mute</label>
</div>
</div>

<div class="col-3">
<strong>Audio</strong>
<div class="radio">
Expand Down Expand Up @@ -149,7 +165,7 @@ <h3>Pion</h3>
></span>
<span
id="br-tag"
style="position: absolute; left: 270px; top: 225px"
style="position: absolute; left: 215px; top: 225px"
class="badge badge-primary"
></span>
<video
Expand All @@ -164,48 +180,37 @@ <h3>Pion</h3>
<strong>Video</strong>
<div id="simulcast-controls" style="display: none">
<div class="radio">
<label
><input
<label><input
type="radio"
onclick="controlRemoteVideo(this)"
value="high"
name="optremotevideos"
/>
High</label
>
checked
/>High</label>
</div>
<div class="radio">
<label
><input
<label><input
type="radio"
onclick="controlRemoteVideo(this)"
value="medium"
name="optremotevideos"
/>
Medium</label
>
/>Medium</label>
</div>
<div class="radio">
<label
><input
<label><input
type="radio"
onclick="controlRemoteVideo(this)"
value="low"
name="optremotevideos"
/>
Low</label
>
/>Low</label>
</div>
<div class="radio">
<label
><input
<label><input
type="radio"
onclick="controlRemoteVideo(this)"
value="none"
name="optremotevideos"
/>
Mute</label
>
/>Mute</label>
</div>
</div>

Expand Down Expand Up @@ -293,7 +298,7 @@ <h3>Pion</h3>
"
placeholder="Send a message"
></textarea>
<button type="button" class="btn btn-primary" onclick="send()">
<button type="button" class="btn btn-primary" onclick="sendMsg()">
send
</button>
</div>
Expand Down Expand Up @@ -328,208 +333,9 @@ <h3>Pion</h3>
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/uuid@latest/dist/umd/uuidv4.min.js"></script>
<script src="https://unpkg.com/ion-sdk-js@1.5.3/dist/ion-sdk.min.js"></script>
<script>
const localVideo = document.getElementById("local-video");
const remoteVideo = document.getElementById("remote-video");
const localData = document.getElementById("local-data");
const remoteData = document.getElementById("remote-data");
const sizeTag = document.getElementById("size-tag");
const brTag = document.getElementById("br-tag");
let simulcast = false;
let localDataChannel;

remoteVideo.addEventListener("loadedmetadata", function () {
sizeTag.innerHTML = `${remoteVideo.videoWidth}x${remoteVideo.videoHeight}`;
});

remoteVideo.onresize = function () {
sizeTag.innerHTML = `${remoteVideo.videoWidth}x${remoteVideo.videoHeight}`;
};

/* eslint-env browser */
const joinBtns = document.getElementById("start-btns");

const getQueryVariable = (key) => {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == key){return pair[1];}
}
return(false);
};

const sid = getQueryVariable("sid") || "room1"
const uid = getQueryVariable("uid") || uuidv4()

const signalLocal = new IonSDK.IonSFUJSONRPCSignal(
//"ws://localhost:8443/ws?uid=tony&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOiJ0b255IiwicmlkIjoicm9vbTEifQ.mopgibW3OYONYwzlo-YvkDIkNoYJc3OBQRsqQHZMnD8"
"ws://localhost:8443/ws?uid=" + uuidv4()
);
const signalRemote = new IonSDK.IonSFUJSONRPCSignal(
"ws://localhost:8443/ws?uid=" + uuidv4()
);

const clientLocal = new IonSDK.Client(signalLocal);
const clientRemote = new IonSDK.Client(signalRemote);

let localStream;
const start = (sc) => {
clientLocal.join(sid);
clientRemote.join(sid);
simulcast = sc;
IonSDK.LocalStream.getUserMedia({
resolution: "hd",
simulcast: sc,
audio: true,
})
.then((media) => {
localStream = media;
localVideo.srcObject = media;
localVideo.autoplay = true;
localVideo.controls = true;
localVideo.muted = true;
joinBtns.style.display = "none";
clientLocal.publish(media);
})
.catch(console.error);
localDataChannel = clientLocal.createDataChannel("data");
};

const send = () => {
if (localDataChannel.readyState === "open") {
localDataChannel.send(localData.value);
}
};

let remoteStream;
clientRemote.ontrack = (track, stream) => {
if (track.kind === "video") {
remoteStream = stream;
remoteVideo.srcObject = stream;
remoteVideo.autoplay = true;

getStats();

document
.querySelectorAll(".controls")
.forEach((el) => (el.style.display = "block"));
if (simulcast) {
document.getElementById("simulcast-controls").style.display =
"block";
} else {
document.getElementById("simple-controls").style.display = "block";
}
}
};

clientRemote.ondatachannel = ({ channel }) => {
channel.onmessage = ({ data }) => {
remoteData.innerHTML = data;
};
};

const api = {
streamId: "",
video: "high",
audio: true,
};

const controlRemoteVideo = (radio) => {
remoteStream.preferLayer(radio.value);

// update ui
api.streamId = remoteStream.id;
api.video = radio.value;
const str = JSON.stringify(api, null, 2);
document.getElementById("api").innerHTML = syntaxHighlight(str);
};

const controlRemoteAudio = (radio) => {
if (radio.value === "true") {
remoteStream.mute("audio");
} else {
remoteStream.unmute("audio");
}

// update ui
api.streamId = remoteStream.id;
api.audio = radio.value === "true";
const str = JSON.stringify(api, null, 2);
document.getElementById("api").innerHTML = syntaxHighlight(str);
};

const controlLocalVideo = (radio) => {
if (radio.value === "false") {
localStream.mute("video");
} else {
localStream.unmute("video");
}
};

const controlLocalAudio = (radio) => {
if (radio.value === "false") {
localStream.mute("audio");
} else {
localStream.unmute("audio");
}
};

function syntaxHighlight(json) {
json = json
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;");
return json.replace(
/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
function (match) {
let cls = "number";
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = "key";
} else {
cls = "string";
}
} else if (/true|false/.test(match)) {
cls = "boolean";
} else if (/null/.test(match)) {
cls = "null";
}
return '<span class="' + cls + '">' + match + "</span>";
}
);
}

getStats = () => {
let bytesPrev;
let timestampPrev;
setInterval(() => {
clientRemote.getSubStats(null).then((results) => {
results.forEach((report) => {
const now = report.timestamp;

let bitrate;
if (
report.type === "inbound-rtp" &&
report.mediaType === "video"
) {
const bytes = report.bytesReceived;
if (timestampPrev) {
bitrate = (8 * (bytes - bytesPrev)) / (now - timestampPrev);
bitrate = Math.floor(bitrate);
}
bytesPrev = bytes;
timestampPrev = now;
}
if (bitrate) {
brTag.innerHTML = `${bitrate} kbps`;
}
});
});
}, 1000);
};
</script>
<script src="https://unpkg.com/ion-sdk-js@1.8.0/dist/ion-sdk.min.js"></script>
<script src="https://unpkg.com/ion-sdk-js@1.8.0/dist/ion-connector.min.js"></script>
<!-- <script src="build/bundle.js"></script> -->
<script src="./main.js"></script>
</body>
</html>
Loading

0 comments on commit 06695c9

Please sign in to comment.