javascript - 将数据从浏览器端发送到 zeromq node.js 客户端服务器

问题描述

我有一个 capture.js 文件作为 index.html 中的脚本包含在通过网络摄像头单击时捕获图像。我需要在用节点 js 编写的 zeromq 客户端服务器（TCP 客户端）中发送捕获的图像的 base64URL，以便我可以稍后将其连接到 python zeromq 服务器（TCP 服务器）。

几周来我尝试了很多方法并进行了很多搜索，没有 zeromq 的 CDN 链接，无法编译它，并且变量在 client.js 中显示为 undefined。

如果有人可以帮助我解决问题，我将不胜感激。我已经粘贴了下面的当前代码

这是 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>

这是 capture.js，它启动网络摄像头并拍照并保存该图像的 base64URL：

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();

这是 client.js，它是基于 zeromq TCP 的库的客户端实现

// 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);
}

这是 server.py是 zeromq 服务器的 python 实现，需要从客户端接收 base64URL：

#   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")

我必须在 python 中使用 zeromq 库作为服务器端。客户端实现可能会有所不同

我是 python 和套接字编程的初学者，如果您尝试理解问题，具体并给我一个富有成效的解决方案，我将不胜感激。提前谢谢大家。你们中的许多人在知识和专业知识方面都拥有上帝级别的深度。

标签： javascriptpythonnode.jssocketszeromq

javascript - 将数据从浏览器端发送到 zeromq node.js 客户端服务器

问题描述

解决方案

推荐阅读