## Using pretrained models
One great thing about TensorFlow.js is that it comes with a rich echosystem with many pretrained models that you can use out of the box in your web applications. See [here](https://www.tensorflow.org/js/models) for a list of such models. In this lesson we'll create a simple demo where we take the live webcam feed as input and apply a pretrained object detector and highlight all the detected objects in real-time.
Capturing data from a webcam using TensorFlow.js is very easy, `tf.data.webcam` does all the work for you. You simply pass a video HTML element with desired resolution:
```js
let video = document.createElement('video');
video.width = 320;
video.height = 240;
let camPromise = tf.data.webcam(video);
```
Note that `tf.data.webcam` returns a camera promise. Once the promise is resolved we can capture data by calling `capture()` on the camera object:
```js
camPromise.then((cam) => {
cam.capture().then(img => {
// ...
})
})
```
We can visualize the captured image by creating an HTML canvas element and using `tf.browser.toPixels()` to draw the image on the canvas. (Note that `figure()` function is a built-in function on our platform that simply creates a canvas HTML element.)
```jsx
let video = document.createElement('video');
video.width = 320;
video.height = 240;
let canvas = figure(); // figure() is equivalent to document.createElement('canvas')
tf.data.webcam(video).then(cam => {
cam.capture().then(img => {
tf.browser.toPixels(img, canvas);
});
cam.stop();
});
```
Note that we create a webcam object, capture a single image, draw it on the canvas, and stop the camera.
Next, let's feed the captured image to an object detector to see if we can detect any objects.
TensorFlow.js comes with a number of pre-trained models, for our demo we chose the COCO-SSD pretrained model which was trained on the [MSCOCO](https://cocodataset.org/) dataset and is based on [SSD: Single Shot MultiBox Detector](https://arxiv.org/abs/1512.02325) architecture. It can detect 80 different classes of objects on a given image.
To get started we first need to import the model into our javascript program:
```jsi
import 'https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd';
```
To load the model we can simply call `cocoSsd.load()` which returns a model promise. When the promise is resolved we can call `model.detect()` passing an image to get a list of detected boxes, their classes, and confidence scores. Here we show how to put both together. Once we have that the predictions, we can use standard javascript functions to draw rectangles where the objects are detected. Press run to see it in action. (Note it may take a bit for the model to load and the camera to be initialized).
```jsx
let video = document.createElement('video');
video.width = 320;
video.height = 240;
let canvas = figure();
Promise.all([
tf.data.webcam(video),
cocoSsd.load()
]).then(vals => {
let [cam, model] = vals;
cam.capture().then(img => {
model.detect(img).then(preds => {
tf.browser.toPixels(img, canvas).then(() => {
let ctx = canvas.getContext('2d');
for (let i = 0; i < preds.length; i++) {
let pred = preds[i];
let bbox = pred.bbox;
ctx.fillStyle = 'rgba(0, 255, 0, 0.2)';
ctx.fillRect(bbox[0], bbox[1], bbox[2], bbox[3]);
ctx.fillStyle = 'rgba(255, 255, 255, 1.0)';
ctx.fillText(`${pred.class} (${pred.score.toFixed(2)})`, bbox[0], bbox[1]);
}
});
});
cam.stop();
});
});
```
We can perform all of the above in a loop to perform object detection in real-time:
```jsx
let video = document.createElement('video');
video.width = 320;
video.height = 240;
let canvas = figure();
Promise.all([tf.data.webcam(video), cocoSsd.load()]).then(vals => {
let [cam, model] = vals;
animate(() => {
cam.capture().then(img => {
model.detect(img).then(preds => {
tf.browser.toPixels(img, canvas).then(() => {
let ctx = canvas.getContext('2d');
for (let i = 0; i < preds.length; i++) {
let pred = preds[i];
let bbox = pred.bbox;
ctx.fillStyle = 'rgba(0, 255, 0, 0.2)';
ctx.fillRect(bbox[0], bbox[1], bbox[2], bbox[3]);
ctx.fillStyle = 'rgba(255, 255, 255, 1.0)';
ctx.fillText(`${pred.class} (${pred.score.toFixed(2)})`, bbox[0], bbox[1]);
}
});
});
});
}, () => {
cam.stop();
});
});
```
Note that we used the animate function which is another built-in function on our platform, it simply calls the given function multiple times using `requestAnimationFrame()`.
There you have it your very own object detector in the browser!