Тёмный

React native video call app free | webrtc | from scratch 

Tech Savvy
Подписаться 2,5 тыс.
Просмотров 43 тыс.
50% 1

Опубликовано:

 

25 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 141   
@mohammadhasnain2214
@mohammadhasnain2214 3 года назад
you are amazing bro, you deserve a hundred thousand likes. Love your work.
@mohammadhasnain2214
@mohammadhasnain2214 2 года назад
bro I need help. when I followed your video for the first time it worked but when I opened and run the project after 2 weeks. it is giving me this error. ERROR TypeError: null is not an object (evaluating 'snapshot.data') ERROR TypeError: null is not an object (evaluating 'snapshot.docChanges') so I figured that something is wrong with my database. so I went and checked my DB I saw that firebase deleted all my data and DB. So I created a new one with a collection of "meet and document "chatId". but the application is still giving the same error. please HELP I need to submit this project I can not figure out the problem. no help from google too. 😞
@TechSavvy_ytube
@TechSavvy_ytube 2 года назад
Check the rules tab in firebase. If it's testing period is over it will block all request.
@mohammadhasnain2214
@mohammadhasnain2214 2 года назад
@@TechSavvy_ytube Bro you are so cool. you are right testing period was over and you replied me in less than 10 seconds with the correct solution.
@SACKO0731
@SACKO0731 19 дней назад
@@TechSavvy_ytube this setup is too permissive how can we restrict it to only involved users?
@estebancontreras9808
@estebancontreras9808 3 года назад
hello im getting following error: Error: Error processing ICE candidate
@KidusEfrem-u7b
@KidusEfrem-u7b 7 месяцев назад
Hello Dear, I hope you will read this comment and reply. Can you do the same tutorial but with aws for the server instead of firebase?
@devmattias7912
@devmattias7912 3 года назад
Hi, congratulations on your work. Would you help me? When I finish the call it generates an error: Mediastreamtrack has been disposed. Any idea what it is?
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Hey .. I have not faced this issue before. Let me know which line is giving this error.
@devmattias7912
@devmattias7912 3 года назад
@@TechSavvy_ytube The error occurs in the function hangup()
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
@@devmattias7912 hey i think there is issue in repo github.com/react-native-webrtc/react-native-webrtc/issues/1077
@devmattias7912
@devmattias7912 3 года назад
@@TechSavvy_ytube I sent the discussion started , but I still haven't got answers that solve the error.
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
@@devmattias7912 try the version 1.89.2.
@mubeensiddiqui7100
@mubeensiddiqui7100 Год назад
how to create the firestore databse shown here.. please mention the schema
@alvaro2916
@alvaro2916 3 года назад
Hi, I'm a bit confused. You created the project using a bare workflow with expo (then it's ejected). In order to launch the application, you use expo start too? or you switch to npx react-native run-android ? Thx
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Yes I switch to react-native run-android
@rehanahmed-zl3xu
@rehanahmed-zl3xu 2 года назад
Where did u used EventOnAddStream? U import it from webrtc but i cant see where u used it in code!
@estebancontreras9808
@estebancontreras9808 3 года назад
im generate apk and testing in 2 devices, but is not working there never shows caller video, what should i do?
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
What is the error ur getting ?
@estebancontreras9808
@estebancontreras9808 3 года назад
@@TechSavvy_ytube ReferenceError: Can't find variable: RTCSessionDescription and then second one: Error: Error processing ICE candidate
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Was it working in debug mode ? Is it not working only in the signed app ?
@AmitK
@AmitK 3 года назад
@tech savvy , do you think its okay to use webrtc in a production app , specially when a app having 4000 - 5000 users . its for a doctor patient appointment app
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Yes, but do look up the security check list.
@AmitK
@AmitK 3 года назад
@@TechSavvy_ytube and does source code available in es6 too ?
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
The source code is in typescript. As shown in the video. But you can just remove all the type declaration.
@AmitK
@AmitK 3 года назад
@@TechSavvy_ytube I am. Gonna buy it .
@dilancapt2691
@dilancapt2691 Год назад
Did you get the doctor app up and working?
@akashyadav-be9df
@akashyadav-be9df 3 года назад
In documentation of react-native- webrtc it is written that "if you are using expo you cannot use this plugin unless you eject it" Can you explain please how you eject it
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
I have shown in the video to start with bare workflow. ( Same as ejecting )
@chinfanster
@chinfanster Год назад
Now you can use EAS build without ejecting from the expo
@vangiaphoang7227
@vangiaphoang7227 3 года назад
I got an error: "FirebaseError: Function CollectionReference.add() requires its first argument to be of type object, but it was: a custom RTCIceCandidate object" can you help i?
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Hi .. were are you getting this error. While calling or joining?
@vangiaphoang7227
@vangiaphoang7227 3 года назад
@@TechSavvy_ytube thank you. I fixed this bug
@fatimarach77
@fatimarach77 2 года назад
@@vangiaphoang7227 how plz
@vangiaphoang7227
@vangiaphoang7227 2 года назад
@@fatimarach77 Maybe you should review your syntax code
@alejandrovelazco356
@alejandrovelazco356 3 года назад
for some reason the remote video is never shown to me
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Hi .. it might not work when ur connecting emulator with phone. Try with two phones
@yashvaghela3287
@yashvaghela3287 2 года назад
getting black remote stream both end.not getting any error
@pa30p42
@pa30p42 6 месяцев назад
I've faced with issue, that app works only if two devices are connected to same wifi, if not i see just black screen . all configs are corrects with , stun, turn, ice
@Dangkhanh-r5l
@Dangkhanh-r5l 29 дней назад
U need check your nat or turn and stun server if u use local turn and stun sever your call only work on same wifi or local area
@shanidoger8546
@shanidoger8546 2 года назад
great tutorial sir sir plz make one video on callkeep plzzzz
@arshiyanaz2675
@arshiyanaz2675 2 года назад
getting this error when create method is called....firebase is also empty.please help Possible Unhandled Promise Rejection (id: 0): TypeError: undefined is not an object (evaluating 'pc.current.addStream') database rules: rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if true; } } }
@MayankSingh-oj1xc
@MayankSingh-oj1xc 3 года назад
Can we add more people to the call with current code base?
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Yes you should be able to add. The webrtc implementation is like meeting room.
@MayankSingh-oj1xc
@MayankSingh-oj1xc 3 года назад
@@TechSavvy_ytube Could you help me how can I integrate chat and screen share in this code.
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
hi.. Check out my old videos for chat ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-tNlqILs5oG0.html. Screen share will be tricky. (github.com/react-native-webrtc/react-native-webrtc/issues/57)
@harki-v8m
@harki-v8m 2 месяца назад
hey i am using expo go when installing package react native webrtc error found no module react native webrtc found what is the reason for this ?
@Harsha_9920
@Harsha_9920 2 месяца назад
Expo dont have that package
@Dangkhanh-r5l
@Dangkhanh-r5l 29 дней назад
U should install expo development build for your device to add custom native code
@mediationbreaksessions524
@mediationbreaksessions524 2 года назад
someone ought to make screen recorders but where you as the viewer can click the screen on a previously recorded screen and copy the information of any text field, that was i can copy the long lines without having to type them in manually
@vishalgawas88
@vishalgawas88 Год назад
Hey!!!!, Great work. It works well for the first call but when I try to call again I get WARN Possible Unhandled Promise Rejection (id: 18): Error: The remote description was null And the app crashes. Please help me.
@ravisfarooq477
@ravisfarooq477 2 года назад
does this support background calling, like if we have lock screen on, does this still show getting call screen notification?
@ravisfarooq477
@ravisfarooq477 2 года назад
?🙄
@TechSavvy_ytube
@TechSavvy_ytube 2 года назад
It doesn't. U need to use another library
@ravisfarooq477
@ravisfarooq477 2 года назад
@@TechSavvy_ytube which library?
@ravisfarooq477
@ravisfarooq477 2 года назад
??
@maneger7354
@maneger7354 2 года назад
do you think if I follow the tutorial, I could recreate it but in react js?
@TechSavvy_ytube
@TechSavvy_ytube 2 года назад
I think you need to use different library for webrtc. But the concept should be same.
@mmwmmw2055
@mmwmmw2055 3 года назад
Thanks great, can you continue a little advance like how can add more people to call. how to detect the calle is in other call already. How to call if the calle is not inside the app.
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Sure will try in the future. But this might help you We can add more people to the call with the current configuration. You can add flag in the database when we join or receive a call. Which you can use it for the check. You can use this github.com/react-native-webrtc/react-native-callkeep
@michaelchilaka3113
@michaelchilaka3113 2 года назад
Hi, I'm somehow confused, I want to create a video app for react-native-web. So my question is, to run the andriod app on the terminal is yarn run android, so I believe to run the web will be yarn run web, am I right? So if yes, it would work on the web exactly how it's working on the android or iOS, am I right?
@TechSavvy_ytube
@TechSavvy_ytube 2 года назад
I don't think that library supports web.
@michaelchilaka3113
@michaelchilaka3113 2 года назад
Okay @@TechSavvy_ytube But is there any library that supports react-native-web? If there is can you tell me
@TechSavvy_ytube
@TechSavvy_ytube 2 года назад
If U just want to build for web .. there are other libraries u can use.
@michaelchilaka3113
@michaelchilaka3113 2 года назад
@@TechSavvy_ytube I-meant-for-react-native-web-&-not-for-the-web-proper Like-I-need-a-single-code-base-structure-to-handle-the-3-of-them
@TechSavvy_ytube
@TechSavvy_ytube 2 года назад
It's not there
@jeffraj9937
@jeffraj9937 3 года назад
Bro App Crashes instantly after exporting Please let me know how to do that
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Hi .. make sure u follow the webrtc setup steps. By export u mean deploy ?
@jeffraj9937
@jeffraj9937 3 года назад
Yes while deploying it's not supported as I searched in Google it says that we can run webrtc in debugging as we are setting one option to false in properties.gradle. even I tried multiple still getting crash. But it's working fine in emulator while creation
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
@@jeffraj9937 I have actually tested this build on the real phone. It works fine.
@jeffraj9937
@jeffraj9937 3 года назад
@@TechSavvy_ytube can you tell me the settings to deploy. Whenever I'm using gradlew assemble it's showing error
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
​@@jeffraj9937 The gradle assemble is working fine for me. Check this out if ur facing error screen on opening shreyasnisal.medium.com/solved-packing-error-in-react-native-release-apk-f887687edc4f
@akashyadav-be9df
@akashyadav-be9df 3 года назад
is we need to pay money to firebase for data transfer.
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Hi .. No its free till certain reads and writes. Check out the detailed comparison here firebase.google.com/pricing?authuser=0
@puneetkansal
@puneetkansal 2 года назад
Getting Firebase error. Don't know why it is throwing firebase error for intialize
@TechSavvy_ytube
@TechSavvy_ytube 2 года назад
Please check this video for new way of doing firebase setup ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kyP9ettyogo.html
@ricardobrito9865
@ricardobrito9865 2 года назад
Hello, great video, would kindly help me with this error? o function setupWebrtc, when it comes to pc.current = new RTCPeerConnection(configuration); i have a promise rejection with the following message " WARN Possible Unhandled Promise Rejection (id: 30): TypeError: null is not an object (evaluating 'WebRTCModule.peerConnectionInit')" i am always getting this error with new RTCPeerConnection(configuration), wherever i call it
@ricardobrito9865
@ricardobrito9865 2 года назад
I figured out, i just needed to reinstall the app in my emulator and it worked as desired, thanks
@arshiyanaz2675
@arshiyanaz2675 2 года назад
i am facing the same issue ,...i reinstalled the app still no luck
@ricardobrito9865
@ricardobrito9865 2 года назад
@@arshiyanaz2675 a different solution from a friend, he reinstalled using yarn, and deleted the package.lock.json
@cloudtechyy
@cloudtechyy 3 года назад
can we publish this application on internet for productional purposes...
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Yes
@swarashetye4946
@swarashetye4946 3 года назад
Hi I am still getting this error:- Error : Failed to add ICE candidate could you please guide me on how to resolve this problem? and I can see only the local stream on the screen cant see the remote stream together.
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Hi ... make sure u use two emulator to test this. Is the firestore getting updated correctly ?
@swarashetye4946
@swarashetye4946 3 года назад
Yes I fixed the problem... But now I can't hear the audio...do we need to specify seperate code for it?
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Use headset it will work. U need to use github.com/react-native-webrtc/react-native-incall-manager for using different speakers
@kewtomrao
@kewtomrao Год назад
Could this be converted to APK without issues?
@tallsageJFF
@tallsageJFF 3 года назад
Thx. I catch a problem, on 22:00 you get local stream, but i get this bug ([Unhandled promise rejection: TypeError: null is not an object (evaluating 'WebRTCModule.peerConnectionInit')]). what could have gone wrong?
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
hi ... this means ur webrtc installation is not correct. Make sure ur in bare workflow. Check the installation guide for react native webrtc.
@ozoemenabright7925
@ozoemenabright7925 2 года назад
Just what I was looking for
@ozoemenabright7925
@ozoemenabright7925 2 года назад
what about the guithub repo to this?
@syrian167
@syrian167 3 года назад
source code please
@nguyenvanduy3865
@nguyenvanduy3865 3 года назад
Failed to add ICE candidate : how to fix error , thank you
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Place a catch. If the call is working fine. Then don't worry about it.
@minaljain9620
@minaljain9620 Год назад
code is work for react native cli????
@ShivanshuCodes
@ShivanshuCodes 8 месяцев назад
Yes
@edizcan8885
@edizcan8885 3 года назад
Hi , thanks for tutorial. dose this work on IOS ?
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Yes, it will. Just make the iOS related configurations
@edizcan8885
@edizcan8885 3 года назад
@@TechSavvy_ytube Thank you
@jeffraj9937
@jeffraj9937 3 года назад
Need source code link
@102-surajgouda6
@102-surajgouda6 9 месяцев назад
plaease give the agora sdk video call in firebase
@GurpreetSinghDev
@GurpreetSinghDev 3 года назад
i am getting error : Failed to add ICE candidate
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
If ur getting this only for few ice candidate, try adding catch for addicandidates method
@GurpreetSinghDev
@GurpreetSinghDev 3 года назад
@@TechSavvy_ytubei tried to catch the exception there is no error description just message "Failed to add ICE candidate"
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Is the call working fine. When u get this error ?
@GurpreetSinghDev
@GurpreetSinghDev 3 года назад
@@TechSavvy_ytube no only local stream is playing
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Check the message ur getting from firestore.
@rajeshbethu7757
@rajeshbethu7757 2 года назад
bro is the source code available on github?
@abnersilva2425
@abnersilva2425 2 года назад
This is such a great tutorial. However I am encountering some issues in my implementation but I don't know if I am the only one. Turns out on the caller stream viewed from callee app, it only shows a black screen even though video is being sent. Also, when the answer is created, should the offer be deleted? since that's happening. Any help is well received🙏
@TechSavvy_ytube
@TechSavvy_ytube 2 года назад
Hey ... The black screen might be because ur connected to same network. Yes u can delete the offer. But when the call ends we delete the whole document so it will be deleted with it.
@abnersilva2425
@abnersilva2425 2 года назад
@@TechSavvy_ytube Thank you for replying, really appreciate it. I just tested this by switching one phone's network to my mobile hotspot but I keep getting the black screen. Actually , I saw that the callee is only uploading audio sdpMid. Could that be related somehow?
@abnersilva2425
@abnersilva2425 2 года назад
Now it works! I had to add more stun servers, and also I added a turn server and now it works like a charm. Your video saved my life in this jorney ;)
@rajeshbethu7757
@rajeshbethu7757 2 года назад
@@abnersilva2425 bro same happened with me. can you please share the stun and turn servers(if they are public)? thank you
@raeesfarooq8936
@raeesfarooq8936 Год назад
@@abnersilva2425 can you share your github repo I am having problem in different networks
@audiosongs9924
@audiosongs9924 3 года назад
can you provide me source code ?
@syedjaffri4564
@syedjaffri4564 3 года назад
failed to add ice candidate plz help
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
When are u getting this error. Is it during the call
@talhamuhammad8917
@talhamuhammad8917 3 года назад
@@TechSavvy_ytube when i received the call remote video display black and give error failed to add ice candidate, i am testing on real deivecs
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Is the firestore database getting updated correctly ?
@talhamuhammad8917
@talhamuhammad8917 3 года назад
@@TechSavvy_ytube yes
@amankumar-SportsLover
@amankumar-SportsLover 2 года назад
Nic
@arupde6320
@arupde6320 3 года назад
upload daily ..
@akashyadav-be9df
@akashyadav-be9df 3 года назад
how you overcome with error in util.ts "Type '{ width: number; height: number; frameRate: number; facingMode: "user" | "environment"; deviceId: any; }' is not assignable to type 'boolean | MediaTrackConstraints | undefined'. Object literal may only specify known properties, and 'width' does not exist in type 'MediaTrackConstraints'."
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Hi .. Seems like issue with www.npmjs.com/package/@types/react-native-webrtc you can just leave it. It will work fine.
@akashyadav-be9df
@akashyadav-be9df 3 года назад
@@TechSavvy_ytube I get warning ([Unhandled promise rejection: TypeError: null is not an object (evaluating 'WebRTCModule.peerConnectionInit')] at node_modules eact-native-webrtc\RTCPeerConnection.js:104:9 in constructor at App.tsx:20:17 in setupWebrtc) before setting up firestore in your video. can you please help
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Hi .. Are you using the configuration i have shown in the video.
@akashyadav-be9df
@akashyadav-be9df 3 года назад
@@TechSavvy_ytube yes sir I follow as it is you show
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
This might happen when setup for webrtc is missed. Try doing it again. github.com/react-native-webrtc/react-native-webrtc/blob/master/Documentation/AndroidInstallation.md
@abhinandvk4091
@abhinandvk4091 2 года назад
How to solve the error object [{"deviceId": "0", "facing": "environment", "groupId": "", "kind": "videoinput", "label": "0"}, {"deviceId": "1", "facing": "front", "groupId": "", "kind": "videoinput", "label": "1"}, {"deviceId": "audio-1", "groupId": "", "kind": "audioinput", "label": "Audio"}] ERROR [Error: firebase.firestore().collection().add(*) 'data' must be an object.]
@nikitazotsik3430
@nikitazotsik3430 3 года назад
I am getting unexpected error on this line: const offer = await cRef.get().data()?.offer; TypeError: cRef.get().data is not a function. (In 'cRef.get().data()', 'cRef.get().data' is undefined) could you help me please
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Hi .. this might be because the document with chatId is not created. When u call create, make sure the document is created on firestore.
@nikitazotsik3430
@nikitazotsik3430 3 года назад
@@TechSavvy_ytube Thank you very much for the answer,I also have one question, Can we use this code to connect users by id with sockets?
@TechSavvy_ytube
@TechSavvy_ytube 3 года назад
Yup ... Just replace the firestore with the socket code. It will work fine.
@myisafe
@myisafe 3 года назад
subscribed on Patreon, email me the source code. thanks
Далее
React native ecommerce app with stripe
1:45:46
Просмотров 70 тыс.
РОК-СТРИМ без ФАНЕРЫ🤘
3:05:16
Просмотров 1,3 млн
Бокс - Финты Дмитрия Бивола
00:31
React Native vs Flutter - Which should you use?
22:31
React Native just dropped a MASSIVE update
15:06
Просмотров 36 тыс.
Most overpowered way to build mobile apps?
8:33
Просмотров 830 тыс.
10 React Antipatterns to Avoid - Code This, Not That!
8:55
React native firebase authentication  app from scratch
19:29
РОК-СТРИМ без ФАНЕРЫ🤘
3:05:16
Просмотров 1,3 млн