tannergabriel/webrtc-video-broadcast

WebRTC video/audio broadcast

WebRTC Video/Audio Broadcast

WebRTC PeerToPeer broadcast application that allows the broadcaster to send a video and audio stream to all connected users (watchers).

You can find the tutorial that explains the code and functionality on my website.

Getting started

Starting the application

Start the application using Node:

# Install dependencies for server
npm install

# Run the server
node server

Start the application using Docker:

# Building the image
docker build --tag webrtcvideobroadcast .

# Run the image in a container
docker run -d -p 4000:4000 webrtcvideobroadcast

Testing the application

The application should now be running on your localhost:4000 and you test it by connecting to localhost:4000/broadcast.html to add a new broadcaster.

After that, you just need to visit localhost:4000 to connect to the server as a client and you should get the video that is streamed from the broadcaster.

Adding a TURN server

A TURN server is used to relay traffic if a direct peer-to-peer connection fails and is required for most WebRTC applications since a direct connection is often not possible between two clients that aren't on the same network. This repository doesn't include the usage of a TURN server by default, but you can add one by commenting in the turn configuration in the broadcast.js and watch.js file and filling in your TURN credentials.

There are several options on how you can create your own TURN server. Here are just two common ones:

• Coturn
• Golang WebRTC pion library TURN examples

You can also use TURN servers from cloud providers or other companies. Here is a tutorial that shows you how to set up Coturn and add a domain to your TURN server.

Author

Gabriel Tanner

Support me

License

This project is licensed under the MIT License - see the LICENSE.md file for details

webrtc-video-broadcast's Issues

how many users can view the stream please mention the maximum limit

please mention the how many connection it can handle simultaneously

error running localhost:4000/broadcast

server started
http://localhost:4000/broadcast gives error Cannot GET /broadcast

how i can receive audio from broadcast?

hello... am found ur project very useful and i have some question
how i can receive audio from broadcast in viewer page.... its only video screen and i cant heard any audio from another device in same network

2 Way Audio Example

Thank you for you effort for creating this example without using unnecessary libraries.

Would it be possible to provide the sam with 2-way audio? I have some difficulties to hear the voice, even though the microphone has been enabled on both sides.

Thank you!

how to view multiple brodcast on screen

Not running on Raspberry Pi

Describe the bug
When install and run on RPi shows Windows camera

To Reproduce
Steps to reproduce the behavior:

1. Install on RPi
2. replace original server.js with attached server.js
3. run it from a browser on local network

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots (optional)
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. Windows 10]
• CPU architecture: [e.g. x86]

Dependency versions:

• Nodejs version: [e.g. 10]
  server.zip

Additional context (optional)
Add any other context about the problem here.

Checklist:

• [] I included all information required in the sections above
• [] I made sure there are no duplicates of this report (Use Search)

not working when install on server

when I installed it on ubuntu server 20.04 then tried running broadcat.html through the desktop the result was a blank page with a blank drop down audio and video menu.

upgrade to native websockets

would be nice to dump the old socket.io dep

Only a still shot remotely

Running the server and connecting as the broadcaster then watching from another browser on the same machine works well. But, when I connect from my phone as a watcher, I only get a still image, not the video. Any ideas why?

Audio and Video is not enabling

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

There is an error regarding to audio and video, they are not being signaled..

video orientation and resolution

Is your feature request related to a problem? Please describe.
I'm running the application on Raspberry Pi. The video is oriented upside down

Describe the solution you'd like
The API to change video orientation and resolution

Describe alternatives you've considered
Searching for APIs to resolve my issue

Additional context

Dependency Dashboard

This issue provides visibility into Renovate updates and their statuses. Learn more

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency eslint to v8.7.0

---

• Check this box to trigger a request for Renovate to run again on this repository

1toN broadcast

I guess your solution is ok for 1toN where N<10 (since 1 client will deliver N streams and will lack of bandwidth quickly)
My question is:

1. can we use TURN to force to relay ALL streams (and have N>100 streams for instance) ?
2. any solution other solution to have n>100 (like using a SFU server ?)

regards

watcher issues

The watcher screen is just black with nothing on it (in Chrome on Win 7). You have to add 'controls' to the video tag, and then hit the play button on it. Not sure why you have to hit play because it has 'autoplay', but I have to anyway. Otherwise, nice!

Code modification for video app

Hey, I really appreciate the work you put into your example of a video chat app with socket.io. and node.js. I have been trying to work out a way to incorporate your approach into adding a video chat application on an interactive online whiteboard project I have been working on.

My main issue is that with your code, the watcher is a video element on another html file that has to be opened separately. What I want is to have both the broadcaster and watcher video elements on the same page, so I added the broadcaster and watcher code (with some modifications) into my code and deployed the app to heroku. The video streaming works fine when I open the tab as the broadcaster. However, it doesnt stream to the watchers video element when I open the second tab. Would appreciate any help you can offer, I know I havent gone into alot of detail but just wanted to give you a general idea of whats going on.

By the way my app has two video elements, so the way it works is that while one element is streaming the media from the webcam (my computer), the second element on the same page is streaming the media from a clients webcam somewhere else.

Looking forward to hearing back from you, thanks.

Audio problem

Describe the bug
I tried to run this repository on both Ubuntu PC and a Macbook Pro (both docker and node server.js), but the sound can not be heard.

