Send data from browser-side to zeromq node.js client server

问题

I have a capture.js file included as a script in index.html which capture image on click via webcam. I need to send the base64URL of the captured image in zeromq client server (TCP client) written in node js so that I can connect send it later to a python zeromq server(TCP server).

I have tried a lot of way and searched a lot for the weeks, there is no CDN link for zeromq and couldn't be able to compile it and also the variable shows undefined in client.js.

I will really appreciate if any one can help me the problem. I have pasted the current code of below

This is index.html:

 <!doctype html>
<html>
<head>
    <title>WebRTC: Still photo capture demo</title>
    <meta charset='utf-8'>
    <link rel="stylesheet" href="main.css" type="text/css" media="all">
    <script src="capture.js"></script>
    <script src="client.js"></script>
</head>
<body>
<div class="contentarea">
    <h1>
        MDN - WebRTC: Still photo capture demo
    </h1>
    <p>
        This example demonstrates how to set up a media stream using your built-in webcam, fetch an image from that stream, and create a PNG using that image.
    </p>
  <div class="camera">
    <video id="video">Video stream not available.</video>
    <button id="startbutton">Take photo</button> 
  </div>
  <canvas id="canvas">
  </canvas>
  <div class="output">
    <img id="photo" alt="The screen capture will appear in this box."> 
  </div>
    <p>
        Visit our article <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos"> Taking still photos with WebRTC</a> to learn more about the technologies used here.
    </p>
</div>
</body>
</html>

This is capture.js which initiate webcam and take a picture and save the base64URL of that image:

function startWebCam() {


    var width = 320;    // We will scale the photo width to this
    var height = 0;     // This will be computed based on the input stream
    var streaming = false;

    var video = null;
    var canvas = null;
    var photo = null;
    var startbutton = null;

    function startup() {
      video = document.getElementById('video');
      canvas = document.getElementById('canvas');
      photo = document.getElementById('photo');
      startbutton = document.getElementById('startbutton');

      navigator.mediaDevices.getUserMedia({video: true, audio: false})
      .then(function(stream) {
        video.srcObject = stream;
        video.play();
      })
      .catch(function(err) {
        console.log("An error occurred: " + err);
      });

      video.addEventListener('canplay', function(ev){
        if (!streaming) {
          height = video.videoHeight / (video.videoWidth/width);

          // Firefox currently has a bug where the height can't be read from
          // the video, so we will make assumptions if this happens.

          if (isNaN(height)) {
            height = width / (4/3);
          }

          video.setAttribute('width', width);
          video.setAttribute('height', height);
          canvas.setAttribute('width', width);
          canvas.setAttribute('height', height);
          streaming = true;
        }
      }, false);

      startbutton.addEventListener('click', function(ev){
        takepicture();
        ev.preventDefault();
      }, false);

      clearphoto();
    }

    function clearphoto() {
      var context = canvas.getContext('2d');
      context.fillStyle = "#AAA";
      context.fillRect(0, 0, canvas.width, canvas.height);

      var data = canvas.toDataURL('image/png');
      photo.setAttribute('src', data);
    }

    function takepicture() {
      var context = canvas.getContext('2d');
      if (width && height) {
        canvas.width = width;
        canvas.height = height;
        context.drawImage(video, 0, 0, width, height);

        var data = canvas.toDataURL('image/png');
        photo.setAttribute('src', data);
        sendFromClientJSTestPurpose(data);
      } else {
        clearphoto();
      }
    }

    if (typeof(window) !== 'undefined') {
        window.addEventListener('load', startup, false);
      }
  }

  startWebCam();

This is client.js which is a client-side implementation of zeromq TCP based library

// Hello World client
// Connects REQ socket to tcp://localhost:5555
// Sends "Hello" to server.

var zmq = require('zeromq');
 var image64;
// // socket to talk to server
console.log("Connecting to hello world server…");
var requester = zmq.socket('req');

var x = 0;
requester.on("message", function(reply) {
  console.log("Received reply", x, ": [", reply.toString(), ']');
  x += 1;
  if (x === 10) {
    requester.close();
    process.exit(0);
  }
});

requester.connect("tcp://localhost:5555");

for (var i = 0; i < 10; i++) {
  console.log("Sending request", i, '…');
  requester.send("Hello", image64);
}

process.on('SIGINT', function() {
  requester.close();
});


function sendFromClientJSTestPurpose (data) {
  image64 = data;
  console.log('hello world should contain base 64', image64);
}

This is server.py is the python implementation of zeromq server which needs to receive the base64URL from the client side:

#   Expects b"Hello" from client, replies with b"World"
#

import time
import zmq

context = zmq.Context()
socket = context.socket(zmq.REP)
socket.bind("tcp://*:5555")

while True:
    #  Wait for next request from client
    message = socket.recv()
    print("Received request: %s"  %message)

    #  Do some 'work'
    time.sleep(1)

    #  Send reply back to client
    socket.send(b"World")

I must use zeromq library in python for server-side. Client-side implementation can vary

I am a beginner in python and socket programming, I will really appreciate if you try to understand the problem, be specific and give me a fruitful solution. Thanking you all in advance. So many of you guys have god-level of depth in knowledge and expertise.

来源：https://stackoverflow.com/questions/58229933/send-data-from-browser-side-to-zeromq-node-js-client-server

标签

javascript

python

node.js

sockets

zeromq