Skip to content

A
awrtc
Commit 4d232112 by Иван Кубота
Options

all changes

parent 0d5e5afd
Showing with 378 additions and 11 deletions
build/segmentrtc.html
<!DOCTYPE html>
<html>
<head>
<link rel="icon"
type="image/png"
href="favicon.png">
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
......@@ -8,12 +11,58 @@
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/selfie_segmentation.js" crossorigin="anonymous"></script>
<script src="https://form.dev/vanilla/build/rDOM_latest.js"></script>
<style>
@font-face {
font-family: "Amazon Ember";
src: url("font/AmazonEmber_W_Bd.woff2"), url("font/AmazonEmber_W_Bd.woff");
font-weight: bold;
}
@font-face {
font-family: "Amazon Ember";
src: url("font/AmazonEmber_W_Rg.woff2"), url("font/AmazonEmber_W_Rg.woff");
font-weight: normal;
}
* {
font-family: Verdana;
font-family: "Amazon Ember", Verdana;
}
img.logo {
position: absolute;
top: 40px;
left: 40px;
}
html {
height: 100%;
}
.main-content {
margin: 16px 0;
}
#content {
height: 100%;
position: relative;
}
.main-background {
height: 100%;
background: url(/img/back.jpg);
background-size: cover;
background-position-x: center;
}
.main-background:before {
content: '';
position: absolute;
left: 0;
top: 0;
background: rgba(0,0,0,0.5);
right: 0;
bottom: 0;
}
.main-background .p, .main-background .h1 {
color: #fff;
}
.main-background .p {
margin-top: 24px;
}
.top-bar {
height: 64px;
background: #1E143A;
......@@ -22,7 +71,8 @@
}
body {
margin: 0
margin: 0;
height: 100%;
}
.button {
box-sizing: border-box;
......@@ -44,6 +94,60 @@
.buttons {
float: right;
display: flex;
}
.main-buttons {
display: flex;
margin-top: 40px;
}
.sub-content {
position: absolute;
left: 12.4%;
top: 50%;
transform: translateY(-50%);
}
.main-background .button {
margin-right: 16px;
margin-left: 0;
padding: 8px 32px;
font-size: 16px;
}
button.dropdown-field__toggler:after {
content: '▼';
}
button.dropdown-field__toggler {
background: transparent !important;
border: 0;
border-bottom: 2px solid #594CD7;
width: 366px;
position: relative;
text-align: left;
padding: 4px;
font-size: 14px;
line-height: 24px;
cursor: pointer;
}
button.dropdown-field__toggler:after {
content: '▼';
position: absolute;
right: 10px;
font-family: arial;
font-size: 10px;
transform: scaleY(0.7) translateY(4px);
}
.dropdown-field--opened button.dropdown-field__toggler:after {
content: '▲';
}
input[type="text"] {
background: transparent !important;
border: 0;
line-height: 36px;
border-bottom: 2px solid #fff;
font-size: 16px;
color: #fff;
outline: none;
}
input[type="text"]:focus {
border-bottom: 2px solid #594CD7;
}
.content {
......@@ -56,6 +160,18 @@
font-size: 32px;
margin-bottom: 8px;
}
.h1 {
font-size: 40px;
line-height: 64px;
font-style: normal;
font-weight: bold;
}
.p {
font-size: 16px;
line-height: 32px;
font-style: normal;
font-weight: normal;
}
.input {
border: none;
padding: 4px 8px;
......@@ -96,23 +212,48 @@
display: block;
position: absolute;
background: #fff;
border: 2px solid #6aff00;
border: 2px solid #594CD7;
z-index: 1;
padding: 8px 0;
margin-top: -2px;
min-width: 362px;
}
.dropdown-item {
padding: 4px 12px;
padding: 8px 20px;
font-size: 14px;
line-height: 20px;
/* margin-bottom: 8px; */
}
.dropdown-item:hover {
background: #6aff00;
background: #594CD7;
color: #fff;
cursor: pointer;
}
.form-field__label-text {
font-size: 18px;
margin: 16px 0 4px;
font-size: 24px;
font-weight: bold;
margin: 40px 0 4px;
display: block;
line-height: 32px;
}
.form-field {
margin: 2px 0 12px;
}
.canvas-resizer canvas {
display: block;
}
.canvas-resizer {
float: right;
position: relative;
top: 66px;
}
.description.gray {
color: #5C5C5C;
}
.description {
font-size: 14px;
line-height: 24px;
}
</style>
</head>
......@@ -135,9 +276,15 @@
<div class="container">
<video class="input_video" style="display: none"></video>
</div>
<div id="content"></div>
<script src="view/Select.js"></script>
<script src="view/Input.js"></script>
<script src="view/CanvasResizer.js"></script>
<script src="view/Screen.js"></script>
<script src="view/MainScreen.js"></script>
<script src="view/CallScreen.js"></script>
<script src="app.js"></script>
<script src="./bundle/apps.js"></script>
<script>
......
build/view/CanvasResizer.js
AddCss('/view/canvasResizer.css');
const resizeMinGap = 20; //%
var CanvasResizer = function(canvas) {
var leftMover = D.div({cls: 'canvas-resizer--mover canvas-resizer--mover-left'});
var rightMover = D.div({cls: 'canvas-resizer--mover canvas-resizer--mover-right'});
var els = [leftMover, rightMover];
var position = [0, 100];
canvas.addEventListener('mousedown', function(e) {
var percent = e.offsetX/e.currentTarget.clientWidth*100,
moving;
if(percent<position[0]){
moving = 0;
}else if(percent>position[1]){
moving = 1;
}else{
moving = Math.abs(position[0] - percent) < Math.abs(position[1] - percent) ? 0 : 1;
}
var rect = D.getRect(canvas);
var move = function(e) {
var percent = ((e.clientX-rect.left)/(rect.width)*100);
percent = Math.min(percent, 100);
percent = Math.max(percent, 0);
if(moving === 0){
percent = Math.min(position[1]-resizeMinGap, percent);
}
if(moving === 1){
percent = Math.max(position[0]+resizeMinGap, percent);
}
position[moving] = ((percent*10)|0)/10;
els[0].style.width = position[0]+'%';
els[1].style.width = (100-position[1])+'%';
e.preventDefault();
e.stopPropagation();
};
var up = function(e) {
document.removeEventListener('mousemove', move);
document.removeEventListener('mouseup', up);
e.preventDefault();
e.stopPropagation();
}
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', up);
});
var dom = D.div({cls: 'canvas-resizer'}, canvas, leftMover, rightMover);
canvas.position = position;
return dom;
}
\ No newline at end of file
build/view/Input.js
const AddCss = function(href) {
D.h('link', {
href,
rel: 'stylesheet',
renderTo: document.head
})
};
const Input = function(cfg, bind) {
cfg.type = 'text';
cfg.onkeyup = cfg.oninput = cfg.onchange = function() {
store.set(bind, input.value);
};
const input = D.h('input', cfg);
store.sub(bind, function(val) {
input.value = val;
});
return input;
};
const LabeledInput = function(cfg, bind) {
return D.h('label', {},
D.div.apply(D, [{cls: 'label_label'}].concat(cfg.label)),
Input(cfg, bind)
)
}
\ No newline at end of file
build/view/MainScreen.js
Screen.Main = function() {
const showJoinForm = new Store.Value.Boolean(false);
const dom = D.div({cls: 'main-background'},
D.h('img', {src: 'amazon-logo.svg', cls: 'logo'}),
D.div({cls: 'sub-content'},
D.div({cls: ['main-connection-type-select', {hidden: showJoinForm}]},
D.div({cls: 'h1'}, 'Conferences made easy'),
D.div({cls: 'p'},
'Use VR calls with remote guests to immerse in conversation and',
D.h('br'),
'feel more involved'
),
D.div({cls: 'main-buttons'},
D.h('button', {cls: 'button primary', onclick: ()=>Screen.show('Conference')}, 'Create New Session'),
D.h('button', {cls: 'button primary', onclick: ()=> showJoinForm.set(true)}, 'Connect to Session'),
)
),
D.div({cls: ['join-screen', {hidden: Store.NOT(showJoinForm)}]},
D.div({cls: 'h1'}, 'Enter Session ID'),
D.div({cls: 'p'},
Input({placeholder: 'Session ID'}, 'conference_id')
),
D.div({cls: 'main-buttons'},
D.h('button', {cls: 'button primary', onclick: ()=>Screen.show('Conference')}, 'Connect to Session'),
D.h('button', {cls: 'button secondary', onclick: ()=> showJoinForm.set(false)}, 'Go Back'),
)
)
)
);
return dom;
};
\ No newline at end of file
build/view/Screen.js
const Screen = {
cache: {},
show: function(name) {
const renderEl = document.getElementById('content');
D.removeChildren(renderEl);
if(!(name in Screen.cache)){
Screen.cache[ name ] = Screen[ name ]();
}
renderEl.appendChild(Screen.cache[name]);
}
};
\ No newline at end of file
build/view/Select.js
var Select = function(cfg) {
let isOpen = this.isOpen = new Store.Value.Boolean(false);
var table = D.div({cls: 'dropdown-list'}, _=>{
store.sub(cfg.values, function(val) {
if(val){
_(val.map(function(v) {
return D.div({cls: 'dropdown-item', 'data-id': v.value, onclick: function() {
cfg.bind.set(v.value);
isOpen.set(false);
}}, v.text)
}));
}
});
});
var dom = D.div({cls: 'form-field'},
D.div({cls: 'form-field__label'},
D.span({cls: 'form-field__label-text'}, cfg.label),
D.div({cls: ['dropdown-field', {
'dropdown-field--opened': isOpen
}]},
D.h('button', {
cls: 'dropdown-field__toggler',
onclick: () => isOpen.toggle()
},
D.span({cls: D.cls(
"dropdown-field__placeholder", {
"dropdown-field__placeholder--filled": _=>cfg.bind.sub(val=>_(!!(cfg.multivalue ? val && val.length : val && val.name)))
} )},
_ => {
cfg.bind.sub( val => {
if( val ){
var vals = store.get(cfg.values) || [],
theVal = vals.filter(v=>v.value === val)[0];
_(theVal?theVal.text: 'Select')
}else{
_( cfg.placeholder );
}
} );
}
)
),
D.div({cls: 'dropdown-field__tooltip'},
table
)
)
)
);
return dom;
}
\ No newline at end of file
build/view/canvasResizer.css
.canvas-resizer--mover {
position: absolute;
top: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
cursor: ew-resize;
pointer-events: none;
}
.canvas-resizer {
display: none;
}
.canvas-resizer canvas {
cursor: ew-resize;
}
.canvas-resizer--mover-left {
left: 0;
width: 0px;
border-right: 2px solid #594CD7;
}
.canvas-resizer--mover-right {
right: 0;
width: 0px;
border-left: 2px solid #594CD7;
}
\ No newline at end of file
src/apps/videoinputapp.ts
......@@ -299,11 +299,15 @@ export class VideoInputApp {
}
private Ui_OnCleanup() {
store.set('connection', false);
while (this.mUiLocalVideoParent.hasChildNodes()) {
this.mUiLocalVideoParent.removeChild(this.mUiLocalVideoParent.firstChild);
}
while (window['remoteVideoEl'].hasChildNodes()) {
window['remoteVideoEl'].removeChild(window['remoteVideoEl'].firstChild);
if(this.mUiRemoteVideoParent) {
while (this.mUiRemoteVideoParent.hasChildNodes()) {
this.mUiRemoteVideoParent.removeChild(this.mUiRemoteVideoParent.firstChild);
}
}
}
private Ui_OnLog(msg: string) {
......@@ -320,13 +324,15 @@ export class VideoInputApp {
private Ui_OnRemoteVideo(video: HTMLVideoElement, id: awrtc.ConnectionId) {
const D = window['D'];
video.muted = true;
window['remoteVideoEl'].appendChild(
if(this.mUiRemoteVideoParent){
this.mUiRemoteVideoParent.appendChild(
D.div({cls: 'income-video'},
D.div({cls: 'income-video-id'}, 'stream '+id.id),
video
)
);
}
}
public Ui_OnStartStopButtonClicked = () => {
if(store.get('connection') === this.mIsRunning)
......@@ -360,6 +366,7 @@ export class VideoInputApp {
private GenerateRandomKey() {
var result = "LUCID-"+(Math.random()*10|0);
result = store.get('conference_id');
/*for (var i = 0; i < 7; i++) {
result += String.fromCharCode(65 + Math.round(Math.random() * 25));
}*/
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment