web端 本地调用摄像头、前端摄像头

简介: web端 本地调用摄像头、前端摄像头

最近公司项目涉及到一个需求,调用电脑摄像头功能,经过在网上查找资料有以下三种方案实现。

  1. 通过浏览器API来getUserMedia来实现调用用户的摄像头,但有两点限制:部署到生产服务的时候要使用htts协议访问该项目,第二点限制就是第一次获取摄像头时要点击允许弹窗。

  2. 通过web端发送websocket请求给客户端,然后客户端调用摄像头应用程序,但每次初始打开摄像头应用时都有个初始化2~3秒左右,用户体验不免友好。

  3. 通过客户端获取摄像头的每一帧数据,并通过websocket返回给web端,具体步骤下面有代码讲解。

getUserMedia方式实现代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>调用摄像头录像</title>
  </head>
  <body>
    <video id="video" width="640" height="480" autoplay></video>
    <button id="startRecord">开始录制</button>
    <button id="stopRecord">停止录制</button>
    <script>
      var video = document.querySelector('#video');
      var startRecord = document.querySelector('#startRecord');
      var stopRecord = document.querySelector('#stopRecord');
      var mediaRecorder;
      var chunks = [];

      navigator.mediaDevices.getUserMedia({
    audio: false, video: true }).then(function (stream) {
   
        video.srcObject = stream;
        mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.ondataavailable = function (e) {
   
          chunks.push(e.data);
        };
        mediaRecorder.onstop = function (e) {
   
          var blob = new Blob(chunks, {
    type: 'video/mp4' });
          chunks = [];
          var videoURL = window.URL.createObjectURL(blob);
          video.src = videoURL;
        };
      });
      startRecord.onclick = function () {
   
        mediaRecorder.start();
      };
      stopRecord.onclick = function () {
   
        mediaRecorder.stop();
      };
    </script>
  </body>
</html>

客户端返回视频流方式实现代码
vue前端代码
前端接收到H264视频流,需要用JMuxer来转码才能在video标签里播放,需要执行npm install JMuxer来安装这个库。详细代码如下:

<template>
  <video id="player" :controls="false" :muted="false" :autoplay="true"></video>
</template>
<script setup>
  import JMuxer from 'jmuxer';
  import {
    onMounted, onBeforeUnmount} from 'vue';
  var ws = null;
  var jmuxer = null;
  const list = reactive([]);
  const isDisable = ref(false);

  onMounted(() => {
   
    jmuxer = new JMuxer({
   
      node: 'player',
      // 可用值是:video、audio
      mode: 'video',
      // 最大延迟时间(毫秒), 默认为值是500毫秒
      maxDelay: 100,
      // 缓冲区刷新时间,默认为值是500毫秒
      flushingTime: 0,
      // 是否会自动清除播放的媒体缓冲区。默认为true
      clearBuffer: true,
      // 可选值。视频的帧率,如果它是已知的或固定值。如果所提供的媒体数据中没有块持续时间,它将用于查找帧持续时间。
      fps: 30,
      // 将从MP4轨道数据读取FPS,而不是使用(以上)FPS值。默认为false。
      readFpsFromTrack: false,
      // 将在浏览器控制台打印调试日志。默认为false
      debug: false,
      // 遇到任何丢失的视频帧将会被触发
      onMissingVideoFrames: function (data) {
   
        console.log('丢失的视频帧');
      },
      onError: function (data) {
   
        if (/Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor)) {
   
          jmuxer.reset();
        }
      }
    });
    ws = new WebSocket('ws://127.0.0.1:12797');
    ws.binaryType = 'arraybuffer';
    ws.onmessage = function (event) {
   
      jmuxer.feed({
    video: new Uint8Array(event.data) });
    };
    ws.onopen = function () {
   
      console.log('已连接');
      ws.send('{"interfaceId":"100002","command":"1"}');
    };
    ws.onerror = function (err) {
   
      console.log('出错--Socket Error', err);
    };
    ws.onclose = function () {
   
      console.log('断开');
    };
  });
// 实现拍照功能
  const toScan = () => {
   
      const videoEl = document.getElementById('player');
      const canvas = document.createElement('canvas');
      canvas.width = videoEl.videoWidth;
      canvas.height = videoEl.videoHeight;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(videoEl, 0, 0, videoEl.videoWidth, videoEl.videoHeight);
      console.log(canvas.toDataURL('image/png'));
  };

  onBeforeUnmount(() => {
   
    console.info('离开页面,关闭高拍仪');
    ws.close();
    jmuxer.destroy();
  });
</script>
相关文章
|
21天前
|
前端开发 JavaScript 测试技术
前端工程化:构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化:构建高效、可维护的现代Web应用
|
21天前
|
前端开发 测试技术 持续交付
前端工程化:构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化:构建高效、可维护的现代Web应用
|
18天前
|
计算机视觉 Python
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
这篇文章是关于如何使用Flask框架结合OpenCV库,通过电脑摄像头实现视频流在网页上的实时显示,并提供了单摄像头和多摄像头的实现方法。
59 2
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
|
1天前
|
开发框架 前端开发 JavaScript
Web前端框架
Web前端框架等名词
10 2
|
23天前
|
存储 前端开发 JavaScript
WEB前端开发中如何实现大文件上传?
WEB前端开发中如何实现大文件上传?
116 3
WEB前端开发中如何实现大文件上传?
|
11天前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
14天前
|
存储 前端开发 JavaScript
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
【10月更文挑战第4天】本文探讨了从 Web 2.0 到 Web 3.0 的前端开发演变过程。Web 2.0 时代,前端开发者从静态网页设计走向复杂交互,技术框架如 jQuery、React 和 Vue 带来了巨大的变革。而 Web 3.0 以区块链技术为核心,带来了去中心化的互联网体验,前端开发者面临与区块链交互、去中心化身份验证、分布式存储等新挑战。文章总结了 Web 2.0 和 Web 3.0 的核心区别,并为开发者提供了如何应对新技术的建议,帮助他们在新时代中掌握技能、设计更安全的用户体验。
46 0
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
|
15天前
|
前端开发 JavaScript 开发者
web前端需要学什么
web前端需要学什么
|
17天前
|
前端开发 JavaScript 开发者
Web组件:一种新的前端开发范式
【10月更文挑战第9天】Web组件:一种新的前端开发范式
17 2
|
17天前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门