Skip to content

Commit

Permalink
fix state
Browse files Browse the repository at this point in the history
  • Loading branch information
@adwpc
adwpc committed Feb 12, 2021
1 parent 54592a1 commit 575a5b6
Show file tree
Hide file tree
Showing 2 changed files with 231 additions and 6 deletions.
229 changes: 229 additions & 0 deletions pubsub.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>

<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>

<style>
#remotes video {
width: 320px;
}
</style>

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

<body>
<nav class="navbar navbar-light bg-light border-bottom">
<h3>Pion</h3>
</nav>
<div class="container pt-4">
<div class="row" id="start-btns">
<div class="col-12">
<button type="button" class="btn btn-primary" onclick="start(false)">
start
</button>
</div>
</div>

<div class="row">
<div class="col-6 pt-2">
<span
style="position: absolute; margin-left: 5px; margin-top: 5px"
class="badge badge-primary"
>Local</span
>
<video
id="local-video"
style="background-color: black"
width="320"
height="240"
></video>
<div class="controls" style="display: none">
<div class="row pt-3">
<div class="col-3">
<strong>Video</strong>
<div class="radio">
<label
><input
type="radio"
onclick="controlLocalVideo(this)"
value="true"
name="optlocalvideo"
checked
/>
Unmute</label
>
</div>
<div class="radio">
<label
><input
type="radio"
onclick="controlLocalVideo(this)"
value="false"
name="optlocalvideo"
/>
Mute</label
>
</div>
</div>
<div class="col-3">
<strong>Audio</strong>
<div class="radio">
<label
><input
type="radio"
onclick="controlLocalAudio(this)"
value="true"
name="optlocalaudio"
checked
/>
Unmute</label
>
</div>
<div class="radio">
<label
><input
type="radio"
onclick="controlLocalAudio(this)"
value="false"
name="optlocalaudio"
/>
Mute</label
>
</div>
</div>
</div>
</div>
</div>
<div id="remotes" class="col-6 pt-2">
<span
style="position: absolute; margin-left: 5px; margin-top: 5px"
class="badge badge-primary"
>Remotes</span
>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"
></script>
<script src="./dist/ion-sdk.min.js"></script>
<script src="./dist/json-rpc.min.js"></script>
<script>
const localVideo = document.getElementById("local-video");
const remotesDiv = document.getElementById("remotes");

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

const config = {
iceServers: [
{
urls: "stun:stun.l.google.com:19302",
},
],
};

const signalLocal = new Signal.IonSFUJSONRPCSignal(
<!-- "ws://10.91.206.20:7000/ws" -->
<!-- "ws://localhost:7000/ws" -->
<!-- "ws://10.91.205.247:7000/ws" -->
<!-- "ws://123.57.217.51:7000/ws" -->
<!-- "ws://192.168.0.107:7000/ws" -->
"ws://45.77.29.51:7000/ws"
);

const clientLocal = new IonSDK.Client(signalLocal, config);
signalLocal.onopen = () => clientLocal.join("test room");

let localStream;
const start = () => {
IonSDK.LocalStream.getUserMedia({
resolution: "vga",
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);
};

let Exist = (stream) => {
let remoteVideos = remotesDiv.getElementsByTagName("video");
let find = false
for(let item of remoteVideos){
if (stream === item.srcObject){
find = true
}
}
return find
}

clientLocal.ontrack = (track, stream) => {
console.log("got track", track.id, "for stream", stream.id);
if (track.kind === "video") {
track.onunmute = () => {
if (!Exist(stream)){
remoteVideo = document.createElement("video");
remoteVideo.srcObject = stream;
remoteVideo.autoplay = true;
remoteVideo.muted = true;

remotesDiv.appendChild(remoteVideo);
stream.onremovetrack = () => remotesDiv.removeChild(remoteVideo);
}
};
}
};

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");
}
};
</script>
</body>
</html>
8 changes: 2 additions & 6 deletions src/client.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,14 +49,10 @@ export class Transport {
};

this.pc.oniceconnectionstatechange = async (e) => {
if (this.pc.iceConnectionState === "failed") {
if (this.pc.iceConnectionState === "disconnected") {
if (this.pc.restartIce) {
// this will trigger onNegotiationNeeded
this.pc.restartIce();
} else {
const offer = await this.pc.createOffer({ iceRestart: true });
await this.pc.setLocalDescription(offer);
const answer = await this.signal.offer(offer);
await this.pc.setRemoteDescription(answer);
}
}
}
Expand Down

0 comments on commit 575a5b6

Please sign in to comment.