How to upload a webcam stream of video and send bytes as soon as they arrive to the server using javascript and python3?

Here is the solution. Tested and Works in both Firefox and 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>

And the Python3 server.py file to accept the real time webcam video is the following.

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)

Vote up if you like these kinds of solutions of value.

Recommended topics

Hot tags