@api.video/media-stream-person-segmentation
Advanced tools
api.video media stream person segmentation - change the background and emphasize the person in your media streams
api.video is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app.
This library allows you to easily blur the background of a webcam video stream in real-time using TensorFlow.
With this library, you can create a more professional and visually appealing video conferencing experience by keeping the focus on the person in front of the camera and reducing visual distractions from the surrounding environment.
Please note that this project is currently experimental and may not be suitable for production use. This works pretty well on Chrome and Firefox, it may not work as well on Safari.
Include the library in your HTML file like so:
<head>
...
<script src="https://unpkg.com/@api.video/media-stream-person-segmentation" defer></script>
</head>
...
<script type="text/javascript">
navigator.mediaDevices.getUserMedia(constraints).then((webcamStream) => {
const segmentation = new ApiVideoMediaStreamPersonSegmentation(webcamStream)
segmentation.applyBlurEffect()
segmentation.onReady((ouputStream) => {
// use the ouputStream to display the video
// ...
});
});
</script>
The library is instanciated with a MediaStream object as parameter.
const segmentation = new ApiVideoMediaStreamPersonSegmentation(webcamStream)
applyBlurEffect(options: BlurEffectOptions)Apply a blur effect on the background of the video stream.
| Name | Default | Type | Description |
|---|---|---|---|
| backgroundBlurAmount | 15 | number | The amount of blur to apply to the background. |
| edgeBlurAmount | 8 | number | The amount of blur to apply to the edges of the person. |
segmentation.applyBlurEffect({
backgroundBlurAmount: 15,
edgeBlurAmount: 8
})
onReady(callback: (stream: MediaStream) => void)Call the callback when the stream is ready.
segmentation.onReady((stream) => {
// use the stream to display the video
// ...
});
<html>
<head>
<script src="https://unpkg.com/@api.video/media-stream-person-segmentation"></script>
<style>
#container {
display: flex;
flex-direction: column;
align-items: center;
}
#video {
width: 640;
height: 480;
border: 1px solid gray;
}
#container div {
margin: 10px 0;
}
label {
display: inline-block;
width: 160px;
text-align: right;
}
input {
display: inline-block;
width: 300px;
}
</style>
</head>
<body>
<div id="container">
<div>
<video muted id="video"></video>
</div>
<div>
<div>
<label for="blur">Blur background</label>
<input type="range" id="blur" min="0" max="100" value="15" />
</div>
<div>
<label for="blurEdges">Blur edges</label>
<input type="range" id="blurEdges" min="0" max="10" value="8" />
</div>
</div>
</div>
<script>
const video = document.querySelector('#video');
var constraints = window.constraints = {
audio: true,
video: true
};
navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
const segmentation = new ApiVideoMediaStreamPersonSegmentation(stream)
segmentation.applyBlurEffect({
backgroundBlurAmount: 15,
edgeBlurAmount: 8
})
document.getElementById("blur").addEventListener("input", (e) => segmentation.applyBlurEffect({
backgroundBlurAmount: e.target.value
}));
document.getElementById("blurEdges").addEventListener("input", (e) => segmentation.applyBlurEffect({
edgeBlurAmount: e.target.value
}));
segmentation.onReady((stream) => {
video.srcObject = stream;
video.play();
});
});
</script>
</body>
</html>
FAQs
api.video media stream person segmentation - change the background and emphasize the person in your media streams
The npm package @api.video/media-stream-person-segmentation receives a total of 0 weekly downloads. As such, @api.video/media-stream-person-segmentation popularity was classified as not popular.
We found that @api.video/media-stream-person-segmentation demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.