如何使用javascript和python3上傳網絡攝像頭視頻流並在它們到達服務器后立即發送字節？

Question

當從網絡攝像頭創建字節時，如何將網絡攝像頭上傳到服務器？

這是我的起始代碼。

let mediaRecorder = new MediaRecorder(mediaStreamObj);
let chunks = [];

Answer 1

這是解決方案。 在 Firefox 和 Chrome 中測試和工作。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MediaCapture and Streams API</title>
<meta name="viewport" content="width=device-width">

<script type="text/javascript" src="js/jquery.min.js"></script>

</head>
<body>
<header>
<h1>MediaCapture, MediaRecorder and Streams API</h1>
</header>
<main>
<p></p>

<p><button id="btnStart">START RECORDING</button><br/>
<button id="btnStop">STOP RECORDING</button></p>

<video controls></video>

<video id="vid2" controls></video>

<!-- could save to canvas and do image manipulation and saving too -->
</main>
<script>
  let constraintObj = {
      audio: true,
      video: {
          facingMode: "user",
          width: { min: 640, ideal: 1280, max: 1920 },
          height: { min: 480, ideal: 720, max: 1080 }
      }
  };
  // width: 1280, height: 720  -- preference only
  // facingMode: {exact: "user"}
  // facingMode: "environment"

  //handle older browsers that might implement getUserMedia in some way
  if (navigator.mediaDevices === undefined) {
      navigator.mediaDevices = {};
      navigator.mediaDevices.getUserMedia = function(constraintObj) {
          let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
          if (!getUserMedia) {
              return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
          }
          return new Promise(function(resolve, reject) {
              getUserMedia.call(navigator, constraintObj, resolve, reject);
          });
      }
  }else{
      navigator.mediaDevices.enumerateDevices()
      .then(devices => {
          devices.forEach(device=>{
              console.log(device.kind.toUpperCase(), device.label);
              //, device.deviceId
          })
      })
      .catch(err=>{
          console.log(err.name, err.message);
      })
  }

  navigator.mediaDevices.getUserMedia(constraintObj)
  .then(function(mediaStreamObj) {
      //connect the media stream to the first video element
      let video = document.querySelector('video');
      if ("srcObject" in video) {
          video.srcObject = mediaStreamObj;
      } else {
          //old version
          video.src = window.URL.createObjectURL(mediaStreamObj);
      }

      video.onloadedmetadata = function(ev) {
          //show in the video element what is being captured by the webcam
          video.play();
      };

      //add listeners for saving video/audio
      let start = document.getElementById('btnStart');
      let stop = document.getElementById('btnStop');
      let vidSave = document.getElementById('vid2');
      let mediaRecorder = new MediaRecorder(mediaStreamObj);
      let chunks = [];

      start.addEventListener('click', (ev)=>{
          mediaRecorder.start(1000);    // milliseconds, so 1 second is 1000
          console.log(mediaRecorder.state);
      })
      stop.addEventListener('click', (ev)=>{
          mediaRecorder.stop();
          console.log(mediaRecorder.state);
      });
      mediaRecorder.ondataavailable = function(ev) {
            chunks.push(ev.data);
          
            var res;
            var pos;
            var b = "base64," ;
            var fr = new FileReader();
            fr.onload = function(){
                res = this.result;
                pos = res.search(b);
                pos = pos + b.length;
                res = res.substring(pos);

                $.ajax({
                    type: 'POST',
                    url: 'server.py',
                    dataType: "html",
                    data: { chunk:  res },
                    success: function(data){
                        //alert(data + ' yes');
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert('Status: ' + textStatus + '   ' + ' Error: ' + errorThrown); 
                    }
                });
            }
            fr.readAsDataURL(ev.data);

      }
      mediaRecorder.onstop = (ev)=>{
          let blob = new Blob(chunks, { 'type' : 'video/mp4;' });
          chunks = [];
          let videoURL = window.URL.createObjectURL(blob);
          vidSave.src = videoURL;
      }
  })
  .catch(function(err) {
      console.log(err.name, err.message);
  });

</script>
</body>
</html>

接受實時網絡攝像頭視頻的 Python3 server.py 文件如下。

import os
import sys

import cgi
import cgitb

import base64

include_path = '/var/webcam_project/www'

cgitb.enable(display=0, logdir=f"""{include_path}/tmp_errors""") # include_path is OUTDIR

sys.path.insert(0, include_path)

def enc_print(string='', encoding='utf8'):
    sys.stdout.buffer.write(string.encode(encoding) + b'\n')

from html import escape

args = cgi.FieldStorage()

chunk = '' if not args.getvalue( "chunk" ) else escape( args.getvalue( "chunk" ) )

mp4 = 'webcam.mp4'

with open (mp4, 'ab') as f:
    f.write( base64.b64decode(chunk) )

html = 'success'

enc_print("Content-Type:text/html;charset=utf-8;")
enc_print()        
enc_print(html)

如果您喜歡這些有價值的解決方案，請投票。

如何使用javascript和python3上傳網絡攝像頭視頻流並在它們到達服務器后立即發送字節？

問題描述

1 個解決方案

解決方案1
1 2022-05-18 11:50:03

如何使用javascript和python3上傳網絡攝像頭視頻流並在它們到達服務器后立即發送字節？

問題描述

1 個解決方案

解決方案1 1 2022-05-18 11:50:03

解決方案1
1 2022-05-18 11:50:03