Skip to content

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

stylize, hack transparency, write some app logic

parent 684a4863
Showing with 195 additions and 31 deletions
build/amazon-logo.svg 0 → 100644
<svg width="88" height="32" viewBox="0 0 88 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.63192 4H10.1722C11.1963 4.05596 12.2439 4.27109 13.12 4.82819C13.6976 5.19813 14.1739 5.74093 14.4158 6.38694C14.6912 7.1113 14.7154 7.89782 14.7167 8.66321C14.7142 10.1965 14.7154 11.7304 14.7148 13.2636C14.7117 13.7188 14.7832 14.1813 14.984 14.593C15.1619 14.9766 15.4435 15.2955 15.6754 15.645C15.8023 15.8253 15.8222 16.1057 15.6307 16.2499C15.0599 16.7368 14.4904 17.2255 13.9308 17.7254C13.7778 17.8578 13.6068 18.0139 13.3892 17.9965C13.1436 17.9909 12.9869 17.7739 12.8135 17.6303C12.3813 17.2504 12.0655 16.766 11.7465 16.2922C11.2031 16.8381 10.6162 17.366 9.90674 17.6856C9.2657 17.9797 8.55316 18.0717 7.85368 18.0817C6.83461 18.1196 5.75834 17.8249 5.02653 17.0837C4.33637 16.4029 4.04041 15.4205 4 14.4717V14.0458C4.03606 13.0578 4.37741 12.0661 5.04953 11.3293C5.74342 10.5447 6.7314 10.0877 7.73617 9.85078C8.8914 9.57285 10.0802 9.49202 11.2572 9.35834C11.2361 8.65326 11.3617 7.86984 10.9525 7.2456C10.6068 6.74197 9.94466 6.57036 9.36269 6.62259C8.76767 6.66425 8.16456 6.94839 7.84435 7.46819C7.69326 7.68891 7.63855 7.95378 7.55959 8.20497C7.50114 8.39275 7.32207 8.56933 7.11192 8.53637C6.39503 8.46611 5.68 8.37907 4.96311 8.30881C4.79088 8.29264 4.6 8.26155 4.4887 8.1142C4.33326 7.92394 4.4371 7.66964 4.48187 7.45824C4.71378 6.51254 5.2715 5.64394 6.06798 5.07627C7.09513 4.32953 8.38342 4.05098 9.63192 4ZM9.09907 11.6396C8.63212 11.8093 8.1913 12.1009 7.92643 12.5299C7.62114 13.018 7.55461 13.6199 7.6199 14.182C7.67834 14.6589 7.90218 15.1482 8.32808 15.4012C8.87586 15.7258 9.60145 15.6369 10.1057 15.2682C10.6852 14.8504 11.0259 14.1708 11.1652 13.4831C11.297 12.7749 11.2473 12.0512 11.2578 11.3349C10.5304 11.3405 9.78798 11.3884 9.09907 11.6396Z" fill="white"/>
<path d="M41.9044 4H42.4466C43.3674 4.04601 44.2995 4.2257 45.1214 4.65845C45.7942 5.01161 46.3699 5.57679 46.6653 6.28435C46.9712 7.01306 47.0048 7.81762 47.0072 8.59793C47.0054 10.1536 47.006 11.7092 47.0054 13.2655C47.0048 13.6665 47.0557 14.0738 47.2106 14.4468C47.3728 14.8566 47.6526 15.2023 47.9082 15.5561C48.0251 15.7146 48.1177 15.9329 48.0232 16.1237C47.9436 16.2475 47.8199 16.3333 47.7111 16.429C47.1913 16.8642 46.6839 17.3132 46.1759 17.7621C46.0454 17.8727 45.9005 17.9983 45.7183 17.9971C45.451 18.0126 45.2794 17.777 45.0953 17.6222C44.6669 17.2448 44.3529 16.7641 44.0377 16.2929C43.2978 17.0508 42.4242 17.7552 41.3573 17.9585C40.2195 18.1668 38.9598 18.1743 37.9364 17.5656C37.097 17.0812 36.5529 16.1878 36.3838 15.2458C36.1631 14.0645 36.3173 12.7699 37.0031 11.7602C37.5658 10.9134 38.4605 10.3333 39.418 10.0249C40.7523 9.59337 42.1637 9.51938 43.5478 9.35834C43.5304 8.7142 43.628 8.02839 43.3451 7.42591C43.1386 6.97326 42.6636 6.70466 42.1855 6.63813C41.5457 6.55047 40.84 6.70715 40.3712 7.17223C40.11 7.42218 39.9621 7.76166 39.8806 8.1086C39.8358 8.33927 39.6406 8.58301 39.3807 8.53513C38.6309 8.45617 37.881 8.37596 37.1318 8.29264C36.9073 8.27959 36.6729 8.09679 36.6972 7.8543C36.8533 6.74757 37.4638 5.70301 38.3822 5.05762C39.4012 4.32829 40.6709 4.05409 41.9044 4ZM41.2348 11.6999C40.7368 11.9057 40.2922 12.28 40.0796 12.7836C39.8676 13.2848 39.8352 13.8543 39.944 14.3847C40.0342 14.8155 40.2848 15.234 40.6858 15.4392C41.2236 15.7159 41.9032 15.6232 42.3869 15.2738C42.954 14.8715 43.2947 14.2149 43.4427 13.5478C43.5931 12.8203 43.5366 12.0723 43.5484 11.3343C42.7668 11.3418 41.9635 11.3946 41.2348 11.6999Z" fill="white"/>
<path d="M21.8278 4.91769C22.6404 4.16723 23.8385 3.99127 24.8931 4.20391C25.6143 4.34629 26.2504 4.79707 26.6707 5.39396C26.9132 5.7235 27.1028 6.08847 27.2688 6.46153C27.5679 5.65448 28.1405 4.93759 28.9115 4.54028C29.9225 4.01303 31.1753 3.98443 32.2143 4.44951C32.9486 4.77842 33.5778 5.38028 33.8651 6.14008C34.102 6.76432 34.1474 7.4408 34.1554 8.10298C34.1306 11.1073 34.1449 14.1123 34.1405 17.1173C34.1299 17.315 34.1797 17.5388 34.0553 17.7111C33.9546 17.8597 33.7687 17.9206 33.5952 17.9113C32.8068 17.9088 32.0184 17.9144 31.2301 17.9088C30.977 17.9131 30.7476 17.6874 30.7625 17.4313C30.7606 15.1917 30.7612 12.9515 30.7625 10.7113C30.7612 9.98443 30.8023 9.25386 30.719 8.52951C30.663 8.09241 30.4528 7.63044 30.0313 7.43894C29.5264 7.21945 28.904 7.22878 28.4352 7.5322C28.0814 7.7523 27.8184 8.10919 27.7096 8.51085C27.5629 9.04432 27.5536 9.60391 27.5442 10.1535C27.5424 12.5809 27.5455 15.0083 27.5424 17.435C27.5561 17.6912 27.3254 17.9156 27.0717 17.9088C26.2802 17.9144 25.4887 17.9088 24.6972 17.9113C24.4765 17.9274 24.2427 17.7975 24.1842 17.5755C24.1532 17.4257 24.1675 17.2715 24.165 17.1198C24.1662 14.9641 24.1612 12.8078 24.1637 10.6522C24.1631 9.88432 24.2234 9.10028 24.0269 8.34919C23.9163 7.92267 23.6458 7.5036 23.2124 7.35438C22.8058 7.21759 22.3432 7.22878 21.9478 7.39852C21.5523 7.57075 21.2931 7.95313 21.1637 8.3523C20.9728 8.93365 20.9548 9.5523 20.9449 10.1585C20.9424 12.584 20.9461 15.0089 20.943 17.4338C20.9567 17.6856 20.7328 17.9113 20.4823 17.9082C19.6709 17.9144 18.8595 17.9106 18.0481 17.9094C17.7932 17.9206 17.5488 17.6999 17.5668 17.4387C17.5656 13.2474 17.5656 9.05614 17.5668 4.86546C17.5469 4.6037 17.7888 4.37925 18.045 4.38982C18.7948 4.38484 19.5447 4.38733 20.2945 4.38857C20.5295 4.37427 20.7658 4.55831 20.7795 4.79894C20.7963 5.36785 20.7733 5.938 20.7907 6.50754C21.0512 5.9293 21.3409 5.34236 21.8278 4.91769Z" fill="white"/>
<path d="M65.2099 4.17417C66.2955 4.03303 67.4358 4.17169 68.4164 4.67531C69.2141 5.08008 69.8819 5.71614 70.3693 6.46226C70.9824 7.39925 71.3349 8.48671 71.5028 9.58848C71.7745 11.4301 71.6234 13.3843 70.7871 15.0699C70.3824 15.8826 69.8104 16.6206 69.081 17.1659C67.2829 18.535 64.544 18.5188 62.7907 17.0795C62.0215 16.4546 61.4601 15.6034 61.092 14.69C60.6176 13.5118 60.4373 12.231 60.4528 10.9663C60.469 9.74205 60.6767 8.50661 61.1704 7.38122C61.559 6.49645 62.1422 5.68319 62.92 5.10122C63.5853 4.59822 64.3849 4.28423 65.2099 4.17417ZM65.5158 6.77625C64.9357 6.94972 64.5751 7.50122 64.3973 8.04962C64.0727 9.04754 64.0845 10.1126 64.0864 11.1503C64.0945 12.0867 64.1274 13.0355 64.3712 13.9452C64.5086 14.4332 64.7156 14.9331 65.1161 15.2639C65.4493 15.5462 65.915 15.6183 66.3347 15.535C66.8228 15.4517 67.2226 15.0967 67.4483 14.6676C67.8555 13.896 67.932 13.0044 67.9768 12.1483C68.0079 10.9955 68.0079 9.83345 67.812 8.69376C67.7044 8.16464 67.5913 7.59822 67.2238 7.18039C66.8072 6.7091 66.0972 6.61521 65.5158 6.77625Z" fill="white"/>
<path d="M77.8951 4.8431C78.5088 4.29533 79.3575 4.09699 80.1633 4.1231C80.9685 4.1343 81.7899 4.39481 82.3874 4.9488C82.7772 5.3057 83.0806 5.75958 83.2448 6.26321C83.5196 7.08642 83.5569 7.9631 83.5855 8.82362V17.5513C83.5177 17.7652 83.3163 17.9206 83.09 17.9094C82.2823 17.9119 81.474 17.9138 80.6663 17.9082C80.4151 17.9119 80.182 17.6912 80.205 17.4344C80.2056 14.9455 80.2006 12.456 80.2075 9.96704C80.2037 9.38756 80.1957 8.79502 80.0178 8.23792C79.9009 7.8686 79.6634 7.51419 79.2978 7.35751C78.8129 7.14673 78.2147 7.20518 77.7963 7.53533C77.2846 7.91709 77.0769 8.56062 76.9557 9.16124C76.7865 10.1057 76.8668 11.07 76.8475 12.0238C76.8462 13.8263 76.85 15.6294 76.8462 17.4319C76.8587 17.6887 76.6274 17.9119 76.3743 17.9076C75.5853 17.9163 74.7963 17.9082 74.0079 17.9113C73.7766 17.9293 73.5254 17.7869 73.4837 17.5476C73.4539 17.3231 73.4726 17.0968 73.4694 16.8711C73.4688 12.8694 73.4657 8.86715 73.467 4.86487C73.4464 4.6031 73.6858 4.37989 73.9426 4.39046C74.6918 4.38424 75.4423 4.38611 76.1921 4.38984C76.4234 4.38051 76.6665 4.56331 76.6622 4.80704C76.6734 5.44186 76.6491 6.07792 76.6746 6.71274C76.9892 6.03813 77.3144 5.33492 77.8951 4.8431Z" fill="white"/>
<path d="M50.0041 4.80904C49.9892 4.54044 50.2479 4.32345 50.5096 4.35453C53.1826 4.35516 55.8568 4.35329 58.5297 4.35516C58.7815 4.33277 59.0309 4.54168 59.0215 4.80096C59.029 5.2592 59.0191 5.71868 59.0253 6.17754C59.0669 6.69422 58.6783 7.09091 58.4172 7.49319C57.0182 9.49215 55.618 11.4905 54.2203 13.4901C55.6448 13.4584 57.1034 13.6461 58.4029 14.2592C58.6062 14.3612 58.8201 14.4519 58.9979 14.5974C59.2012 14.7734 59.2752 15.0532 59.2671 15.3137C59.2628 15.9168 59.2709 16.5199 59.2634 17.123C59.2603 17.3661 59.0315 17.6117 58.7778 17.5663C58.6099 17.5135 58.4601 17.4177 58.3003 17.3469C55.8624 16.2177 52.9258 16.2078 50.4928 17.3556C50.3318 17.4283 50.1807 17.5241 50.0128 17.5794C49.7604 17.613 49.5428 17.3643 49.5434 17.1237C49.5372 16.6449 49.544 16.1661 49.5415 15.6874C49.544 15.2584 49.5154 14.8144 49.6646 14.4041C49.7498 14.1442 49.9252 13.9297 50.0775 13.7077C51.6182 11.4961 53.1602 9.28573 54.6997 7.07412C53.2827 7.07101 51.8651 7.07847 50.4481 7.07039C50.2056 7.07661 49.9886 6.85899 50.0041 6.61526C50.001 6.01339 50.0004 5.41091 50.0041 4.80904Z" fill="white"/>
<path d="M53.3399 18.5392C54.239 18.4453 55.1517 18.4547 56.044 18.6039C56.4164 18.6754 56.8 18.7519 57.1314 18.9459C57.4063 19.1019 57.4062 19.4594 57.428 19.7355C57.4436 20.7073 57.2197 21.6679 56.9132 22.585C56.4568 23.9001 55.7536 25.1697 54.6873 26.0868C54.5405 26.2136 54.3242 26.3473 54.1321 26.2404C53.9928 26.1409 54.0338 25.9488 54.0904 25.8145C54.5039 24.7749 54.9136 23.7297 55.2071 22.6485C55.3377 22.143 55.4626 21.6263 55.4489 21.1009C55.4402 20.8528 55.3762 20.5699 55.148 20.4331C54.7464 20.1944 54.2632 20.167 53.8087 20.1347C52.4956 20.0775 51.1861 20.2398 49.8836 20.3852C49.7604 20.3977 49.6075 20.3828 49.5403 20.264C49.4688 20.1266 49.5559 19.9705 49.6541 19.8723C49.8058 19.728 49.9911 19.6255 50.1683 19.516C51.1327 18.9508 52.2357 18.6605 53.3399 18.5392Z" fill="#FF9900"/>
<path d="M15.3745 19.355C15.6717 19.2138 15.9472 19.4656 16.1977 19.5937C22.0013 22.8803 28.6187 24.6741 35.2759 24.9191C41.2491 25.1342 47.2572 23.984 52.7604 21.6636C53.1372 21.4975 53.6806 21.7096 53.713 22.1547C53.7378 22.5359 53.3872 22.7659 53.1124 22.955C51.6624 23.9865 50.0844 24.8289 48.4473 25.521C46.0641 26.5245 43.5534 27.2159 40.9998 27.6182C39.8502 27.8109 38.6862 27.8855 37.5273 27.9999H34.9121C34.1213 27.9091 33.3254 27.8781 32.5351 27.7792C29.6191 27.4379 26.7497 26.6886 24.045 25.5433C20.8653 24.2003 17.9132 22.317 15.3602 19.9941C15.1644 19.8368 15.1264 19.4799 15.3745 19.355Z" fill="#FF9900"/>
</svg>
build/segmentrtc.html
......@@ -6,7 +6,7 @@
<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="./bundle/apps.js"></script>
<script src="https://form.dev/vanilla/build/rDOM_latest.js"></script>
<style>
* {
font-family: Verdana;
......@@ -14,21 +14,93 @@
.main-content {
margin: 16px 0;
}
.top-bar {
height: 64px;
background: #1E143A;
padding: 21px 44px;
box-sizing: border-box;
}
body {
margin: 0
}
.button {
box-sizing: border-box;
border-radius: 20px;
padding: 4px 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;
}
.content {
margin: 112px 178px;
}
.block {
margin-bottom: 40px;
}
.header {
font-size: 32px;
margin-bottom: 8px;
}
.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 0 0 0;
}
.income-video-id {
position: absolute;
z-index: 1;
}
</style>
</head>
<body>
<div id="videoinputapp1">
URL:
<!-- URL:
<span class="callapp_url">
</span>
<div class="main-content">
</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
<input type= "text" class="callapp_address" autocomplete="off">
<button class="callapp_button"> Join </button>
<div class="callapp_local_video">My camera feed</div>
<div class="callapp_remote_video">Remote video</div>
</div>
......@@ -37,12 +109,75 @@
<div class="container">
<video class="input_video" style="display: none"></video>
<canvas class="output_canvas" width="1280px" height="720px" style="display: none"></canvas>
</div>
<script type="module">
<script>
let content, remoteVideoEl;
const store = window.store = new Store({
conference_id: 'SelfieBarracuda_con',
connection: false
});
const Input = function(cfg, bind) {
cfg.onkeyup = cfg.oninput = cfg.onchange = function() {
store.set(bind, input.value);
};
var 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)
)
}
const isConnected = new Store.Value.Boolean(false);
store.sub('connection', function(val) {
isConnected.set(val)
});
D.div({cls: 'top-bar', renderTo: document.body},
D.h('img', {src: 'amazon-logo.svg'}),
D.div({cls: 'buttons'},
D.h('button', {cls: ['button secondary', {hidden: Store.NOT(isConnected)}], onclick: ()=>store.set('connection', false)}, 'End session'),
D.h('button', {cls: ['button primary', {hidden: isConnected}], onclick: ()=>store.set('connection', true)}, 'Ready to connect')
),
content = D.div({cls: 'content'},
D.div({cls: 'block'},
D.div({cls: 'header'}, 'My camera feed'),
D.h('canvas', {
cls: "output_canvas",
width: "1280px",
height: "720px",
style: {
/*display: 'none',*/
width: '320px'
}
})
),
D.div({cls: 'block'},
D.div({cls: 'header'}, 'Conference info'),
LabeledInput({label: 'Session ID', cls: 'callapp_address input', autocomplete: 'off', value: 'SelfieBarracuda_con'}, 'conference_id'),
),
D.div({cls: ['block', {hidden: Store.NOT(isConnected)}]},
D.div({cls: ['header']}, 'Remote video'),
remoteVideoEl = window.remoteVideoEl = D.div({cls: 'remote-video'})
)
)
);
const videoElement = document.getElementsByClassName('input_video')[0];
const canvasElement = window.canvasElement =document.getElementsByClassName('output_canvas')[0];
const canvasCtx = window.canvasCtx = canvasElement.getContext('2d');
......@@ -84,8 +219,12 @@
}
*/
const canvas = document.querySelector(".output_canvas");
</script>
<script src="./bundle/apps.js"></script>
<script>
let instance =new apps.videoinputapp(document.querySelector("#videoinputapp1"), canvas);
instance.mUiRemoteVideoParent = remoteVideoEl;
apps.videoinputapp(document.querySelector("#videoinputapp1"), canvas);
const selfieSegmentation = new SelfieSegmentation({locateFile: (file) => {
return `https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/${file}`;
}});
......@@ -104,7 +243,12 @@
height: 720
});
camera.start();
D.ext(D('.callapp_button')[0], {onclick: function() {
}});
</script>
</body>
</html>
\ No newline at end of file
src/apps/videoinputapp.ts
......@@ -3,6 +3,8 @@ import * as awrtc from "../awrtc/index"
/**
* Copy of the CallApp to test custom video input
*/
const store = window['store'];
export class VideoInputApp {
public static sVideoDevice = null;
private mAddress;
......@@ -223,26 +225,25 @@ export class VideoInputApp {
private mAudio;
private mVideo;
private mAutostart;
private mUiAddress: HTMLInputElement;
private mUiAudio: HTMLInputElement;
private mUiVideo: HTMLInputElement;
private mUiButton: HTMLButtonElement;
private mUiUrl: HTMLElement;
private mUiLocalVideoParent: HTMLElement;
private mUiRemoteVideoParent: HTMLElement;
public setupUi(parent: HTMLElement) {
this.mUiAddress = parent.querySelector<HTMLInputElement>(".callapp_address");
this.mUiAudio = parent.querySelector<HTMLInputElement>(".callapp_send_audio");
this.mUiVideo = parent.querySelector<HTMLInputElement>(".callapp_send_video");
this.mUiUrl = parent.querySelector<HTMLParagraphElement>(".callapp_url");
this.mUiButton = parent.querySelector<HTMLInputElement>(".callapp_button");
this.mUiLocalVideoParent = parent.querySelector<HTMLParagraphElement>(".callapp_local_video");
this.mUiRemoteVideoParent = parent.querySelector<HTMLParagraphElement>(".callapp_remote_video");
this.mUiAudio.onclick = this.Ui_OnUpdate;
this.mUiVideo.onclick = this.Ui_OnUpdate;
this.mUiAddress.onkeyup = this.Ui_OnUpdate;
this.mUiButton.onclick = this.Ui_OnStartStopButtonClicked;
store.sub('conference_id', this.Ui_OnUpdate);
store.sub('connection', this.Ui_OnStartStopButtonClicked)
//set default value + make string "true"/"false" to proper booleans
this.mAudio = this.GetParameterByName("audio");
......@@ -282,15 +283,15 @@ export class VideoInputApp {
console.log("address: " + this.mAddress + " audio: " + this.mAudio + " video: " + this.mVideo + " autostart: " + this.mAutostart);
}
private Ui_OnStart() {
this.mUiButton.textContent = "Stop";
store.set('connection', true)
}
private Ui_OnCleanup() {
this.mUiButton.textContent = "Join";
store.set('connection', false);
while (this.mUiLocalVideoParent.hasChildNodes()) {
this.mUiLocalVideoParent.removeChild(this.mUiLocalVideoParent.firstChild);
}
while (this.mUiRemoteVideoParent.hasChildNodes()) {
this.mUiRemoteVideoParent.removeChild(this.mUiRemoteVideoParent.firstChild);
while (window['remoteVideoEl'].hasChildNodes()) {
window['remoteVideoEl'].removeChild(window['remoteVideoEl'].firstChild);
}
}
private Ui_OnLog(msg: string) {
......@@ -305,14 +306,19 @@ export class VideoInputApp {
}
private Ui_OnRemoteVideo(video: HTMLVideoElement, id: awrtc.ConnectionId) {
this.mUiRemoteVideoParent.appendChild(document.createElement("br"));
this.mUiRemoteVideoParent.appendChild(new Text("connection " + id.id));
this.mUiRemoteVideoParent.appendChild(document.createElement("br"));
this.mUiRemoteVideoParent.appendChild(video);
const D = window['D'];
window['remoteVideoEl'].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)
return;
if (this.mIsRunning) {
this.Stop();
......@@ -323,18 +329,19 @@ export class VideoInputApp {
}
public Ui_OnUpdate = () => {
console.debug("OnUiUpdate");
this.mAddress = this.mUiAddress.value;
this.mAddress = store.get('conference_id');
this.mAudio = this.mUiAudio.checked;
this.mVideo = this.mUiVideo.checked;
this.mUiUrl.innerHTML = `<a href="${this.GetUrl()}">${this.GetUrl()}</a>`;
store.set('url', this.GetUrl())
}
public Ui_Update(): void {
console.log("UpdateUi");
this.mUiAddress.value = this.mAddress;
store.set('conference_id', this.mAddress);
this.mUiAudio.checked = this.mAudio;
this.mUiVideo.checked = this.mVideo;
this.mUiUrl.innerHTML = `<a href="${this.GetUrl()}">${this.GetUrl()}</a>`;
store.set('url', this.GetUrl())
}
......
src/awrtc/media_browser/VideoInput.ts
......@@ -279,6 +279,7 @@ class CanvasDevice {
//ctx.fillStyle = "#FF0000";
//ctx.fillRect(0, 0, this.scaling_canvas.width, this.scaling_canvas.height);
//ctx.clearRect(0, 0, this.scaling_canvas.width, this.scaling_canvas.height)
ctx.clearRect(0,0, this.scaling_canvas.width, this.scaling_canvas.height);
ctx.drawImage(this.canvas, 0, 0, this.scaling_canvas.width, this.scaling_canvas.height);
}
}
......
webpack.config.js
......@@ -141,8 +141,8 @@ module.exports =
[
configAwrtcDebug,
configAwrtcRelease,
configTest,
//configTest,
examplesConfigDebug,
examplesConfigRelease
//examplesConfigRelease
];
\ No newline at end of file
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