I am having this error when I hangup the media stream if I don't use

document.location.reload(true);

but currently I use history.push('/') when I cancel the stream to route to the home page. Though stream gets stopped or cancelled but I get this error.

Uncaught (in promise) DOMException: Peer connection is closed

I am using the same hangup code to cancel the stream except the document.location.reload(true);

async function hangUp(e) {
  const tracks = document.querySelector('#localVideo').srcObject.getTracks();
  tracks.forEach(track => {
    track.stop();
  });

  if (remoteStream) {
    remoteStream.getTracks().forEach(track => track.stop());
  }

  if (peerConnection) {
    peerConnection.close();
  }

  document.querySelector('#localVideo').srcObject = null;
  document.querySelector('#remoteVideo').srcObject = null;

  history.push('/');
}

How do I properly cancel the stream and route to another page without getting this error?

I am using this for my ReactJS project and the browser I'm currently using is firefox.

Hello, when i click the Create Room button, console has error like this:

Access to XMLHttpRequest at 'https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?database=projects...' from origin 'http://localhost:5000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Can you help me?

I want to add more people to the room and simultaneously communicate with each other.
I tried couple of ways like adding remote stream objects dynamically but none of them worked.
Please suggest any solution.

Jeez, where to start.
The easy thing is fixing the obvious syntax error of -> to =>.
But the walk-through and the code are totally out of sync.
The create a room code is easy enough to put where the comment says, though again, out of sync with the directions. Then it starts to get confusing cause the walk-through talks about adding the code to join a room but doesn't specify where to put it. Adding it immediately after the "create" code ain't working. Another error that comes up is the fact the roomSnapshoot variable is being used but not defined. This whole thing needs to be re-looked at and the author needs some lessons in how to properly teach. Putting the final code somewhere in this repo would be nice.

When i am trying to use this thing on local and also on server remote video is not working ! can some one please help me

Hello guys please I need a little hep here please. From the documentation, at point number 8, it says locate the function collectIceCandidates in the file public/app.js I have searched the entire code but I can't seem to find where to place the sample code. Kindly help me out here. Thanks very much

I pulled and reconfigured it to work on my personal firebase. Both the caller and callee can see each other. The other person can hear me talk but I can not hear the other person speak. Is there a bug on this?

https://github.com/webrtc/FirebaseRTC/blob/master/public/app.js#L13
iceCandidatePoolSize: 10,
is pretty much useless and even harmful. Remember that iceCandidatePoolSize is specifying the number of components to pre-gather so a setting of more than one usually does not make sense.

@alvestrand it would be great if you could review whether this code lab is following/promoting/teaching what is to be considered the (unwritten) BCP. See also #1

I was trying firebase serve -o 0.0.0.0 in hope it could be accessed using other devices via local IP. The web page did appear but navigator.mediaDevices is undefined when using local IP instead of localhost or 127.0.0.1

I don't know if I'm missing out something
const roomRef = await db.collection('rooms').add(roomWithOffer); const roomId = roomRef.id; document.querySelector('#currentRoom').innerText = 'Current room is ${roomId} - You are the caller!'

The code above still renders roomId as null

Any suggestions, please?

as pointed out on stackoverflow the code used here does not work in Safari.

The code is adding remote tracks to a locally created stream which is initially empty. That is non-canon and a bad example.

cc @youennf

I've tested the app on google chrome browser. Everything works fine but the "audio" is gone after 4 or 5 minutes from the call started. But the video stream keeps living

Hello,

I am looking to integrate something like this into a website, as I currently use Firebase and this looks relatively simple. I'm quite new to WebRTC and I want to make sure that I am doing it correctly before releasing it. So would it be secure enough to be used in production?

Thanks in advance.

whenever i am trying to join a room using its id, it is showing me room id is not found, although everything else is working perfectly... can someone please help me in this

Hello dear
I uploaded the project to my server and when i tested it I found it only works when the caller and callee are on the same network
the message on console was 'Connection state change: failed'
can you help me with this issue

According to the docs, the doc() method doesn't return a promise. So why the await in this line?

i have hosted app in firebase but i can make video call of deifferent device mobile to pc or pc to bomile or other different pc you can see the link here

https://fir-rtc-6fb57.web.app/

