Skip to content

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

milestone1 reverse merge some code

parent 098316bd
Showing with 351 additions and 317 deletions
build/app.js
let content, remoteVideoEl; let content, remoteVideoEl;
var getConferenceID = function() {
return 'DDD'.replace(/D/g, ()=>Math.random()*10|0)
};
const store = window.store = new Store({ const store = window.store = new Store({
conference_id: 'DDD'.replace(/D/g, ()=>Math.random()*10|0), // LUCID conference_id: getConferenceID(), // LUCID
connection: false, connection: false,
webcamtypes: [ webcamtypes: [
{text: 'Center', value: 'Center', filter: 'OfficeUserLeft'}, {text: 'Center', value: 'Center', filter: 'OfficeUserLeft'},
...@@ -19,10 +22,28 @@ const store = window.store = new Store({ ...@@ -19,10 +22,28 @@ const store = window.store = new Store({
const isConnected = new Store.Value.Boolean(false); const isConnected = new Store.Value.Boolean(false);
store.sub('connection', function(val) { store.sub('connection', function(val) {
isConnected.set(val) isConnected.set(val);
}); });
Screen.show('Main'); var params = location.hash.replace('#/','')
.split('&')
.map((key, i)=>{
var tokens = key.split('=')
if(i === 0)
tokens = ['id', tokens[0]];
return tokens;
})
.reduce((store, [key, val])=>{
store[decodeURIComponent(key)] = decodeURIComponent(val);
return store;
}, {});
if(params.id){
store.set('conference_id', params.id);
Screen.show( 'Conference', true );
}else{
Screen.show( 'Main' );
}
......
build/index.html 0 → 100644
<!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>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
<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: "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 {
display: flex;
flex-direction: column;
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: 9px;
}
.top-bar {
height: 64px;
background: #1E143A;
padding: 16px 44px;
box-sizing: border-box;
}
body {
margin: 0;
height: 100%;
}
.button {
box-sizing: border-box;
border-radius: 20px;
padding: 6px 20px;
margin-left: 16px;
cursor: pointer;
}
.button.primary {
background: #584DDA;
color: #fff;
border: 2px solid #584DDA;
}
.button.secondary {
background: transparent;
color: #fff;
border: 2px solid;
}
.buttons {
float: right;
display: flex;
}
.main-buttons {
display: flex;
margin-top: 40px;
}
.sub-content {
position: relative;
margin: auto;
box-sizing: border-box;
padding: 20px;
width: 100%;
max-width: 1124px;
/*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;
min-height: 34px;
position: relative;
text-align: left;
padding: 4px;
font-size: 14px;
line-height: 24px;
cursor: pointer;
}
button.dropdown-field__toggler:after {
content: '▼';
position: absolute;
top: 3px;
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;
}
.page-content {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
margin: auto;
box-sizing: border-box;
padding: 20px;
width: 100%;
max-width: 1124px;
}
.block {
margin-bottom: 40px;
}
.header {
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;
border-bottom: 2px solid #00000066;
width: 366px;
}
.input:focus-visible {
outline: none;
}
.input:focus {
border-bottom: 2px solid #594CD7;
}
.label_label {
display: inline-block;
width: 108px;
font-size: 16px;
padding: 4px 0 0 2px;
}
.callapp_local_video {
display: none;
}
.hidden {
display: none;
}
.income-video {
display: inline-block;
margin: 20px 8px 0 0;
}
.income-video-id {
position: absolute;
z-index: 1;
}
.dropdown-field__tooltip {
display: none;
}
.dropdown-field--opened .dropdown-field__tooltip {
display: block;
position: absolute;
background: #fff;
border: 2px solid #594CD7;
z-index: 1;
padding: 8px 0;
margin-top: -2px;
min-width: 362px;
}
.dropdown-item {
padding: 8px 20px;
font-size: 14px;
line-height: 20px;
/* margin-bottom: 8px; */
}
.dropdown-item:hover {
background: #594CD7;
color: #fff;
cursor: pointer;
}
.form-field__label-text {
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>
<body>
<div id="videoinputapp1">
<!-- URL:
<span class="callapp_url">
</span>-->
<div class="main-content hidden">
<input type="checkbox" name="audio" class="callapp_send_audio" checked autocomplete="off"> Audio
<input type="checkbox" name="video" class="callapp_send_video" checked autocomplete="off"> Video
<div class="callapp_local_video">My camera feed</div>
<div class="callapp_remote_video">Remote video</div>
</div>
</div>
<!--<canvas id="canvas1"> </canvas>-->
<div class="container">
<video class="input_video" style="display: none"></video>
</div>
<div id="content"></div>
<script src="view/Input.js"></script>
<script src="view/Select.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>
store.set('appLoaded', true);
D.ext(D('.callapp_button')[0], {onclick: function() {
}});
</script>
</body>
</html>
build/segmentrtc.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<link rel="icon" <meta charset="UTF-8">
type="image/png" <title>Title</title>
href="favicon.png"> <script>
<meta charset="utf-8"> location.replace('/');
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script> </script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
<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: "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 {
display: flex;
flex-direction: column;
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: 9px;
}
.top-bar {
height: 64px;
background: #1E143A;
padding: 16px 44px;
box-sizing: border-box;
}
body {
margin: 0;
height: 100%;
}
.button {
box-sizing: border-box;
border-radius: 20px;
padding: 6px 20px;
margin-left: 16px;
cursor: pointer;
}
.button.primary {
background: #584DDA;
color: #fff;
border: 2px solid #584DDA;
}
.button.secondary {
background: transparent;
color: #fff;
border: 2px solid;
}
.buttons {
float: right;
display: flex;
}
.main-buttons {
display: flex;
margin-top: 40px;
}
.sub-content {
position: relative;
margin: auto;
box-sizing: border-box;
padding: 20px;
width: 100%;
max-width: 1124px;
/*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;
min-height: 34px;
position: relative;
text-align: left;
padding: 4px;
font-size: 14px;
line-height: 24px;
cursor: pointer;
}
button.dropdown-field__toggler:after {
content: '▼';
position: absolute;
top: 3px;
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;
}
.page-content {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
margin: auto;
box-sizing: border-box;
padding: 20px;
width: 100%;
max-width: 1124px;
}
.block {
margin-bottom: 40px;
}
.header {
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;
border-bottom: 2px solid #00000066;
width: 366px;
}
.input:focus-visible {
outline: none;
}
.input:focus {
border-bottom: 2px solid #594CD7;
}
.label_label {
display: inline-block;
width: 108px;
font-size: 16px;
padding: 4px 0 0 2px;
}
.callapp_local_video {
display: none;
}
.hidden {
display: none;
}
.income-video {
display: inline-block;
margin: 20px 8px 0 0;
}
.income-video-id {
position: absolute;
z-index: 1;
}
.dropdown-field__tooltip {
display: none;
}
.dropdown-field--opened .dropdown-field__tooltip {
display: block;
position: absolute;
background: #fff;
border: 2px solid #594CD7;
z-index: 1;
padding: 8px 0;
margin-top: -2px;
min-width: 362px;
}
.dropdown-item {
padding: 8px 20px;
font-size: 14px;
line-height: 20px;
/* margin-bottom: 8px; */
}
.dropdown-item:hover {
background: #594CD7;
color: #fff;
cursor: pointer;
}
.form-field__label-text {
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> </head>
<body> <body>
<div id="videoinputapp1">
<!-- URL:
<span class="callapp_url">
</span>-->
<div class="main-content hidden">
<input type="checkbox" name="audio" class="callapp_send_audio" checked autocomplete="off"> Audio
<input type="checkbox" name="video" class="callapp_send_video" checked autocomplete="off"> Video
<div class="callapp_local_video">My camera feed</div>
<div class="callapp_remote_video">Remote video</div>
</div>
</div>
<!--<canvas id="canvas1"> </canvas>-->
<div class="container">
<video class="input_video" style="display: none"></video>
</div>
<div id="content"></div>
<script src="view/Input.js"></script>
<script src="view/Select.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>
store.set('appLoaded', true);
D.ext(D('.callapp_button')[0], {onclick: function() {
}});
</script>
</body> </body>
</html> </html>
build/view/CallScreen.js
...@@ -17,7 +17,6 @@ Screen.Conference = function() { ...@@ -17,7 +17,6 @@ Screen.Conference = function() {
awrtc.Media.SharedInstance.VideoInput.AddCanvasDevice(canvas, devname, canvas.width , canvas.height , 30); awrtc.Media.SharedInstance.VideoInput.AddCanvasDevice(canvas, devname, canvas.width , canvas.height , 30);
setInterval(() => { setInterval(() => {
console.log(222);
awrtc.Media.SharedInstance.VideoInput.UpdateFrame(devname); awrtc.Media.SharedInstance.VideoInput.UpdateFrame(devname);
}, 50); }, 50);
//apps.VideoInputApp.sVideoDevice = devname; //apps.VideoInputApp.sVideoDevice = devname;
...@@ -282,7 +281,7 @@ Screen.Conference = function() { ...@@ -282,7 +281,7 @@ Screen.Conference = function() {
D.div({cls: 'block hidden'}, D.div({cls: 'block hidden'},
D.div({cls: 'header'}, 'Conference info'), D.div({cls: 'header'}, 'Conference info'),
LabeledInput({label: 'Session ID', cls: 'callapp_address input', autocomplete: 'off', value: 'DDD'.replace(/D/g, ()=>Math.random()*10|0)}, 'conference_id'), // LUCID LabeledInput({label: 'Session ID', cls: 'callapp_address input', autocomplete: 'off', value: getConferenceID()}, 'conference_id'), // LUCID
), ),
D.div({cls: ['block', {hidden: true}]}, //Store.NOT(isConnected) D.div({cls: ['block', {hidden: true}]}, //Store.NOT(isConnected)
D.div({cls: ['header']}, 'Remote video'), D.div({cls: ['header']}, 'Remote video'),
...@@ -400,7 +399,7 @@ Screen.Conference = function() { ...@@ -400,7 +399,7 @@ Screen.Conference = function() {
console.log('waiting permission') console.log('waiting permission')
try{ try{
await new Promise(((r1, reject) => { await new Promise(((r1, reject) => {
navigator.mediaDevices.getUserMedia( { video: { width: 1280, height: 720 } } ) navigator.mediaDevices.getUserMedia( { audio: true, video: { width: 1280, height: 720 } } )
.then( function( stream ){ .then( function( stream ){
r1(); r1();
resolve(); resolve();
......
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