Giter Club home page Giter Club logo

livecamera's Introduction

web 平台 开启摄像头 + websocket 图像推送

开启摄像头

  asyncOpen() {
    return new Promise(resolve => {
      navigator.mediaDevices
        .getUserMedia(Camera.constraints)
        .then(MediaStream => {
          // 媒体流跟踪,用于后续关闭
          this.MediaStreamTrack =
            typeof stream.stop === 'function' ? stream : stream.getTracks()[0];

          this.video.srcObject = MediaStream;
          this.video.play();

          resolve(true);
        })
        .catch(err => {
          resolve(false);
        });
    });
  }

  close() {
    this.MediaStreamTrack && this.MediaStreamTrack.stop();
  }

获取 base64 格式的数据

getBase64Image() {
  if (!this.canvas) {
    initCanvas();
  }
  const ctx = this.canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, Camera.constraints.width, Camera.constraints.height);
  return this.canvas.toDataURL();
}

initCanvas() {
  this.canvas = document.createElement('canvas');
  this.canvas.width = Camera.constraints.width;
  this.canvas.height = Camera.constraints.height;
  this.canvas.style.cssText = 'display:none;';
  document.body.appendChild(this.canvas);
}

获取媒体流数据

视频流传输

需要注意的地方

  1. websocket 可能会中断,注意重连问题
  2. 开启定时任务推送 websocket 时,如果 ws 发生重连,且刚好处于 CONNECTING 或 CLOSING 状态,这时候发送任务会处于等待状态,因此会不断地堆积在 js 栈,很容易造成内存泄漏,所以要注意定时任务的处理(这里的处理方式是清除栈中的上一个任务,再开启一个新任务,代码在 utils.js)
  3. ctx.drawImage 注意参数,动态从 canvas 中获取,不然会出现图像不全的情况
  4. 对流畅度需求较高的视频流,可以采用帧渲染任务去推送(window.requestAnimationFrame(callback),代码在 utils.js)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.