Assalomu alaykum, yordam.uz saytimizga xush kelibsiz.
Bu saytda o`zingizni qiziqtirgan savollarga javob olishingiz va o`z sohangiz bo`yicha savollarga javob berishingiz mumkin. Bizning Oilamizga a'zo bo`lganingiz uchun chuqur Minnatdorchilik bildiramiz !!!

Javascript serverdan clientga media yuborishda muammo

+1 ovoz
85 marta ko‘rilgan
so‘radi 28 yanvar Farruxnet (1,410 bal)
tahrirlandi 29 yanvar vejon

index.js

const path = require('path');
const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const app = express();
const httpServer = http.createServer(app);

const PORT = process.env.PORT || 3000;

const wsServer = new WebSocket.Server({ server: httpServer }, () => console.log(`port ws://localhost:${WS_PORT}`));

let connectedClients = [];

wsServer.on('connection', (ws, req) => {
    console.log('Connected');
   
    connectedClients.push(ws);
   
    ws.on('message', data => {
        
        connectedClients.forEach((ws, i) => {
            if (ws.readyState === ws.OPEN) { 
                ws.send(data); 
            } else {
                connectedClients.splice(i, 1);
            }
        });
    });
});


app.get('/client', (req, res) => res.sendFile(path.resolve(__dirname, './client.html')));
app.get('/server', (req, res) => res.sendFile(path.resolve(__dirname, './server.html')));
app.get('/', (req, res) => {
    res.send(`
        <a href="streamer">Streamer</a><br>
        <a href="client">Client</a>
    `);
});
httpServer.listen(PORT, () => console.log(`Port: http://localhost:${PORT}`))

Client.html

<html>

<head>

    <title>Client</title>

</head>

<body>

    <img src="">

  <!--<video src="" autoplay controls></video>-->

    <script>

        const img = document.querySelector('img');

        

        const WS_URL = location.origin.replace(/^http/, 'ws');

        const ws = new WebSocket(WS_URL);

        ws.onopen = () => console.log(`Connected to ${WS_URL}`);

        ws.onmessage = message => {

        // src ga o'rnatish

        img.src = message.data;

        }

    </script>

</body>

</html>

server.html

<html>
<head>
    <title>Server</title>
</head>
<body>
    <video autoplay></video>
    <script>       
        const video = document.querySelector('video');
      
        navigator.mediaDevices.getUserMedia({video: {width: 426, height: 240}}).then((stream) => video.srcObject = stream);

        const getFrame = () => {
            const canvas = document.createElement('canvas');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            canvas.getContext('2d').drawImage(video, 0, 0);
            const data = canvas.toDataURL('image/png');
            return data;
        }
        const WS_URL = location.origin.replace(/^http/, 'ws');
        const FPS = 300;
        const ws = new WebSocket(WS_URL);
        ws.onopen = () => {
            console.log(`Connected to ${WS_URL}`);
            setInterval(() => {
                ws.send(getFrame());
            }, 1000 / FPS);
        }
    </script>
</body>
</html>

server.html faylni o'zida video ko'rinishida qabul qilib htmlni video tagiga o'rnatyapdi. clientda yuborishda image ko'rinishida yuboryapdi client qabul qilganda tasvirda uzulishlar bo'lyapdi shuni qanday serverdan clientda canvassiz image ko'rinishida emas video ko'rinishida clientga yuborsa bo'ladi?

Iltimos, saytga kiring yoki ro‘yxatdan o‘ting va shunda ushbu savolga javob berishingiz mumkin bo‘ladi.

Assalomu alaykum, yordam.uz saytimizga xush kelibsiz.

Bu saytda o`zingizni qiziqtirgan savollarga javob olishingiz va o`z sohangiz bo`yicha savollarga javob berishingiz mumkin.

Bizning Oilamizga a'zo bo`lganingiz uchun chuqur Minnatdorchilik bildiramiz !!!

Telegram kanal YordamUzRss

...