To Reproduce
Steps to reproduce the behavior:

1. Run the docker container
2. Go to localhost:4000/broadcast.html and say something
3. Open your phone and go to :4000
4. Try to hear anything

Expected behavior
The sound of the broadcaster should be heard.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS] MacOS 10.15.6
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] 83.0.4103.116

Smartphone (please complete the following information):

• Device: [e.g. iPhone6] Huawei Nova 3i
• OS: [e.g. iOS8.1] Android 8.1.0
• Browser [e.g. stock browser, safari] Chrome
• Version [e.g. 22] 84.0.4147.89

Additional context
Add any other context about the problem here.

Capturestream on instead of camera

Does it posible to share the capturestream instead of camera...

Which
<VIDEO id =vod>

Video here

Var vod =d. getElementById('vod');

Vod.capturestream();

Then transmit it to other?

help to watch the Broadcaster by name

im looking for some way to add name to streamer and viewe by streamer name
for example
http://127.0.0.1/Broadcast/Broadcast.html?name=Ahmed
http://127.0.0.1/Broadcast/watch.html?host=Ahmed
I appreciate any help

video mp4 p2p cdn

interesting your work.

Can you help me? I need to play a video and I need the peers on the network to be able to view the video with the webrtc network. I want them not to use the cdn of the video, only the peer network.

can this be accomplished with websocket and webrtc?

I'm sorry for my English.

Viewer only works sometimes

I was testing your project because I need to create live transmission and I need a starting point. But I've found something weird: most of the times the viewer simply doesn't show anything. I spent hours making some tests and trying to found the cause, and what I found out is that it doesn't show any errors and I haven't found any difference on the communication when comparing the logging of when the viewer works with when it doesn't. But I found out something odd that I'm not sure if it's supposed to work like that and I think maybe it has to do with this issue.

When I try to make the stream the video, that's what happens:

peerConnection.ontrack and peerConnection.onincecandidate functions on watch.js file are executing two times each

On the broadcast.js file the peerConnection.onicecandidate is executing a variable number of times (usually 3 - 12 times)

And it seens that the problem is getting more frequent the more I test it. Because when I started testing it was working fine, but then it starting getting worse and worse,

Any ideias of what's happening and how can it been fixed?

I'm using Chrome 84.0.4147.89 in Linux Ubuntu

visitor counter

hello gabriel,,

thanks for very simple code... here is my queries are follows...

1. it is not playing on every on browser....

2. is it there any restriction on max allowable no of viewers ...

3. importantly , i required the no of viewers watched / visit my broadcast with their detail (ip, etc)
   it can be possible?..if it is what code i have do implement on that..please help me..thanks

socket.io path should point to node modules?

maybe use this?

<script src="../node_modules/socket.io/dist/socket.js"></script>

vs the one you have:
<script src="/socket.io/socket.io.js"></script>

would be nice to have an update that has the client socket.io intergated

Watcher produces black screen indefinitely

When running the code, viewer pages are completely black and don't seem to update with video feed. The broadcaster sees that a viewer is joining and they seem to exchange offer/answer successfully.

Steps to reproduce
Run the code as usual with node.

Expected behavior
Live video feed to display in the watcher's browser.

Desktop (please complete the following information):

Server/Broadcaster:

• NVidia Jetpack 4.3 (based on ubuntu 18.04)
• Chromium
• 80.0.3987.87

Viewer (1): Same as Broadcaster

Viewer (2):

• Ubuntu 18.04
• Chrome
• 81.0.4044.138

Viewer (3):

• Android 10
• Chrome
• 81.0.4044.138

Broadcast video content freezes. Needs reload page to work again

Describe the bug
After a while (on my setup it is ~30 min, ubuntu on a mini pc) the broadcast.html video feed will freeze and I have to reload page to make the video work again. The viewer.html gets the content immediately after reload on broadcast.html, so I believe the connection is ok.
Using a more powerful machine to broadcast video content, will expand the lifetime of video streaming before the video again will freeze and needs to reload page. On a thinkpad (windows 11) p14s chrome uses 1 gb of memory and the cpu is running 60%.
Some kind of memory leak... ?

To Reproduce
Steps to reproduce the behavior:

1. Clone repo.
2. npm install
3. localhost:4000/broadcast.html

Expected behavior
The video stream will stay consistent without the need of reloading or other maintanence.

Desktop (please complete the following information):

• OS: [ubuntu]
• CPU architecture: [intel celeron x86]

Dependency versions:

• Nodejs version: [10.19.0]

Checklist:

• I included all information required in the sections above
• I made sure there are no duplicates of this report (Use Search)

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>whitesource/merge-confidence:beta)

Doesn't work on my server

I just published my code and it's not working, but on localhost I work very well.

I think it has to do with the stun or turn server, but I don't have much knowledge of this.
If you could advise me, it would be very helpful.

this is my setting:
const config = {
iceServers: [
{
"urls": "stun:stun.l.google.com:19302",
},
// {
// "urls": "turn:TURN_IP?transport=tcp",
// "username": "TURN_USERNAME",
// "credential": "TURN_CREDENTIALS"
// }
]
};

Support for multiple Broadcast?

Hi You planned to implement support for multiple broadcast? Like i will open broadcast page and i will enter any random string as identifier and i will start broadcasting, when someone wants to watch that broadcast, they have to enter same random string which was used by broadcaster.