Skip to content

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

two streams, buggy version

parent 2dde47c8
Showing with 26 additions and 225 deletions
build/app.js 0 → 100644
This diff is collapsed. Click to expand it.
build/segmentrtc.html
...@@ -88,7 +88,24 @@ ...@@ -88,7 +88,24 @@
position: absolute; position: absolute;
z-index: 1; z-index: 1;
} }
</style>
.dropdown-field__tooltip {
display: none;
}
.dropdown-field--opened .dropdown-field__tooltip {
display: block;
position: absolute;
background: #fff;
border: 2px solid #6aff00;
}
.dropdown-item {
padding: 4px 12px;
}
.dropdown-item:hover {
background: #6aff00;
cursor: pointer;
}
</style>
</head> </head>
<body> <body>
...@@ -113,227 +130,10 @@ ...@@ -113,227 +130,10 @@
<script> <script src="app.js"></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'})
)
)
);
function gotDevices(deviceInfos) {
// Handles being called several times to update labels. Preserve values.
var devices = {audioinput: [], audiooutput: [], videoinput: []};
for (let i = 0; i !== deviceInfos.length; ++i) {
const deviceInfo = deviceInfos[i];
const option = {value: deviceInfo.deviceId};
if(!(deviceInfo.kind in devices)){
devices[ deviceInfo.kind ] = [];
}
devices[deviceInfo.kind].push(option);
var count = devices[deviceInfo.kind].length;
if (deviceInfo.kind === 'audioinput') {
option.text = deviceInfo.label || `microphone ${count}`;
} else if (deviceInfo.kind === 'audiooutput') {
option.text = deviceInfo.label || `speaker ${count}`;
} else if (deviceInfo.kind === 'videoinput') {
option.text = deviceInfo.label || `camera ${count}`;
} else {
console.log('Some other kind of source/device: ', deviceInfo);
}
}
console.log(devices);
/*const values = selectors.map(select => select.value);
selectors.forEach(select => {
while (select.firstChild) {
select.removeChild(select.firstChild);
}
});
for (let i = 0; i !== deviceInfos.length; ++i) {
const deviceInfo = deviceInfos[i];
const option = document.createElement('option');
option.value = deviceInfo.deviceId;
if (deviceInfo.kind === 'audioinput') {
option.text = deviceInfo.label || `microphone ${audioInputSelect.length + 1}`;
audioInputSelect.appendChild(option);
} else if (deviceInfo.kind === 'audiooutput') {
option.text = deviceInfo.label || `speaker ${audioOutputSelect.length + 1}`;
audioOutputSelect.appendChild(option);
} else if (deviceInfo.kind === 'videoinput') {
option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
videoSelect.appendChild(option);
} else {
console.log('Some other kind of source/device: ', deviceInfo);
continue;
}
}
selectors.forEach((select, selectorIndex) => {
if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) {
select.value = values[selectorIndex];
}
});*/
}
var handleError = function(e) {
console.log('Error', e)
}
navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
const videoElement = document.getElementsByClassName('input_video')[0];
const canvasElement = window.canvasElement =document.getElementsByClassName('output_canvas')[0];
const segmentations = [false,false,false,false];
let sPointer = 0;
var w = 720, h = 405;
var tmpCanvas = D.h('canvas', {width: w, height: h}),
tmpCtx = tmpCanvas.getContext('2d'),
composedMaskCanvas = D.h('canvas', {width: w, height: h}),
composedMaskCtx = composedMaskCanvas.getContext('2d'),
composedData = composedMaskCtx.getImageData(0,0,w,h),
composedDataData = composedData.data;
const canvasCtx = window.canvasCtx = canvasElement.getContext('2d');
window.onResults = function(results){
var max = Math.max;
tmpCtx.clearRect(0,0,w,h);
tmpCtx.drawImage(results.segmentationMask,0,0,w,h,0,0,w,h);
segmentations[(sPointer++)%4] = tmpCtx.getImageData(0,0,w,h).data;
if(sPointer>3){
for(var i = 3, _i = h*w*4; i < _i; i+=4){
//if( ){
composedDataData[ i ] =
composedDataData[ i - 1 ] = segmentations[ 3 ][i] + segmentations[ 2 ][i] + segmentations[ 1 ][i] + segmentations[ 0 ][i]>120?0:255;
//}
}
composedMaskCtx.putImageData(composedData,0,0);
}
canvasCtx.drawImage(
results.image, 0, 0, canvasElement.width, canvasElement.height );
canvasCtx.drawImage( composedMaskCanvas/*results.segmentationMask*/, 0, 0,
canvasElement.width, canvasElement.height );
// Only overwrite missing pixels.
//canvasCtx.globalCompositeOperation = 'source-in';
/*canvasCtx.fillStyle = '#fff';
canvasCtx.fillRect( 0, 0, canvasElement.width, canvasElement.height );*/
};/*
canvasCtx.save();
canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
canvasCtx.drawImage(results.segmentationMask, 0, 0,
canvasElement.width, canvasElement.height);
// Only overwrite existing pixels.
canvasCtx.globalCompositeOperation = 'source-in';
canvasCtx.fillStyle = '#ffffff';
canvasCtx.fillRect(0, 0, canvasElement.width, canvasElement.height);
// Only overwrite missing pixels.
canvasCtx.globalCompositeOperation = 'destination-atop';
canvasCtx.drawImage(
results.image, 0, 0, canvasElement.width, canvasElement.height);
canvasCtx.restore();
}
*/
const canvas = document.querySelector(".output_canvas");
</script>
<script src="./bundle/apps.js"></script> <script src="./bundle/apps.js"></script>
<script> <script>
let instance =new apps.videoinputapp(document.querySelector("#videoinputapp1"), canvas); store.set('appLoaded', true);
instance.mUiRemoteVideoParent = remoteVideoEl;
var doSegmentation = false;
if(doSegmentation){
const selfieSegmentation = new SelfieSegmentation( {
locateFile: ( file ) => {
return `https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/${file}`;
}
} );
selfieSegmentation.setOptions( {
modelSelection: 1,
} );
selfieSegmentation.onResults( function(){
window.onResults.apply( this, arguments )
} );
const camera = new Camera(videoElement, {
onFrame: async () => {
await selfieSegmentation.send({image: videoElement});
},
width: w,//1280,
height: h//,720
});
camera.start();
}
D.ext(D('.callapp_button')[0], {onclick: function() { D.ext(D('.callapp_button')[0], {onclick: function() {
}}); }});
......
src/apps/videoinputapp.ts
...@@ -6,7 +6,7 @@ import * as awrtc from "../awrtc/index" ...@@ -6,7 +6,7 @@ import * as awrtc from "../awrtc/index"
const store = window['store']; const store = window['store'];
export class VideoInputApp { export class VideoInputApp {
public static sVideoDevice = null; public sVideoDevice = null;
private mAddress; private mAddress;
private mNetConfig = new awrtc.NetworkConfig(); private mNetConfig = new awrtc.NetworkConfig();
private mCall: awrtc.BrowserWebRtcCall = null; private mCall: awrtc.BrowserWebRtcCall = null;
...@@ -72,8 +72,8 @@ export class VideoInputApp { ...@@ -72,8 +72,8 @@ export class VideoInputApp {
config.IdealWidth = 640; config.IdealWidth = 640;
config.IdealHeight = 480; config.IdealHeight = 480;
config.IdealFps = 30; config.IdealFps = 30;
if (VideoInputApp.sVideoDevice !== null) { if (this.sVideoDevice !== null) {
config.VideoDeviceName = VideoInputApp.sVideoDevice; config.VideoDeviceName = this.sVideoDevice;
} }
//For usage in HTML set FrameUpdates to false and wait for MediaUpdate to //For usage in HTML set FrameUpdates to false and wait for MediaUpdate to
...@@ -361,7 +361,8 @@ export class VideoInputApp { ...@@ -361,7 +361,8 @@ export class VideoInputApp {
} }
export function videoinputapp(parent: HTMLElement, canvas: HTMLCanvasElement) { export default VideoInputApp;
/*function videoinputapp(parent: HTMLElement, canvas: HTMLCanvasElement) {
let callApp: VideoInputApp; let callApp: VideoInputApp;
console.log("init callapp"); console.log("init callapp");
if (parent == null) { if (parent == null) {
...@@ -381,4 +382,4 @@ export function videoinputapp(parent: HTMLElement, canvas: HTMLCanvasElement) { ...@@ -381,4 +382,4 @@ export function videoinputapp(parent: HTMLElement, canvas: HTMLCanvasElement) {
callApp.setupUi(parent); callApp.setupUi(parent);
} }*/
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