CORS error

[Akshay-akkay]

Describe the bug Access to XMLHttpRequest at 'http://localhost:1234/socket.io/?EIO=4&transport=polling&t=OLsh1L1' from origin 'http://localhost:52218' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Backend Code

const http = require('http');

// '@api.video/browser-to-rtmp-server';
const BrowserToRtmpServer = require('@api.video/browser-to-rtmp-server');

/// Create HTTP server
const server = http.createServer();

/// Setup CORS

const browserToRtmpClient = new BrowserToRtmpServer(server, {
  cors: {
    origin: 'http://localhost:52218',
    methods: ['GET', 'POST'],
    credentials: true,
  },
});
server.listen(1234, () => {
  console.log('Server is running on port 1234');
});

To Reproduce Steps to reproduce the behavior:

1. Setup Example Project
2. Start streaming from frontend
3. See console in chrome.

Expected behavior Stream should start

Screenshots

Environment (please complete the following information):

• OS: macos
• Browser chrome
• Version latest

[olivierapivideo]

Hi @Akshay-akkay ,

Try to put the cors settings in the socketio value of the options, like in the example.

const browserToRtmpServer = new BrowserToRtmpServer(server, {
  // ...
  socketio: {
    cors: {
      origin: "*",
      methods: ["GET", "POST"],
      credentials: true
    },
  },
  // ...
});

Please let me know if that solves your issue.

[Akshay-akkay]

Yes, I looked into the source code. And was able to resolve this.

But now I am facing another issue namely,

Unhandled Error (random_uid)

on server side.

[olivierapivideo]

Can you send the full error ?

[Akshay-akkay]

Thanks, for helping.

Here is the full error log -

Error [ERR_UNHANDLED_ERROR]: Unhandled error. ('3a700d95-4d70-41be-80b8-edc6691767c3')
    at new NodeError (node:internal/errors:387:5)
    at BrowserToRtmpServer.emit (node:events:502:17)
    at BrowserToRtmpServer.emit (node:domain:482:12)
    at Connection.<anonymous> (/Users/akshay/Documents/GitHub/hhu_node_stream_proxy/node_modules/@api.video/browser-to-rtmp-server/src/index.ts:111:12)
    at Connection.emit (node:events:513:28)
    at Connection.emit (node:domain:482:12)
    at Connection.sendErrorToClient (/Users/akshay/Documents/GitHub/hhu_node_stream_proxy/node_modules/@api.video/browser-to-rtmp-server/src/connection.ts:106:10)
    at Connection.validateFfmpegConfig (/Users/akshay/Documents/GitHub/hhu_node_stream_proxy/node_modules/@api.video/browser-to-rtmp-server/src/connection.ts:120:12)
    at Connection.onStart (/Users/akshay/Documents/GitHub/hhu_node_stream_proxy/node_modules/@api.video/browser-to-rtmp-server/src/connection.ts:83:15)
    at Socket.<anonymous> (/Users/akshay/Documents/GitHub/hhu_node_stream_proxy/node_modules/@api.video/browser-to-rtmp-server/src/connection.ts:40:55) {
  code: 'ERR_UNHANDLED_ERROR',
  context: '3a700d95-4d70-41be-80b8-edc6691767c3'

}

[olivierapivideo]

Can you check in your browser console if you can see any error?

[Akshay-akkay]

On browser getting only, Connection Refused Error

[olivierapivideo]

The stack trace indicates that the error is thrown from validateFfmpegConfig. It looks like if the parameter defined on the client site were incorrect. Can you share the code snippet from the frontend that is responsible for instanciating BrowserToRtmpClient and calling the start() method ?