Facing issue at Instascan Library in Angular 6

user_12876689 0
Viewed 330

I have imported instascan library in Index.html file ,

<script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"> </script>

I have code in my app.component.html as below,

<video id="preview"></video>

I have code in my app.component.ts as below,

let scanner = new Instascan.Scanner({                                                           
 video: document.getElementById('preview'),                                                    
 mirror: false,
 facingMode: { exact: 'environment' }});

 Instascan.Camera.getCameras().then(cameras => {
    if (cameras.length > 0) {
        this.scanner.start(cameras[1]);
    } else {
        alert("Camera Permission denied");
        window.location.reload();
    }
}).catch(error => {
    console.log(error);
    window.location.reload();
})

Facing issue in Instascan, its giving error as below while compiling, Cannot find name 'Instascan'.

instascan angular9 angular
2 Answers

Consider using import syntax instead of using link tag.

First, install Instascan NPM package:

npm i instascan

Then import it in your component:

import Instascan from 'instascan';
...

Rest of your code will work.

user_38705470

This is a simple javascript library. If you want to use in component so you need to declare it on after Import. Like this ... 

import { Component, OnInit} from '@angular/core';

declare var Instascan: any;

And If this javascript library useing jQuatry then also you declare $

declare var $: any;
user_85648030
Related