Skip to content

Commit

Permalink
Adjust biz logic. (#199)
Browse files Browse the repository at this point in the history
* Add token and metadata.

* Modify IonConnector to be pluggable.

* Improve code for IonService.

* update.

* update.

* update.

* use rtc.proto for sfu signal.

* clean

* ts lint.

* Add web-dev to npm scripts.

* update rtc.proto.

* update.

* Remove duplicate Track interface.

* update.

* update.

* fix typo.

* update.

* update.

* update rtc.proto.

* update.

* (fix): move demo to example; fix proto

* update

* update

* update

* cleanup.

* (fix): update var name

* (fix): hide connect

* update

* fix.

* (feat): add tool for rtc demo; support safari/chrome/firefox cross-browser compatibility(h264/vp8)

* (feat): optm demo

* (feat): optm demo

* (feat): fix h264 profile

* (feat): add basic demo

* (fix):black screen

* (fix): add cm for room

* (fix): add cm for rtc

* (fix): add cm for connector

* (fix): tslint ignore

* (fix): send message

* (fix): readme for examples

Co-authored-by: adwpc <[email protected]>
  • Loading branch information
cloudwebrtc and adwpc committed Nov 5, 2021
1 parent dc3e2df commit 6ecd657
Show file tree
Hide file tree
Showing 58 changed files with 32,208 additions and 9,998 deletions.
8 changes: 8 additions & 0 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
FROM mhart/alpine-node:12

RUN npm i -g [email protected]
RUN apk --no-cache add protobuf make

WORKDIR /workspace

ENTRYPOINT ["make"]
18 changes: 18 additions & 0 deletions Makefile
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
all: download proto

proto-gen-from-docker:
docker build -t ts-protoc .
docker run -v $(CURDIR):/workspace ts-protoc proto

proto:
mkdir -p src/_library
#sudo npm i -g [email protected]
protoc ./ion/proto/ion/ion.proto -I./ion --plugin=protoc-gen-ts=/usr/local/bin/protoc-gen-ts --js_out=import_style=commonjs,binary:./src/_library --ts_out=service=grpc-web:./src/_library
protoc ./ion/proto/rtc/rtc.proto -I./ion --plugin=protoc-gen-ts=/usr/local/bin/protoc-gen-ts --js_out=import_style=commonjs,binary:./src/_library --ts_out=service=grpc-web:./src/_library
protoc ./ion/apps/room/proto/room.proto -I./ion --plugin=protoc-gen-ts=/usr/local/bin/protoc-gen-ts --js_out=import_style=commonjs,binary:./src/_library --ts_out=service=grpc-web:./src/_library

download:
git clone https://github.com/pion/ion --depth=1

clean:
rm -rf src/_library
12 changes: 12 additions & 0 deletions examples/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
## 1. ion-sfu example

* [examples](https://github.com/pion/ion-sfu/tree/master/examples)



## 2. ion cluster example

* ion-echo

* ion-pubsub

341 changes: 341 additions & 0 deletions examples/ion-echo/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,341 @@
<!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>
pre {
outline: 1px solid #ccc;
padding: 5px;
margin: 5px;
}

.string {
color: green;
}

.number {
color: darkorange;
}

.boolean {
color: blue;
}

.null {
color: magenta;
}

.key {
color: red;
}
</style>

<title>Pion ion-sfu | Echotest</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>
<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
<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">
<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 class="col-6 pt-2">
<span
style="position: absolute; margin-left: 5px; margin-top: 5px"
class="badge badge-primary"
>Remote</span
>
<span
id="size-tag"
style="position: absolute; margin-left: 5px; top: 225px"
class="badge badge-primary"
></span>
<span
id="br-tag"
style="position: absolute; left: 215px; top: 225px"
class="badge badge-primary"
></span>
<video
id="remote-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 id="simulcast-controls" style="display: none">
<div class="radio">
<label><input
type="radio"
onclick="controlRemoteVideo(this)"
value="high"
name="optremotevideos"
checked
/>High</label>
</div>
<div class="radio">
<label><input
type="radio"
onclick="controlRemoteVideo(this)"
value="medium"
name="optremotevideos"
/>Medium</label>
</div>
<div class="radio">
<label><input
type="radio"
onclick="controlRemoteVideo(this)"
value="low"
name="optremotevideos"
/>Low</label>
</div>
<div class="radio">
<label><input
type="radio"
onclick="controlRemoteVideo(this)"
value="none"
name="optremotevideos"
/>Mute</label>
</div>
</div>

<div id="simple-controls" style="display: none">
<div class="radio">
<label
><input
type="radio"
onclick="controlRemoteVideo(this)"
value="high"
name="optremotevideo"
checked
/>
Unmute</label
>
</div>
<div class="radio">
<label
><input
type="radio"
onclick="controlRemoteVideo(this)"
value="none"
name="optremotevideo"
/>
Mute</label
>
</div>
</div>
</div>
<div class="col-3">
<strong>Audio</strong>
<div class="radio">
<label
><input
type="radio"
onclick="controlRemoteAudio(this)"
value="true"
name="optremoteaudio"
checked
/>
Unmute</label
>
</div>
<div class="radio">
<label
><input
type="radio"
onclick="controlRemoteAudio(this)"
value="false"
name="optremoteaudio"
/>
Mute</label
>
</div>
</div>
</div>
<strong class="d-block">API call</strong>
<pre
id="api"
class="d-block border"
style="
background-color: #f8f9fa;
height: 117px;
width: 320px;
margin: 5px 0;
"
></pre>
</div>
</div>
</div>
<div class="row">
<div class="col-12 pt-4">Data</div>
</div>
<div class="row">
<div class="col-6 pt-2">
<textarea
id="local-data"
class="d-block border"
style="
background-color: #f8f9fa;
height: 117px;
width: 320px;
margin: 5px 0;
padding: 5px;
"
placeholder="Send a message"
></textarea>
<button type="button" class="btn btn-primary" onclick="sendMsg()">
send
</button>
</div>
<div class="col-6 pt-2">
<pre
id="remote-data"
class="d-block border"
style="
background-color: #f8f9fa;
height: 117px;
width: 320px;
margin: 5px 0;
"
></pre>
</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="https://unpkg.com/[email protected]/dist/ion-sdk.min.js"></script> -->
<!-- <script src="https://unpkg.com/[email protected]/dist/json-rpc.min.js"></script> -->
<script src="build/bundle.js"></script>
<script src="./main.js"></script>
</body>
</html>
Loading

0 comments on commit 6ecd657

Please sign in to comment.