{"_id":"@api.video/media-stream-person-segmentation","_rev":"4-c22c587ca60df58af1fbd0dca5ccb3fd","name":"@api.video/media-stream-person-segmentation","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@api.video/media-stream-person-segmentation","version":"0.0.1","keywords":["mediastream","person","segmentation","background"],"author":{"url":"https://api.video/","name":"api.video","email":"ecosystem@api.video"},"license":"MIT","_id":"@api.video/media-stream-person-segmentation@0.0.1","maintainers":[{"name":"apivideo-ecosystem","email":"ecosystem@api.video"},{"name":"anthony.dantard","email":"hello@api.video"},{"name":"olivierapivideo","email":"olivier@api.video"}],"homepage":"https://github.com/apivideo/api.video-typescript-media-stream-person-segmentation#readme","bugs":{"url":"https://github.com/apivideo/api.video-typescript-media-stream-person-segmentation/issues"},"dist":{"shasum":"a49d0bb8f4065a04c4a77b1dfc75b27323721dfc","tarball":"https://registry.npmjs.org/@api.video/media-stream-person-segmentation/-/media-stream-person-segmentation-0.0.1.tgz","fileCount":14,"integrity":"sha512-wpi+leILnY7ZLJNRhvRLeN3OBSNzxEB2xweDdfNbKJ/V/U6Ty3BZdBRJ4YHuygkCyVhKCJYrkU97RyXskA04Kw==","signatures":[{"sig":"MEYCIQC/6Blz1Rcm/IHOzGWeAxC15nxkb0dw2RFZVNssyG5cEwIhAMvDFoqEa+KKsgnlBL4jAvnGEr8X2TmHJsQ3Sn2F2+Zz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":873075,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfuvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6Fg//TMpLtOIuaZkgZyXl/jqYHLD2Uama03CFiQ27i24E9ufFCWH8\r\nCyxWtqN8CT4bwyClKJYDBswQ6uFPCrujc4L6D4pqG4t22ou0oFFu/auLkOkb\r\naL+gtu4DiApt4em68sXAAOw6ET8zIylsuHrZ+Xjfu0LLsUxI1JhN5gNl2yd5\r\nB2mITehZfDG59IM+z/NuyRKN8d5z515oB/djFTo/XzrSTL1qlzvdlSfS66PG\r\nwng/xhfUJL/AyliMcDKfkYHhiJMEr54XB9FgDI6WPd6RAkMyEybPmVkKdS3J\r\nxaOLKDZramZi2RsO6iJM7qGVbpUQGUc/eMsplik2wsmCnrndz2HTNG6PiRnq\r\ne4dqhR2cvEQ8hLu6EVNMswSFNto43pWycI56BWLFz2MuLey3t76yGlHOlGJf\r\n+0BhwogN8fzBGPyARsObyUF2/Z+qkVZAx8C2MkwXyc/Xkxg72wxTCad8Rknp\r\ndjXFw9f1QAaUeZYWEsv7UQbY45In80yapRv8o4naqhYKUT3zXTQhfT7p4ahx\r\nCHfPNEw/FJQ+0BTT5JHz1u9pmbFEPvajuSRC+ka5Gc8C5paE5dxERLYKKWEt\r\nz+O6AWGlD18m/YfAl8sEW3LqBesT+FiVDotXeSmv73Zlv/ASxNE0f31xdVdk\r\n0yAwD992vsYFmjSUY7XsNZBgNy1PpQRy/v4=\r\n=WB7U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","types":"dist/src/index.d.ts","module":"dist/index.js","gitHead":"c8a4e553f03f4d5df7b4536b0356afcce11c9496","scripts":{"test":"npm run build && mocha -r ts-node/register -r jsdom-global/register 'test/**/*.ts'","build":"npm run tslint && webpack --mode production","watch":"webpack --mode development --watch","tslint":"tslint --project .","prepublishOnly":"npm run build"},"_npmUser":{"name":"olivierapivideo","email":"olivier@api.video"},"repository":{"url":"git+ssh://git@github.com/apivideo/api.video-typescript-media-stream-person-segmentation.git","type":"git"},"_npmVersion":"9.5.0","description":"api.video media stream person segmentation - change the background and emphasize the person in your media streams","directories":{},"_nodeVersion":"18.14.2","dependencies":{"core-js":"^3.23.3","@tensorflow/tfjs":"^4.2.0","@tensorflow/tfjs-core":"^3.21.0","@tensorflow/tfjs-converter":"^3.21.0","@tensorflow-models/body-pix":"^2.2.0"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.3.6","jsdom":"^20.0.0","mocha":"^10.0.0","tslint":"^6.1.3","ts-node":"^10.8.2","webpack":"^5.73.0","xhr-mock":"^2.5.1","ts-loader":"^9.3.1","typescript":"^4.7.4","@types/chai":"^4.3.1","webpack-cli":"^4.10.0","@types/jsdom":"^16.2.14","@types/mocha":"^9.1.1","jsdom-global":"^3.0.2"},"_npmOperationalInternal":{"tmp":"tmp/media-stream-person-segmentation_0.0.1_1678375855602_0.8710138154608931","host":"s3://npm-registry-packages"}}},"time":{"created":"2023-03-09T15:30:55.493Z","modified":"2025-05-22T12:54:35.489Z","0.0.1":"2023-03-09T15:30:55.817Z"},"bugs":{"url":"https://github.com/apivideo/api.video-typescript-media-stream-person-segmentation/issues"},"author":{"url":"https://api.video/","name":"api.video","email":"ecosystem@api.video"},"license":"MIT","homepage":"https://github.com/apivideo/api.video-typescript-media-stream-person-segmentation#readme","keywords":["mediastream","person","segmentation","background"],"repository":{"url":"git+ssh://git@github.com/apivideo/api.video-typescript-media-stream-person-segmentation.git","type":"git"},"description":"api.video media stream person segmentation - change the background and emphasize the person in your media streams","maintainers":[{"email":"ecosystem@api.video","name":"apivideo-ecosystem"}],"readme":"[![badge](https://img.shields.io/twitter/follow/api_video?style=social)](https://twitter.com/intent/follow?screen_name=api_video)\n&nbsp; [![badge](https://img.shields.io/github/stars/apivideo/api.video-typescript-media-stream-person-segmentation?style=social)](https://github.com/apivideo/api.video-typescript-media-stream-person-segmentation)\n&nbsp; [![badge](https://img.shields.io/discourse/topics?server=https%3A%2F%2Fcommunity.api.video)](https://community.api.video)\n![](https://github.com/apivideo/.github/blob/main/assets/apivideo_banner.png)\n<h1 align=\"center\">Mediastream person segmentation</h1>\n\n[api.video](https://api.video) is the video infrastructure for product builders. Lightning fast\nvideo APIs for integrating, scaling, and managing on-demand & low latency live streaming features in\nyour app.\n\n# Table of contents\n\n- [Table of contents](#table-of-contents)\n- [Project description](#project-description)\n- [Getting started](#getting-started)\n  - [Installation](#installation)\n    - [Simple include in a javascript project](#simple-include-in-a-javascript-project)\n- [Documentation](#documentation)\n  - [Instanciation](#instanciation)\n    - [Options](#options)\n  - [Methods](#methods)\n    - [`applyBlurEffect(options: BlurEffectOptions)`](#applyblureffectoptions-blureffectoptions)\n      - [Options](#options-1)\n    - [`onReady(callback: (stream: MediaStream) => void)`](#onreadycallback-stream-mediastream--void)\n- [Full example](#full-example)\n\n# Project description\n\nThis library allows you to easily blur the background of a webcam video stream in real-time using TensorFlow.\n\nWith 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.\n\nPlease 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.\n\n# Getting started\n\n## Installation\n\n\n### Simple include in a javascript project\n\nInclude the library in your HTML file like so:\n\n```html\n<head>\n    ...\n    <script src=\"https://unpkg.com/@api.video/media-stream-person-segmentation\" defer></script>\n</head>\n```\n\n\n```html\n...\n<script type=\"text/javascript\"> \n    navigator.mediaDevices.getUserMedia(constraints).then((webcamStream) => {\n        const segmentation = new ApiVideoMediaStreamPersonSegmentation(webcamStream)\n\n        segmentation.applyBlurEffect()\n\n        segmentation.onReady((ouputStream) => {\n            // use the ouputStream to display the video\n            // ...\n        });\n\n    });\n</script>\n```\n\n# Documentation\n\n## Instanciation\n\n### Options \n\nThe library is instanciated with a MediaStream object as parameter.\n\n```javascript\nconst segmentation = new ApiVideoMediaStreamPersonSegmentation(webcamStream)\n```\n\n## Methods\n\n### `applyBlurEffect(options: BlurEffectOptions)`\n\nApply a blur effect on the background of the video stream.\n\n#### Options\n\n| Name | Default | Type | Description |\n| :------ | :------| :------ | :------ |\n| backgroundBlurAmount | 15 | number | The amount of blur to apply to the background. |\n| edgeBlurAmount | 8 | number | The amount of blur to apply to the edges of the person. |\n\n```javascript\nsegmentation.applyBlurEffect({\n    backgroundBlurAmount: 15,\n    edgeBlurAmount: 8\n})\n``` \n\n### `onReady(callback: (stream: MediaStream) => void)`\nCall the callback when the stream is ready.\n\n```javascript\nsegmentation.onReady((stream) => {\n    // use the stream to display the video\n    // ...\n});\n```\n\n\n\n# Full example\n\n\n```html\n<html>\n\n<head>\n    <script src=\"https://unpkg.com/@api.video/media-stream-person-segmentation\"></script>\n    <style>\n        #container {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n\n        #video {\n            width: 640;\n            height: 480;\n            border: 1px solid gray;\n        }\n\n        #container div {\n            margin: 10px 0;\n        }\n\n        label {\n            display: inline-block;\n            width: 160px;\n            text-align: right;\n        }\n\n        input {\n            display: inline-block;\n            width: 300px;\n        }\n    </style>\n</head>\n\n<body>\n    <div id=\"container\">\n        <div>\n            <video muted id=\"video\"></video>\n        </div>\n        <div>\n            <div>\n                <label for=\"blur\">Blur background</label>\n                <input type=\"range\" id=\"blur\" min=\"0\" max=\"100\" value=\"15\" />\n            </div>\n            <div>\n                <label for=\"blurEdges\">Blur edges</label>\n                <input type=\"range\" id=\"blurEdges\" min=\"0\" max=\"10\" value=\"8\" />\n            </div>\n        </div>\n    </div>\n\n    <script>\n        const video = document.querySelector('#video');\n\n        var constraints = window.constraints = {\n            audio: true,\n            video: true\n        };\n\n        navigator.mediaDevices.getUserMedia(constraints).then((stream) => {\n            const segmentation = new ApiVideoMediaStreamPersonSegmentation(stream)\n\n            segmentation.applyBlurEffect({\n                backgroundBlurAmount: 15,\n                edgeBlurAmount: 8\n            })\n\n            document.getElementById(\"blur\").addEventListener(\"input\", (e) => segmentation.applyBlurEffect({\n                backgroundBlurAmount: e.target.value\n            }));\n            document.getElementById(\"blurEdges\").addEventListener(\"input\", (e) => segmentation.applyBlurEffect({\n                edgeBlurAmount: e.target.value\n            }));\n\n            segmentation.onReady((stream) => {\n                video.srcObject = stream;\n                video.play();\n            });\n\n        });\n    </script>\n</body>\n\n</html>\n```\n","readmeFilename":"README.md"}