The video is functioning correctly, but there is an issue with the audio. about react-native-webrtc-web-shim

[8BallBomBom]

Great to hear, thanks for the help, will push the update out 😸
Happy Holidays 🎄

[8BallBomBom]

Been a bit busy but I'll be looking to test and push out a fix over the next week 😀

---

@vlingo8888 @MehmetKaplan I've just pushed an update to another branch.
Can you test the release over here please.
Will most likely do some more changes before an actual release.

[MehmetKaplan]

Thanks @8BallBomBom

Here are my 2 findings (first is the important one):

1. I got following error:

RTCPeerConnection is not a constructor

Digging the problem, I suspect from the index.js file which does not export the same objects.

v1.0.6

import {
  MediaStream,
  MediaStreamTrack,
  RTCView,
} from './src/react-native-webrtc-web-shim';

export { MediaStream, MediaStreamTrack, RTCView };

v1.0.5

import {
  RTCPeerConnection,
  RTCIceCandidate,
  RTCSessionDescription,
  MediaStream,
  MediaStreamTrack,
  mediaDevices,
  permissions,
  registerGlobals,
  RTCView,
} from './src/react-native-webrtc-web-shim';

export {
  RTCPeerConnection,
  RTCIceCandidate,
  RTCSessionDescription,
  MediaStream,
  MediaStreamTrack,
  mediaDevices,
  permissions,
  registerGlobals,
  RTCView
};

2. Necessity of node 18. I think previous version did not dictate the node version to be 18.

$ yarn add 'react-native-webrtc-web-shim@https://github.com/react-native-webrtc/react-native-webrtc-web-shim#1.0.6'
yarn add v1.22.19
...
[2/4] 🚚  Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=18.12.0". Got "16.20.0"
error Found incompatible module.
...

---

To be specific I used this command to install:

yarn add 'react-native-webrtc-web-shim@https://github.com/react-native-webrtc/react-native-webrtc-web-shim#1.0.6'

[MehmetKaplan]

First of all, I understand the rationale and I am ok to import the remaining objects directly from react-native-webrtc.

That said, the method in v1.0.5 was enabling us to import react-native-webrtc-web-shim as if it was a "drop-in" replacement of react-native-webrtc for the web.

What I mean is, I had below 2 files:

// webrtc/react-native-webrtc.js
export * from "react-native-webrtc-web-shim";

// webrtc/react-native-webrtc.native.js
export * from "react-native-webrtc";

And when using simply importing with a single method:

import {
	mediaDevices,
	RTCPeerConnection,
	RTCSessionDescription,
	RTCView,
	...
} from "./webrtc/react-native-webrtc";

By this way, we can utilize React Native's build behavior, so that web builds go to the react-native-webrtc-web-shim and native builds go to the react-native-webrtc. Of course this still can be achieved but from the users' perspective, the method in v1.0.5 requires -slightly- less coding.

At the end of the day you are the boss. :-) But I would kindly suggest keeping the API not impacted.

[MehmetKaplan]

One more information. Apparently I lack the information about how to;

... be able to use the other objects directly from react-native-webrtc

What I do:

// webrtc/react-native-webrtc.js
import {
	RTCPeerConnection,
	RTCIceCandidate,
	RTCSessionDescription,
	mediaDevices,
	permissions,
	registerGlobals,
 } from "react-native-webrtc";
 
 import {
	MediaStream,
	MediaStreamTrack,
	RTCView,
 } from "react-native-webrtc-web-shim";
 
 export {
	RTCPeerConnection,
	RTCIceCandidate,
	RTCSessionDescription,
	MediaStream,
	MediaStreamTrack,
	mediaDevices,
	permissions,
	registerGlobals,
	RTCView
 };

Then I get the following error:

ModuleNotFoundError: Module not found: Error: Can't resolve 'react-native-web/dist/exports/PermissionsAndroid' in '/Users/mehmetkaplan/ActiveCodes/ayebuy/ayebuy-webrtc-example-frontend/node_modules/react-native-webrtc/lib/module'

[MehmetKaplan]

Hi @8BallBomBom ,

First my apologies for late response again. :-S

I am not sure if I did something wrong (I just installed the package and built the code without changing anything) but I got the following error:

react-dom.production.min.js:189 TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    at nonIterableSpread.js:2:9
    at i (toConsumableArray.js:6:95)
    at p (RTCView.web.js:23:26)
    at Ca (react-dom.production.min.js:167:137)
    at Cs (react-dom.production.min.js:290:337)
    at wu (react-dom.production.min.js:280:389)
    at gu (react-dom.production.min.js:280:320)
    at mu (react-dom.production.min.js:280:180)
    at au (react-dom.production.min.js:271:88)
    at uu (react-dom.production.min.js:273:300)

The steps to produce:

1. Install the package as the previous method:

yarn add 'react-native-webrtc-web-shim@https://github.com/react-native-webrtc/react-native-webrtc-web-shim#1.0.6'

2. Expo build and deploy to be served statically:

npx expo export:web
...
pm2 start ecosystem.config.js --env=test;

[MehmetKaplan]

Superb, works like charm. 💯✅👍

