Using FFmpeg with WebRTC over UDP and DataChannel for real-time screen sharing with minimal latency

Currently, I'm seeking innovative approaches to achieve a low latency screen sharing feature using WebRTC but have hit a roadblock. Any assistance would be greatly valued!

At this moment, I am successfully able to capture and broadcast my Mac OS screen to localhost through FFmpeg. Subsequently, I retrieve the stream to display it on other devices within my network.

Below is the FFmpeg command line I use for capturing desktop video:

ffmpeg -f avfoundation -framerate 60 -capture_cursor 1 -i "1" -c:v h264_videotoolbox -realtime 1 -vsync 2 -b:v 5000k out777777.mp4

I'm contemplating if there exists a method to leverage WebRTC, specifically the datachannel technique, to enable a remote computer to access and play this UDP stream of my Desktop once two peers establish a connection via the Datachannel?

Your insights and suggestions are highly appreciated!

javascriptffmpegwebrtcvnc

Answer №1

ffmpeg on its own cannot handle WebRTC tasks, so you have the option to connect different components or utilize a complete WebRTC setup.

An individual successfully implemented screenshare using libx264 in a project known as webrtc-remote-screen, which might be beneficial for your needs!

If you wish to create your own solution, here are the essentials:

  • SDP Implementation (and signaling for transmission)

  • ICE Agent

  • DTLS Implementation

  • SCTP Implementation

Subsequently, you can transmit your frames via SCTP. Each of these components is intricate, necessitating thorough exploration of each issue independently.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue: It is necessary to utilize the `@babel/plugin-transform-runtime` plugin if you have set `babelHelpers` to "runtime" when using npm link

My situation involves having two interconnected React libraries: project-ui and propert-utils. project-ui relies on propert-utils, and the latter is installed within the former. "devDependencies": { "@company/project-utils": "gi ...

javascriptnode.jsreactjsbabeljsrollup

Erase message petition

Is it possible to delete a message that triggered the bot? For example, in a discord scenario like this: Me !quote Bot 'quote........' - someone In this case, the bot deletes both its own message and mine. I have managed to write code that dele ...

javascriptnode.jsdiscorddiscord.js

Executing JQuery and Ajax calls within a loop

Can I dynamically change the variable in ("xxxxx").html(data) inside a for loop? I've been struggling to figure this out. My goal is to populate an HTML table with JSONP data from multiple ajax calls within a loop, where the URL changes each time. Wh ...

javascriptjqueryajax

Guide on relocating the index.html file in a React application packaged using Vite to the public directory

After creating a ReactJS Vite app using the command npm init vite app-name, I noticed that the index.html file is located in the src folder. Is it considered best practice to have the index.html file in the src directory, or should it be moved to the pub ...

javascriptreactjsnpmcreate-react-appvite

Tips for aligning text with a progress bar

Is there a way to align my currentProgresstext with the progress bar? Currently, when I set progressWidth to 100, the text appears on the left side of the progress bar. Additionally, the progress bar's text disappears when progressWidth is small. How ...

javascriptcsstypescriptreact-nativejsx

ng-view is the culprit behind the website's fatal error

Encountering a "RangeError: Maximum call stack size exceeded" in the console while trying to recreate a basic routing example from w3schools. The crash seems to be linked to <div ng-view></div> in index.html. Despite making minimal changes from ...

javascripthtmlangularjsangular-routing

Ramda represents a distinct alternative to traditional vanilla JavaScript

I'm feeling a bit confused about how Ramda really works. I found this code and I'm not entirely sure how it functions. const render = curry( (renderer, value) => is(Function, renderer) && renderer(value) ); I just need to grasp an ...

javascriptramda.js

Converting TypeScript to JavaScript: A Step-by-Step Guide

I have this code written in Typescript and I need to convert it to JavaScript const Home = (props) => { return ( <div> {props.name ? 'Hi ' + props.name : 'You are not logged in'} </div> ); }; How can I re ...

javascriptreactjstypescript

Canvas in the off state has been removed

My goal is to create a basic JavaScript library that includes rotating, translating, and scaling the canvas. One issue I am facing is when I rotate the canvas, half of the content ends up getting deleted because the center of rotation is set at (0, 0). I ...

javascripthtmlcanvas

Executing a JavaScript function to submit an HTML form and circumvent the default behavior

Currently, I am utilizing a virtual keyboard that was created using JavaScript for the user interface on an embedded system. If you would like to access the source code for this virtual keyboard, you can find it here: https://codepen.io/dcode-software/pen ...

javascripthtmlformsdomevents

What methods does a webpage use to track views and determine when content has been seen?

I am interested in learning about the code and mechanism that detects when a specific section of a webpage has been viewed (purely for educational purposes). For instance, on websites like StackExchange it tracks when someone has thoroughly read the "abou ...

javascriptcssajaxbrowserweb

Display a brief message for a limited duration of two seconds when a timeout occurs

I've encountered an issue with the code below, where a message is displayed if a promise doesn't return after five seconds: $timeout(function () { if (!$scope.promiseComplete && $scope.submitted) { $scope.message = { ...

javascriptangularjstimeoutpromise

Is it possible to display an HTML table column-by-column rather than row-by-row?

I have a scenario similar to this: https://jsfiddle.net/ahvonenj/xrrqzypL/ The number of objects in the data-array could be either even or odd, making all these examples valid: var data = [ { title: 'Title A', content: &apo ...

javascriptjqueryhtml-table

Contrast various values with a single variable

I am in need of a more efficient way to compare a long list of strings against the same variable. Is there a more concise approach I could take? if(val=="kivi" || val=="apples" || val=="lychee" || val=="banana.C" || val=="mangos") ...

javascriptjquery

Modify the data being sent to the AJAX call within the complete function

My task involves modifying the data sent to an ajax call within the complete function. For example, I initialize var total = 1; after the ajax call has begun execution. function test(total) { total = total; alert("total : " + total); } $('#c ...

javascriptajaxdatatable

Express route with an optional GET parameter

Here is the scenario: app.get('/foo/start/:start/end/:end', blah.someFunc); successfully matches: /foo/start/1/end/4 However, to make it match an optional parameter as well, I want it to work with: /foo/start/1/end/4/optional/7 I attempted ...

javascriptnode.jsexpress

The global installation of grunt was unsuccessful and I am unable to locate it on npmjs.org

Can anyone help me troubleshoot this error I'm encountering while running npm install? I usually don't have issues installing libraries globally, but I can't seem to find grunt on npm install -g grunt npm ERR! Error: Not found: grunt@&apos ...

javascriptnpmgruntjs

When the user presses the enter key to submit data, the Ajax page reloads

I am facing an issue with a simple form for sending messages from one person to another using AJAX method POST to prevent page reload. The problem arises when the user hits [ENTER] in the field, causing the page to reload instead of the AJAX working as int ...

javascriptajaxforms

Ways to display a targeted div element in Ruby on Rails when a limit is imposed

I'm working on a Rails app and I have a specific goal in mind. I want to automatically display a static div element only when the conditions limit(4) are met, meaning 4 div elements are showing. Essentially, I want to show the "Apply for our Program" ...

javascriptjqueryruby-on-rails

What are the steps to creating a unique event within an AngularJs service?

In the midst of my AngularJs project, I find myself faced with a dilemma. I have a service designed to manage button events, but I want another service to handle these events indirectly without directly interacting with the buttons themselves. So, my goal ...

javascriptangularjseventscustom-events