0

Express Generator アプリを使用していないときでも、ウェブカメラが機能するので、自分の顔を見ることができます。しかし、エクスプレスジェネレーターをインストールして同じコードを書いた後、自分の顔が見えません。「index.ejs」でスクリプトが機能していないと思います。

1. bin/www 追加

app.io.attach(server);

2. app.js の 追加

   app.io = require("socket.io")();

   app.io.on("connection", function (socket) {
     console.log("a user connected");
     socket.broadcast.emit("hi");

     socket.on("disconnect", function () {
      console.log("user disconnected");
     });
   });

3. index.js の 追加

    const cv = require("opencv4nodejs");
    var express = require("express");
    const server = require("http").Server(app);
    const io = require("socket.io")(server);
    const FPS = 30;
    const wCap = new cv.VideoCapture(0);
    wCap.set(cv.CAP_PROP_FRAME_WIDTH, 300); 
    wCap.set(cv.CAP_PROP_FRAME_HEIGHT, 300);
    setInterval(() => {
      const frame = wCap.read();
      const image = cv.imencode(".jpg", frame).toString("base64");
      io.emit("image", image);
      }, 1000 / FPS);

4.index.ejs

追加

    <!DOCTYPE html>
    <html lang="en">
     <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
     </head>
     <body>
       hello somin
       <img id="image" style="width: 300; height: 300" />
       <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js">. 
       </script>
       <script>
          const socket = io.connection("/");
          socket.on("image", (image) => {
        
            const imageElm = document.getElementById("image");
            imageElm.src = `data:image/jpeg;base64,${image}`;
          });
       </script>
     </body>
    </html>

app.js socket.io 接続で console.log メッセージが表示されますが、index.ejs io.connection() が機能しないと思います。Express-generator を使わなかったときと同じコードだと理解できません。

4

0 に答える 0