Thanks a lot @8BallBomBom

PS: I checked the voice also, it is NOT muted, as expected. So for me everything is perfect.

[8BallBomBom]

I'm not seeing anything too obvious other than some code i can't investigate as it isn't included 🤔

Can you provide more info?
Which platform are you having issues with?
and have you tested other platforms?

[vlingo8888]

Hi @8BallBomBom Thank you.

Platform: Web (EXPO)
Expo: ~49.0.7
Node: v16.16.0
React-Native: 0.72.3

I haven't tested it on other platforms, only on the web (EXPO). Now I know where the issue lies: the RTCView from "react-native-webrtc-web-shim" appears to have trouble with audio. I attempted using a custom player, and it worked flawlessly:

Instead of

const { RTCView } = require('react-native-webrtc-web-shim');
<RTCView stream={stream} /> 

I used my custom component

import React, { useEffect, useRef } from 'react';

const VideoPlayer = ({ mediaStream }: {
    mediaStream: MediaStream | null;
}) => {
  const audioRef = useRef<any>(null);

  useEffect(() => {
    if (mediaStream && audioRef.current) {
      const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
      const source = audioContext.createMediaStreamSource(mediaStream);
      source.connect(audioContext.destination);
      audioRef.current.srcObject = mediaStream;
      audioRef.current.play();
    }
  }, [mediaStream]);

  return (
    <video ref={audioRef} controls
    style={{
      width: 150,
      height: 150,
        borderRadius: 8,
    }}
    />
  );
};

export default VideoPlayer;

[8BallBomBom]

Ahhhh, interesting find and thanks for debugging 😸
There is a module rewrite planned in the near future so we will address this issue soon 👍🏻

---

It seems that over here the video player might actually be defaulting to muted which isn't as intended...
The more you learn when not being the original programmer 🤣

[MehmetKaplan]

Hi @8BallBomBom ,

This is exactly what we are stuck also. The Video Call starts by default muted and whatever we do, we can not programmatically override the flag.

What we did is:

if (remoteStream) {
	for (let i = 0; i < remoteStream.getTracks().length; i++) {
		if (remoteStream.getTracks()[i].kind === "audio") {
			remoteStream.getTracks()[i].enabled = true;
		}
	}
}

Is there any workaround that we can do until that bug fix? (Or even better, is there a planned fix date?)

[MehmetKaplan]

Hi @8BallBomBom ,

Would you please let me know the steps to test? (I believe cloning the repo and replacing what lies under the node_modules should not be sufficient. :-/ )

PS: Sorry for my late response. Either somehow I missed a notification, or I am not notified.

[8BallBomBom]

Ahhh, no worries 😸
You should be able to test the new branch by executing one of the following commands in your project directory.
Just depends on which package manager you use.

npm install react-native-webrtc/react-native-webrtc-web-shim/#1.0.6 --save
yarn add react-native-webrtc/react-native-webrtc-web-shim/#1.0.6
pnpm install react-native-webrtc/react-native-webrtc-web-shim/#1.0.6

[8BallBomBom]

Figured it wasn't necessary to import and export objects from another module that wasn't actually being altered.
So them changes will be mentioned in the upcoming update.

---

Just pushed an update which changes one of the dependencies and lock file.
Hopefully fixes the issue for people still using node 16.

[MehmetKaplan]

Sorry, I could not get this part:

Figured it wasn't necessary to import and export objects from another module that wasn't actually being altered.

The previously exported objects will be exported in the new version so that we can use them, right? :-)

[8BallBomBom]

You should be able to use the other objects directly from react-native-webrtc.
But the following should be imported from this module instead.
MediaStream, MediaStreamTrack, RTCView

Seemed strange to import and then instantly export objects from the other module.
If we actually imported them to then export altered versions then it would make sense.
But we weren't doing that as such.
Hope that makes sense 😉

As always the issue is up for debate, hopefully not caused too much disruption.
Question is, everything now working as expected?

[8BallBomBom]

Generally speaking you shouldn't need to import the permissions object as permissions are handled during runtime when the camera and microphone is requested. That being said it is usually best to ensure the permissions are granted way before that point 🤔

As for the whole API changes with importing and exporting, you have a bit of a different point of view than i do but i can understand wanting to just import everything from one place rather than multiple places 😺 come to think about it, I've misunderstood how the implementation should actually be... 😅 this is a shim library after all 🤦‍♂️

I also removed the use of memo on the RTCView as it didn't seem necessary.
Will run some tests to ensure things are working as expected 👍🏻

---

Pushed an update, should be golden 😸
You can now import everything from this library directly as before and the newer API functionality has been added.

[8BallBomBom]

Will be looking to release an update soon if there's no other issues 😅

[8BallBomBom]

No worries, it is end of year and holiday season after all 😀
Wasn't experiencing any issues when testing but was also not using expo 🤔 will push out another patch shortly 👍

---

Had a bit of an oopsie, seems my local dependencies weren't updating.
As such that error didn't get caught 😓
After that latest patch everything now seems to be working as expected on this end.
@vlingo8888 @MehmetKaplan Can you check if everything is now working as intended.