Hi, I have developed a multi-party version to the application using firestore and firebase hosting. I am looking for contributors to this project. Please have a look: ZiMS Mesh

the sample code

roomRef.onSnapshot(async snapshot -> {
    console.log('Got updated room:', snapshot.data());
    const data = snapshot.data();
    if (!peerConnection.currentRemoteDescription && data.answer) {
        console.log('Set remote description: ', data.answer);
        const answer = new RTCSessionDescription(data.answer)
        await peerConnection.setRemoteDescription(answer);
    }
});

should use => instead of ->

on this page:
https://webrtc.org/getting-started/firebase-rtc-codelab

Hello,

Thank you so much for this project.
I just want to report a bug to you: remoteVideo don't work on Safari browser (Mac computer + iPhone).

Indeed I have a black screen.
I am using this code: https://github.com/webrtc/FirebaseRTC/blob/solution/public/app.js

I don't know why because the AppRTC video chat client powered by Google App Engine works very well on Safari browser:
https://appr.tc/

--> https://webrtc.github.io/samples/

collectIceCandidates(roomRef, peerConneciton, localName, remoteName) what I need to pass for param localName and remoteName

I am following the documentation - https://webrtc.org/getting-started/firebase-rtc-codelab#9_conclusion

I have done all things which were mentioned in the above documentation.

As per the given command- firebase serve --only hosting, I am getting issue with running on local. And I am having no idea on from this where the issue is coming.

How I can resolve this? Does anybody have an idea about this?

Hi, WebRTC might be easy for android developer if someone from official aka Google provide some guide and it's implementation like this library. If there is any guide for android with firebase or without can anyone please share.

TL;DR: use this fork for a functional tutorial.

Hi anyone new to this!

If you're digging into the issues section, you may have discovered that the tutorial on webrtc + firebase is rather confusing and out of date.

This repository isn't being actively maintained anymore, so until someone gets a moment to update it, I have created a working fork of the project whose README has corrected and enhanced instructions on completing the lab. I have also updated my fork's solution branch to match and be correct.

Thanks also to @nutkuhn (https://github.com/natkuhn) for adding information on how to run it on your local network instead of on two browser tabs.

Edited to add: Also if you want to submit fixes/enhancements to my Fork, I'm happy to include them. Shoot me a PR.

How can i add rooms so that users can join each other threw rooms apearing on the site , Sorry for my english .

I down load the source code and try to share screen on meeting, but I only see my screen, other user can not see.
this is code:
when user click on button share screen

<button class="mdc-button mdc-button--raised"  id="startButton">
        <i class="material-icons mdc-button__icon" aria-hidden="true">close</i>
        <span class="mdc-button__label">sharing</span>
    </button>
<video id="sharing-video" autoplay playsinline muted></video>
<script>
const videoShareScreen = document.querySelector('video');
startButton.addEventListener('click', () => {
 navigator.mediaDevices.getDisplayMedia({ screen: true,screenAudio: true}).then(handleSuccess, handleError);
})
function handleSuccess(stream) {
  startButton.disabled = true;
  

  // demonstrates how to detect that the user has stopped
  // sharing the screen via the browser UI.
  
    videoShareScreen.srcObject = stream;
    

  stream.getVideoTracks()[0].addEventListener('ended', () => {
    errorMsg('The user has ended sharing the screen');
    startButton.disabled = false;
  });
}
function handleError(error) {
  errorMsg(`getDisplayMedia error: ${error.name}`, error);
}
</script>

the error brings me to this function:
(when clicking on "cameraBtn" Button)

const stream = await navigator.mediaDevices.getUserMedia(
{video: true, audio: true});

I tried on android browser and works fine, but in my pc doesnt work, any one knows why ???

Hi are the buttons suppose to be disabled?

I was able to start with FirebaseRTC and create twisty.io. This is a free service for creating short links to video chat rooms. No login or accounts required. The rooms are persistent which is a change from this project. Also the room IDs are shorter rather than using the firebase object IDs.

As someone mentioned before there is a dearth of WebRTC code out there so feel free to poke through the JS and HTML.

A simple REST API is coming. Better call cleanup and rejoining rooms are coming too.

Documentation need for those who have less knowledge of webRTC