美文网首页
web端 本地调用摄像头、前端摄像头

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

作者: Astep | 来源:发表于2023-05-25 09:33 被阅读0次

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

    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>
    
    C++客户端

    https://github.com/qiyingcong/vue-c-websocket点击下载客户端包
    双击打开这个应用程序就可以访问本地的websocket的视频流了

    image.png

    相关文章

      网友评论

          本文标题:web端 本地调用摄像头、前端摄像头

          本文链接:https://www.haomeiwen.com/subject/spxqedtx.html