How to import SelfieSegmentation (from MediaPipe) via CDN to my react js app

🧑‍💻 Technical Support
1

Hi,
I would like to import SelfieSegmentation from mediapipe via CDN. I have seen the usage via npm (npm install @mediapipe/selfie_segmentation), but want it via CDN and use the object SelfieSegmentation

I have tried the code below. but could not find the object SelfieSegmentation

<script type="module">
import mediapipeselfieSegmentation from 'https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation@0.1.1675465747/+esm'
</script>

 const selfieSegmentation = new SelfieSegmentation({locateFile: (file) => {
    console.log("file", file)
    return `https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/${file}`; 
  }});
  selfieSegmentation.setOptions({
    modelSelection: 1,
  });
  selfieSegmentation.onResults(onResults);

Please let me know if any other details required
Thanks & Regards

2

I would suggest looking through our external libraries sample project:

First, I would add a console.log() to check that the CDN URL is working as you expect:

<script type="module">
import mediapipeselfieSegmentation from 'https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation@0.1.1675465747/+esm'
console.log(mediapipeselfieSegmentation)
</script>

If the object looks correct, then you would want to store it on the window:

window.mediapipeselfieSegmentation = mediapipeselfieSegmentation

Then, in a separate js file you can reference it from the window:

 const selfieSegmentation = new window.mediapipeselfieSegmentation(...)

In your code snippet it looks like you’re trying to use SelfieSegmentation, not the object you were trying to import (mediapipeselfieSegmentation) so you probably want to figure out how to import SelfieSegmentation instead.

3

Thanks for the valuable response.

1 Like
4

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.