Skip to content

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

Wrap together segmentation and rtc call

parent dad25b72
Showing with 115 additions and 4 deletions
build/segmentrtc.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<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="./bundle/apps.js"></script>
<style>
* {
font-family: Verdana;
}
.main-content {
margin: 16px 0;
}
</style>
</head>
<body>
<div id="videoinputapp1">
URL:
<span class="callapp_url">
</span>
<div class="main-content">
<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>
</div>
<!--<canvas id="canvas1"> </canvas>-->
<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">
const videoElement = document.getElementsByClassName('input_video')[0];
const canvasElement = window.canvasElement =document.getElementsByClassName('output_canvas')[0];
const canvasCtx = window.canvasCtx = canvasElement.getContext('2d');
window.onResults = function(results){
canvasCtx.save();
canvasCtx.clearRect( 0, 0, canvasElement.width, canvasElement.height );
canvasCtx.drawImage( results.segmentationMask, 0, 0,
canvasElement.width, canvasElement.height );
// Only overwrite missing pixels.
canvasCtx.globalCompositeOperation = 'source-in';
canvasCtx.drawImage(
results.image, 0, 0, canvasElement.width, canvasElement.height );
canvasCtx.globalCompositeOperation = 'destination-over';
canvasCtx.fillStyle = '#fff';
canvasCtx.fillRect( 0, 0, canvasElement.width, canvasElement.height );
canvasCtx.restore();
};/*
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");
apps.videoinputapp(document.querySelector("#videoinputapp1"), canvas);
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: 1280,
height: 720
});
camera.start();
</script>
</body>
</html>
\ No newline at end of file
src/apps/callapp.ts
...@@ -411,7 +411,7 @@ export class CallApp ...@@ -411,7 +411,7 @@ export class CallApp
this.mMediaConfig.IdealWidth = this.UI_ParseRes(this.mUiWidth); this.mMediaConfig.IdealWidth = this.UI_ParseRes(this.mUiWidth);
this.mMediaConfig.IdealHeight = this.UI_ParseRes(this.mUiHeight); this.mMediaConfig.IdealHeight = this.UI_ParseRes(this.mUiHeight);
this.mUiUrl.innerHTML = this.ValuesToParameter(); this.mUiUrl.innerHTML = `<a href="${this.ValuesToParameter()}">${this.ValuesToParameter()}</a>`;
} }
//Values to UI //Values to UI
public Ui_ValuesToUi() : void public Ui_ValuesToUi() : void
...@@ -433,10 +433,10 @@ export class CallApp ...@@ -433,10 +433,10 @@ export class CallApp
private GenerateRandomKey() { private GenerateRandomKey() {
var result = ""; var result = "LUCID-"+(Math.random()*10|0);
for (var i = 0; i < 7; i++) { /*for (var i = 0; i < 7; i++) {
result += String.fromCharCode(65 + Math.round(Math.random() * 25)); result += String.fromCharCode(65 + Math.round(Math.random() * 25));
} }*/
return result; return result;
} }
private GetUrlParams() { private GetUrlParams() {
......
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