I want my website to scan QR code.So,I used instascan but it's showing the error "Cannot access video stream (TypeError)" .

My code is given below i.e. app.js ,I checked my camera and had already used other system but not working

var app = new Vue({
  el: '#app',
  data: {
    scanner: null,
    activeCameraId: null,
    cameras: [],
    scans: []
  },
  mounted: function () {
    var self = this;
    self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5 });
    self.scanner.addListener('scan', function (content, image) {
      self.scans.unshift({ date: +(Date.now()), content: content });
      document.getElementById("val").value = content;    });
    Instascan.Camera.getCameras().then(function (cameras) {
      self.cameras = cameras;
      if (cameras.length > 1) {
        self.activeCameraId = cameras[1].id;
        self.scanner.start(cameras[1]);
      }
      else if (cameras.length > 0) {
        self.activeCameraId = cameras[0].id;
        self.scanner.start(cameras[0]);
      }
       else {
        console.error('No cameras found.');
      }
    }).catch(function (e) {
      console.error(e);
    });
  },
  methods: {
    formatName: function (name) {
      return name || '(unknown)';
    },
    selectCamera: function (camera) {
      this.activeCameraId = camera.id;
      this.scanner.start(camera);
    }
  }
});

this is the error message on the console

app.js:24 Error: Cannot access video stream (TypeError).
    at new i (instascan.min.js:9)
    at Function.<anonymous> (instascan.min.js:9)
    at n (instascan.min.js:4)
    at Generator._invoke (instascan.min.js:4)
    at Generator.e.<puted> [as throw] (instascan.min.js:4)
    at n (instascan.min.js:4)
    at r (instascan.min.js:4)
    at instascan.min.js:4
(anonymous) @ app.js:24

this below is the html file

</div>
    <div id="app">
            <div class="preview-container">
        <video id="preview"></video>
      </div>
  </div>
        <div class="input-effect">
          <input  class="effect-17" type="text" id= "val" placeholder="Insert code">
        </div>

this below is css file

#app {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  height: 500px;
  width:100%;
}
.preview-container {
  margin-top: 150px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-left:35%

 /*overflow: hidden;*/
}
input[type="text"]
{font: 40px/60px "Lato", Arial, sans-serif; 
color: #333; 
width: 150%; 
box-sizing: border-box; 
letter-spacing: 1px;
border-left: none;
border-right: none;
border-top:none;
border-bottom-color: grey;
background: #FFFAFA;
margin-top:150px;

}

.effect-17
{
  height:100px;
  margin-left:200px;
  width:70%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: flex;
  position: absolute;

}

I know html and css file were not needed but just for sake of convenience,I have uploded it.

I want my website to scan QR code.So,I used instascan but it's showing the error "Cannot access video stream (TypeError)" .

My code is given below i.e. app.js ,I checked my camera and had already used other system but not working

var app = new Vue({
  el: '#app',
  data: {
    scanner: null,
    activeCameraId: null,
    cameras: [],
    scans: []
  },
  mounted: function () {
    var self = this;
    self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5 });
    self.scanner.addListener('scan', function (content, image) {
      self.scans.unshift({ date: +(Date.now()), content: content });
      document.getElementById("val").value = content;    });
    Instascan.Camera.getCameras().then(function (cameras) {
      self.cameras = cameras;
      if (cameras.length > 1) {
        self.activeCameraId = cameras[1].id;
        self.scanner.start(cameras[1]);
      }
      else if (cameras.length > 0) {
        self.activeCameraId = cameras[0].id;
        self.scanner.start(cameras[0]);
      }
       else {
        console.error('No cameras found.');
      }
    }).catch(function (e) {
      console.error(e);
    });
  },
  methods: {
    formatName: function (name) {
      return name || '(unknown)';
    },
    selectCamera: function (camera) {
      this.activeCameraId = camera.id;
      this.scanner.start(camera);
    }
  }
});

this is the error message on the console

app.js:24 Error: Cannot access video stream (TypeError).
    at new i (instascan.min.js:9)
    at Function.<anonymous> (instascan.min.js:9)
    at n (instascan.min.js:4)
    at Generator._invoke (instascan.min.js:4)
    at Generator.e.<puted> [as throw] (instascan.min.js:4)
    at n (instascan.min.js:4)
    at r (instascan.min.js:4)
    at instascan.min.js:4
(anonymous) @ app.js:24

this below is the html file

</div>
    <div id="app">
            <div class="preview-container">
        <video id="preview"></video>
      </div>
  </div>
        <div class="input-effect">
          <input  class="effect-17" type="text" id= "val" placeholder="Insert code">
        </div>

this below is css file

#app {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  height: 500px;
  width:100%;
}
.preview-container {
  margin-top: 150px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-left:35%

 /*overflow: hidden;*/
}
input[type="text"]
{font: 40px/60px "Lato", Arial, sans-serif; 
color: #333; 
width: 150%; 
box-sizing: border-box; 
letter-spacing: 1px;
border-left: none;
border-right: none;
border-top:none;
border-bottom-color: grey;
background: #FFFAFA;
margin-top:150px;

}

.effect-17
{
  height:100px;
  margin-left:200px;
  width:70%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: flex;
  position: absolute;

}

I know html and css file were not needed but just for sake of convenience,I have uploded it.

• javascript
• html
• css

1 Answer 1

Are you able to give the browser permission (or has the browser prompted you to give permission) to access the camera(s)? Example, in Chrome I was prompted to give the testing site access to the camera, and it now shows in the allow listing in Chrome > Settings > Advanced > Privacy and Security > Site Settings > Camera.

Also, the Instascan ReadMe mentions Note: Chrome requires HTTPS when using the WebRTC API. Any pages using this library should be served over HTTPS. You may want to check this stackoverflow answer that discusses how to treat HTTP as secure HTTPS to help with testing in case that is affecting your setup.