投稿時間:2023-01-24 21:24:32 RSSフィード2023-01-24 21:00 分まとめ(31件)

カテゴリー等	サイト名等	記事タイトル・トレンドワード等	リンクURL	頻出ワード・要約等/検索ボリューム	登録日
IT	気になる、記になる…	LINEMOの｢ミニプラン｣に新規・MNPで契約を検討中の方はお早めに!! ｰ 実質8ヶ月無料キャンペーンが今月末で終了へ	https://taisy0.com/2023/01/24/167545.html	linemo	2023-01-24 11:42:18
IT	気になる、記になる…	Anker、｢楽天お買い物マラソン｣で80製品以上を最大30％オフで販売するセールを開催中（1月28日まで）	https://taisy0.com/2023/01/24/167542.html	anker	2023-01-24 11:17:49
IT	気になる、記になる…	楽天市場、ポイントが最大44倍になる｢お買い物マラソン｣のキャンペーンを開始（1月28日まで）	https://taisy0.com/2023/01/24/167539.html	楽天市場	2023-01-24 11:12:32
IT	ITmedia 総合記事一覧	[ITmedia News] 雪が降ったらノーマルタイヤは「ぜったいNG」、JAFが注意喚起　時速30kmでも対抗車線に……	https://www.itmedia.co.jp/news/articles/2301/24/news178.html	itmedia	2023-01-24 20:47:00
IT	ITmedia 総合記事一覧	[ITmedia News] 東電管内で停電　埼玉・群馬など3000軒超で　中部電力・関西電力も	https://www.itmedia.co.jp/news/articles/2301/24/news176.html	関西電力	2023-01-24 20:24:00
IT	ITmedia 総合記事一覧	[ITmedia ビジネスオンライン] ABEMA、武藤敬司の引退試合を独占配信　直接足を運べないファンを取り込み	https://www.itmedia.co.jp/business/articles/2301/24/news172.html	abema	2023-01-24 20:07:00
TECH	Techable（テッカブル）	これだけで走りに行ける。ワイヤレスイヤホン内蔵の多機能スマートウォッチ	https://techable.jp/archives/192921	aipowerwearbudswlite	2023-01-24 11:08:14
TECH	Techable（テッカブル）	最大出力1,000W！カセットボンベとガソリン両対応の発電機「２WAY式携帯発電機KG-101C」	https://techable.jp/archives/192913	防災意識	2023-01-24 11:08:14
TECH	Techable（テッカブル）	縦長でも分割でも使える2WAYパソコンデスク。サンワサプライから発売	https://techable.jp/archives/192897	deskhm	2023-01-24 11:08:14
TECH	Techable（テッカブル）	完全⾃動運転EVの量産を⽬指すスタートアップ「チューリング」が企業初のエンドユーザー向け車両を販売	https://techable.jp/archives/192957	turing	2023-01-24 11:08:13
TECH	Techable（テッカブル）	次世代AI配送ロボット「Lucki PRO」、料理認識・顧客との音声対話も可能	https://techable.jp/archives/192953	luckipro	2023-01-24 11:08:13
TECH	Techable（テッカブル）	通常の7倍の速さで冷凍が可能！東芝が新型冷凍冷蔵庫3種を発売	https://techable.jp/archives/192950	速さ	2023-01-24 11:08:13
TECH	Techable（テッカブル）	一家に1台。本格的DIYが楽しめるコンパクトな充電式電動ドライバー	https://techable.jp/archives/192940	gloture	2023-01-24 11:08:13
TECH	Techable（テッカブル）	日本交通グループが都内のタクシー車両にAnkerの充電ケーブルを設置	https://techable.jp/archives/192965	anker	2023-01-24 11:08:12
Ruby	Rubyタグが付けられた新着投稿 - Qiita	【Rails】ログイン認証用gemのdevise_token_auth動作確認時にNoMethodError: undefined method `downcase' for nil:NilClassエラー	https://qiita.com/ginger-yell/items/d69469f51c28bb05b03a	railsapi	2023-01-24 20:46:40
golang	Goタグが付けられた新着投稿 - Qiita	Go言語でLVMを操作して、論理ボリュームやスナップショットを作成	https://qiita.com/MahoTakara/items/441bfa6e5bf834b8fe95	logicalvolum	2023-01-24 20:10:13
Ruby	Railsタグが付けられた新着投稿 - Qiita	【Rails】ログイン認証用gemのdevise_token_auth動作確認時にNoMethodError: undefined method `downcase' for nil:NilClassエラー	https://qiita.com/ginger-yell/items/d69469f51c28bb05b03a	railsapi	2023-01-24 20:46:40
海外TECH	MakeUseOf	Is Apple Working on a 15-Inch MacBook Air? Here's What We Know	https://www.makeuseof.com/15-inch-macbook-air-rumors/	macbook	2023-01-24 11:15:15
海外TECH	MakeUseOf	Android 14 Could Block You From Sideloading Certain Apps	https://www.makeuseof.com/android-14-limit-sideloading/	android	2023-01-24 11:06:07
海外TECH	DEV Community	How to Build a React Native Video Calling App with Callkeep using Video SDK	https://dev.to/video-sdk/react-native-video-calling-app-with-callkeep-1o73	How to Build a React Native Video Calling App with Callkeep using Video SDKIn a world where we are all connected through phones over audio and video calls if you are planning to make one such app you have landed at the right place We will be building a complete video calling app in React Native which will allow you to make and receive video calls seamlessly We ll use VideoSDK for video conferencing and React Native CallKeep to manage the call UI This is a two part series in which we will first implement CallKeep in Android and then configure and tweak it for iOS Now that all the requirements are well explained let us dive right into the fun part but if you are too eager to see the results here is the link to test the app and the complete code for the app What is CallKeep CallKeep is a React Native library that allows you to handle the incoming call UI on the Android and iOS device in any given state of the app i e foreground running background quit locked device etc Before building the app you should be aware of how the app will function internally which in turn will help with the easy development process How will the app function To better understand how the app functions let s take a scenario where John wants to call his friend Max John will start by opening our app where he will enter Max s caller ID and hit call Max will see an incoming call UI on his phone where he can accept or reject the call Once he accepts the call we will setup the React Native video call between them using VideoSDK You might think these are super simple Well let s elaborate a little more on the nuance of the implementation When John enters Max s Caller ID and hits the Call button the first thing we do is map it to our Firebase database and send a notification on his device When Max s device receives these notifications our app s logic will show him the incoming call UI using the React Native CallKeep library When Max accepts or rejects the incoming call we will send the status back to John using notifications and eventually start up the video call between them Here is a pictorial representation of the flow for a better understanding Here is a pictorial representation of the flow for a better understanding Now that we have established the flow of the app and how it functions let s get started with the development without any more chit chat Requirements and Libraries for the AppFirst let s have a look at the set of libraries we will be using to establish the functionalities of the app React Native CallKeep These libraries will help with invoking the incoming call on the device React Native VoIP Push Notification These libraries are used to send push notifications on iOS devices as the Firebase notifications do not function well on iOS devices when the app is in a killed state VideoSDK RN Android Overlay Permission These libraries will handle overlay permission for newer Android versions making sure the incoming call is always visible React Native Firebase Messaging These libraries are used for the sending and receiving of the Firebase notification which will invoke our incoming call UI React Native Firebase Firestore These libraries are used for storing the caller ID and device token which will be used for establishing the video calls If we look at the development requirements here is what you will be needing Node js v NPM v Included with newer Node versions Android Studio and Xcode are installed A Video SDK Token Dashboard gt Api Key Video Tutorial A minimum of two physical devices is required to test the calling feature Client Side Setup for React Native Android AppLets start by creating a new react native app using the command npx react native init VideoSdkCallKeepExampleNow that our basic app is created lets start by installing all the dependencies First we will install the react navigation native and its other dependencies to provide navigation within the app npm install react navigation nativenpm install react navigation stacknpm install react native screens react native safe area context react native gesture handler Second on our list of dependencies is the VideoSDK library which will provide video conferencing to the app npm install videosdk live react native sdk npm install videosdk live react native incallmanager Next will be installing dependencies related to Firebase npm install react native firebase appnpm install react native firebase messagingnpm install react native firebase firestorenpm install firebase And finally the React Native CallKeep library and the other libraries required for the push notification and permissions npm install git https github com react native webrtc react native callkeep bfaafdbcbafecnpm install react native voip push notificationnpm install videosdk rn android overlay permissionnpm install react native uuidNote We have put the reference of the React Native CallKeep library using the github repository link as the NPM version has build issues with the android We are all setup with our dependencies Let us now start with the Android setup for all the libraries that we have installed React Native Android Setup VideoSDK Setup Lets start by adding the required permissions and meta data in the AndroidManifest xml file Below mentioned are all the permission you need to add in the android app src mainAndroidManifest xml lt uses permission android name android permission ACCESS NETWORK STATE gt lt Needed to communicate with already paired Bluetooth devices Legacy up to Android gt lt uses permission android name android permission BLUETOOTH android maxSdkVersion gt lt uses permission android name android permission BLUETOOTH ADMIN android maxSdkVersion gt lt Needed to communicate with already paired Bluetooth devices Android upwards gt lt uses permission android name android permission BLUETOOTH CONNECT gt lt Needed to access Camera and Audio gt lt uses permission android name android permission CAMERA gt lt uses permission android name android permission MODIFY AUDIO SETTINGS gt lt uses permission android name android permission RECORD AUDIO gt lt uses permission android name android permission SYSTEM ALERT WINDOW gt lt uses permission android name android permission ACTION MANAGE OVERLAY PERMISSION gt lt uses permission android name android permission FOREGROUND SERVICE gt lt uses permission android name android permission WAKE LOCK gt lt application gt lt meta data android name live videosdk rnfgservice notification channel name android value Meeting Notification gt lt meta data android name live videosdk rnfgservice notification channel description android value Whenever meeting started notification will appear gt lt meta data android name live videosdk rnfgservice notification color android resource color red gt lt service android name live videosdk rnfgservice ForegroundService android foregroundServiceType mediaProjection gt lt service gt lt service android name live videosdk rnfgservice ForegroundServiceTask gt lt service gt lt application gt Add following lines in the app level build gradle file at android app build gradle inside the dependencies implementation project rnfgservice implementation project rnwebrtc implementation project rnincallmanager Add following lines in the android settings gradle file include rnwebrtc project rnwebrtc projectDir new File rootProject projectDir node modules videosdk live react native webrtc android include rnincallmanager project rnincallmanager projectDir new File rootProject projectDir node modules videosdk live react native incallmanager android include rnfgservice project rnfgservice projectDir new File rootProject projectDir node modules videosdk live react native foreground service android Update the MainApplication java with the following packages Add these importsimport live videosdk rnfgservice ForegroundServicePackage import live videosdk rnincallmanager InCallManagerPackage import live videosdk rnwebrtc WebRTCModulePackage public class MainApplication extends Application implements ReactApplication private static List lt ReactPackage gt getPackages SuppressWarnings UnnecessaryLocalVariable List lt ReactPackage gt packages new PackageList this getPackages Packages that cannot be autolinked yet can be added manually here for example packages add new MyReactNativePackage Add these packages packages add new ForegroundServicePackage packages add new InCallManagerPackage packages add new WebRTCModulePackage return packages Lastly register the VideoSDK service to the app in the index js file Import the libraryimport register from videosdk live react native sdk Register the VideoSDK serviceregister CallKeep Setup for React Native Android App Lets start by adding the required permissions and meta data in the AndroidManifest xml file Below mentioned are all the permission you need to add in the android app src mainAndroidManifest xml lt Needed to for the call trigger purpose gt lt uses permission android name android permission BIND TELECOM CONNECTION SERVICE gt lt uses permission android name android permission READ PHONE STATE gt lt uses permission android name android permission CALL PHONE gt lt application gt lt activity android name MainActivity android label string app name android configChanges keyboard keyboardHidden orientation screenSize uiMode android launchMode singleTask android windowSoftInputMode adjustResize android exported true gt lt intent filter gt lt action android name android intent action MAIN gt lt category android name android intent category LAUNCHER gt lt intent filter gt Add these intent filter to allow deep linking lt intent filter gt lt action android name android intent action VIEW gt lt category android name android intent category DEFAULT gt lt category android name android intent category BROWSABLE gt lt data android scheme videocalling gt lt intent filter gt lt activity gt lt service android name io wazo callkeep VoiceConnectionService android label Wazo android permission android permission BIND TELECOM CONNECTION SERVICE android foregroundServiceType camera microphone android exported true gt lt intent filter gt lt action android name android telecom ConnectionService gt lt intent filter gt lt service gt lt service android name io wazo callkeep RNCallKeepBackgroundMessagingService gt lt application gt Firebase Setup for React Native Android App To start go and create a new Firebase project from here Once the project is created add your react native android app to the firebase project by clicking on the android icon Add your apps applicationId in the presented fields and click Register App Download the google services json file and move it to android app Follow the steps shown to added the Firebase SDK to android app Create a new web app in your firebase project which will be used to access the firestore database Add the configuration file shown in the database firebaseDb js file in your project Go to Firebase Firestore in the Left panel and create a database which we will use to store caller IDs With these we are all set with the firebase on Android Server Side SetupNow that we have completed the setup for our app Let us setup the server side APIs as well For creating these APIs we will user Firebase Functions So lets get straight into it Go to Firebase Functions in the Left panel To use Firebase Functions you will need to upgrade to a pay as you go plan Although there is no need to worry about charges if you are just building as a hobby project as there is a generous free quota available Lets get started with Firebase functions by installing the firebase CLI using below command npm install g firebase tools Run firebase login to log in via the browser and authenticate the Firebase CLI Go to your Firebase project directory Run firebase init functions to initialize the firebase functions project where we will write our APIs Follow the setup instructions shown in the CLI and once the process completes you should see the functions folder created in your directory Download the service account key from the project settings and place it inside the functions serviceAccountKey json With these we have completed the setup which we require to run our app App Side CodeLets hop on to start the code on react native side We will be creating two screens first would be where user can see his Caller ID and enter the other persons caller ID to initiate a new call We will be following the below shown folder structure └ー Root ├ー android ├ー ios ├ー src │ ├ー api │ │ └ー api js │ ├ー assets │ │ └ー Get it from our repository │ ├ー components │ │ ├ー Get it from our repository │ ├ー navigators │ │ └ー screenNames js │ ├ー scenes │ │ ├ー home │ │ │ └ー index js │ │ └ー meeting │ │ ├ー OneToOne │ │ ├ー index js │ │ └ー MeetingContainer js │ ├ー styles │ │ ├ー Get it from our repository │ └ー utils │ └ー incoming video call js ├ー App js ├ー index js └ー package jsonLets get started with the basic UI of the Call Initiating Screen To give you a head start we have already create the basic components we will need like buttons textfields avatars and icons You can direclty get access to all the icons and components from our github repository With our basic components setup lets add Navigation screens to the app We will have a Home screen which will have the caller ID input and a call button and a meeting screen which will have the video call So update the src navigators screenNames js with following screen names export const SCREEN NAMES Home homescreen Meeting meetingscreen Update the App js file with the Navigation stack import React useEffect from react import react native gesture handler import NavigationContainer from react navigation native import createStackNavigator from react navigation stack import SCREEN NAMES from src navigators screenNames import Meeting from src scenes meeting import LogBox Text Alert from react native import Home from src scenes home import RNCallKeep from react native callkeep LogBox ignoreLogs Warning LogBox ignoreAllLogs const Navigator Screen createStackNavigator const linking prefixes videocalling config screens meetingscreen path meetingscreen token meetingId export default function App return lt NavigationContainer linking linking fallback lt Text gt Loading lt Text gt gt lt Navigator screenOptions animationEnabled false presentation modal initialRouteName SCREEN NAMES Home gt lt Screen name SCREEN NAMES Meeting component Meeting options headerShown false gt lt Screen name SCREEN NAMES Home component Home options headerShown false gt lt Navigator gt lt NavigationContainer gt With our Navigation stack ready let us setup the home screen UI For which you have to update the src scenes home index jsimport React useEffect useState useRef from react import Platform KeyboardAvoidingView TouchableWithoutFeedback Keyboard View Text Clipboard Alert Linking from react native import TouchableOpacity from react native gesture handler import CallEnd Copy from assets icons import TextInputContainer from components TextInputContainer import colors from styles colors import firestore from react native firebase firestore import messaging from react native firebase messaging import Toast from react native simple toast import updateCallStatus initiateCall getToken createMeeting from api api import SCREEN NAMES from navigators screenNames import Incomingvideocall from utils incoming video call export default function Home navigation These is the number user will enter to make a call const number setNumber useState These will store the detials of the users callerId and fcm token const firebaseUserConfig setfirebaseUserConfig useState null Used to render the UI conditionally whether the person on making a call or not const isCalling setisCalling useState false return lt KeyboardAvoidingView behavior Platform OS ios padding height style flex backgroundColor colors primary justifyContent center paddingHorizontal gt isCalling lt TouchableWithoutFeedback onPress Keyboard dismiss gt lt gt lt View style padding backgroundColor AC justifyContent center alignItems center borderRadius gt lt Text style fontSize color DDDD gt Your Caller ID lt Text gt lt View style flexDirection row marginTop alignItems center gt lt Text style fontSize color ffff letterSpacing gt firebaseUserConfig firebaseUserConfig callerId Loading lt Text gt lt TouchableOpacity style height aspectRatio backgroundColor B marginLeft justifyContent center alignItems center borderRadius onPress gt Clipboard setString firebaseUserConfig amp amp firebaseUserConfig callerId if Platform OS android Toast show Copied Alert alert Information This callerId will be unavailable once you uninstall the App gt lt Copy fill colors primary width height gt lt TouchableOpacity gt lt View gt lt View gt lt View style backgroundColor AC padding marginTop justifyContent center borderRadius gt lt Text style fontSize color DDDD gt Enter call id of another user lt Text gt lt TextInputContainer placeholder Enter Caller ID value number setValue setNumber keyboardType number pad gt lt TouchableOpacity onPress async gt if number getCallee is used to get the detials of the user you are trying to intiate a call with const data await getCallee number if data if data length Toast show CallerId Does not Match else Toast show CallerId Match const token platform APN data data initiateCall is used to send a notification to the receiving user and start the call initiateCall callerInfo name Person A firebaseUserConfig calleeInfo token platform APN videoSDKInfo token videosdkTokenRef current meetingId videosdkMeetingRef current setisCalling true else Toast show Please provide CallerId style height backgroundColor FE justifyContent center alignItems center borderRadius marginTop gt lt Text style fontSize color FFFFFF gt Call Now lt Text gt lt TouchableOpacity gt lt View gt lt gt lt TouchableWithoutFeedback gt lt View style flex justifyContent space around gt lt View style padding justifyContent center alignItems center borderRadius gt lt Text style fontSize color DDDD gt Calling to lt Text gt lt Text style fontSize marginTop color ffff letterSpacing gt number lt Text gt lt View gt lt View style justifyContent center alignItems center gt lt TouchableOpacity onPress async gt getCallee is used to get the detials of the user you are trying to intiate a call with const data await getCallee number if data updateCallStatus callerInfo data data type DISCONNECT setisCalling false style backgroundColor FFDD borderRadius height aspectRatio justifyContent center alignItems center gt lt CallEnd width height gt lt TouchableOpacity gt lt View gt lt View gt lt KeyboardAvoidingView gt Dont worry if you see error poping up as we will be adding the methods soon You will come across following methods in the above code getCallee getCallee is used to get the detials of the user you are trying to intiate a call with initiateCall initiateCall is used to send a notification to the receiving user and start the call updateCallStatus updateCallStatus is used to updated the status of the incoming call like accepted rejected etc With the UI for calling in place lets start with the actual calling development These is how the UI will look Firebase Messaging to Initiate CallsThe first step into establishing the call is to identify each user and getting the messaging token for the user which will allow us to send them notifications So in the Home Page of our app we will get the Firebase Messaging Token Using these token we will query the firestore database if the user is present in the database or not If the user is present we will update firebaseUserConfig state in the app else we will register the user in the database and update then state useEffect gt async function getFCMtoken const authStatus await messaging requestPermission const enabled authStatus messaging AuthorizationStatus AUTHORIZED authStatus messaging AuthorizationStatus PROVISIONAL if enabled const token await messaging getToken const querySnapshot await firestore collection users where token token get const uids querySnapshot docs map doc gt if doc amp amp doc data callerId const token platform callerId doc data setfirebaseUserConfig callerId token platform return doc if uids amp amp uids length addUser token else console log Token Found getFCMtoken const addUser token gt const platform Platform OS android ANDROID iOS const obj callerId Math floor Math random toString token platform firestore collection users add obj then gt setfirebaseUserConfig obj console log User added We will setup the VideoSDK token and Meeting ID when the Home Screen loads so that we have it ready when the user wants to start the call const videosdkToken setVideosdkToken useState null const videosdkMeeting setVideosdkMeeting useState null const videosdkTokenRef useRef const videosdkMeetingRef useRef videosdkTokenRef current videosdkToken videosdkMeetingRef current videosdkMeeting useEffect gt async function getTokenAndMeetingId const videoSDKtoken getToken const videoSDKMeetingId await createMeeting token videoSDKtoken setVideosdkToken videoSDKtoken setVideosdkMeeting videoSDKMeetingId getTokenAndMeetingId We have to create the getToken and createMeeting used in the above step in the src api api js file const API BASE URL const VIDEOSDK TOKEN UPDATE YOUR VIDEOSDK TOKEN HERE WHICH YOU GENERATED FROM DASHBOARD export const getToken gt return VIDEOSDK TOKEN export const createMeeting async token gt const url API BASE URL rooms const options method POST headers Authorization token Content Type application json const roomId await fetch url options then response gt response json catch error gt console error error error return roomId Next step is to initiate the call And to achieve that we will have to create two APIs as firebase functions which will trigger notifications on the other device and update the status of the call whether it was rejected or accpeted Create these APIs in the functions index jsconst functions require firebase functions const express require express const cors require cors const morgan require morgan var fcm require fcm notification var FCM new fcm serviceAccountKey json const app express const v uuidv require uuid app use cors app use express json app use express urlencoded extended true app use morgan dev app get req res gt res send Hello World app post initiate call req res gt const calleeInfo callerInfo videoSDKInfo req body if calleeInfo platform ANDROID var FCMtoken calleeInfo token const info JSON stringify callerInfo videoSDKInfo type CALL INITIATED var message data info android priority high token FCMtoken FCM send message function err response if err res status send response else res status send response else res status send Not supported platform app post update call req res gt const callerInfo type req body const info JSON stringify callerInfo type var message data info apns headers apns priority payload aps badge token callerInfo token FCM send message function err response if err res status send response else res status send response app listen gt console log API server listening at http localhost exports app functions https onRequest app initiate call initiate call is used to send a notification to the receiving user and start the call by sending the details like caller information and VideoSDK room detials update call update call is used to updated the status of the incoming call like accepted rejected etc and send the notification to the caller Now that the APIs are created we will trigger them from the app Update the src api api js with following API calls Here the FCM SERVER URL needs to be updated with the URL of your firebase functions You will get these when you deploy the functions or when you run the functions in a local environement using npm run serveconst FCM SERVER URL YOUR FCM URL export const initiateCall async callerInfo calleeInfo videoSDKInfo gt await fetch FCM SERVER URL initiate call method POST headers Content Type application json body JSON stringify callerInfo calleeInfo videoSDKInfo then response gt console log RESP response catch error gt console error error error export const updateCallStatus async callerInfo type gt await fetch FCM SERVER URL update call method POST headers Content Type application json body JSON stringify callerInfo type then response gt console log RESP response catch error gt console error error error With these notification send is setup Now we will have to invoke the call when you receive the notification these where the React Native Call Keep comes into picture Call Keep Integration Before initiating the call we will have to ask for a few permissions and also setup the React Native Call Keep In order to do so update the App js with following code useEffect gt const options ios appName VideoSDK android alertTitle Permissions required alertDescription This application needs to access your phone accounts cancelButton Cancel okButton ok imageName phone account icon RNCallKeep setup options RNCallKeep setAvailable true if Platform OS android OverlayPermissionModule requestOverlayPermission These will ask for the Overlay permissions for the android devices and also setup the CallKeep library Here is the reference to how to grant these permissions You might remember that we had setup the app to send the message notification but did not add any listener for those notification So lets add those listener and show the Call UI when the notification is received Update the utils incoming video call js which will handle all the functionalities related to the incoming call import Platform from react native import RNCallKeep from react native callkeep import uuid from react native uuid class IncomingCall constructor this currentCallId null configure incomingcallAnswer endIncomingCall gt try this setupCallKeep Platform OS android amp amp RNCallKeep setAvailable true RNCallKeep addEventListener answerCall incomingcallAnswer RNCallKeep addEventListener endCall endIncomingCall catch error console error initializeCallKeep error error message These emthod will setup the call keep setupCallKeep gt try RNCallKeep setup ios appName VideoSDK supportsVideo false maximumCallGroups maximumCallsPerCallGroup android alertTitle Permissions required alertDescription This application needs to access your phone accounts cancelButton Cancel okButton Ok catch error console error initializeCallKeep error error message Use startCall to ask the system to start a call Initiate an outgoing call from this point startCall handle localizedCallerName gt Your normal start call action RNCallKeep startCall this getCurrentCallId handle localizedCallerName reportEndCallWithUUID callUUID reason gt RNCallKeep reportEndCallWithUUID callUUID reason These method will end the incoming call endIncomingcallAnswer gt RNCallKeep endCall this currentCallId this currentCallId null this removeEvents These method will remove all the event listeners removeEvents gt RNCallKeep removeEventListener answerCall RNCallKeep removeEventListener endCall These method will display the incoming call displayIncomingCall callerName gt Platform OS android amp amp RNCallKeep setAvailable false RNCallKeep displayIncomingCall this getCurrentCallId callerName callerName number true null Bring the app to foreground backToForeground gt RNCallKeep backToForeground Return the ID of current Call getCurrentCallId gt if this currentCallId this currentCallId uuid v return this currentCallId These Method will end the call endAllCall gt RNCallKeep endAllCalls this currentCallId null this removeEvents export default Incomingvideocall new IncomingCall Note Check the Code Comments to learn about the function of each method We have to add the notification listener on the firebase with which we will invoke the CallKeep to handle the Call UI which we can to by adding following code in the src home index js useEffect gt const unsubscribe messaging onMessage remoteMessage gt const callerInfo videoSDKInfo type JSON parse remoteMessage data info switch type case CALL INITIATED const incomingCallAnswer callUUID gt updateCallStatus callerInfo type ACCEPTED Incomingvideocall endIncomingcallAnswer callUUID setisCalling false Linking openURL videocalling meetingscreen videoSDKInfo token videoSDKInfo meetingId catch err gt Toast show Error err const endIncomingCall gt Incomingvideocall endIncomingcallAnswer updateCallStatus callerInfo type REJECTED Incomingvideocall configure incomingCallAnswer endIncomingCall Incomingvideocall displayIncomingCall callerInfo name break case ACCEPTED setisCalling false navigation navigate SCREEN NAMES Meeting name Person B token videosdkTokenRef current meetingId videosdkMeetingRef current break case REJECTED Toast show Call Rejected setisCalling false break case DISCONNECT Platform OS ios Incomingvideocall endAllCall Incomingvideocall endIncomingcallAnswer break default Toast show Call Could not placed return gt unsubscribe Used to get the detials of the user you are trying to intiate a call with const getCallee async num gt const querySnapshot await firestore collection users where callerId num toString get return querySnapshot docs map doc gt return doc After adding above code you might observe that when the app is in foreground the call UI works as expected but not when the app is in background So to handle the case in backroung mode we will have to add a background listener for the notifications In order to add the listener add below mentioned code in the index js file of your project const firebaseListener async remoteMessage gt const callerInfo videoSDKInfo type JSON parse remoteMessage data info if type CALL INITIATED const incomingCallAnswer callUUID gt Incomingvideocall backToForeground updateCallStatus callerInfo type ACCEPTED Incomingvideocall endIncomingcallAnswer callUUID Linking openURL videocalling meetingscreen videoSDKInfo token videoSDKInfo meetingId catch err gt Toast show Error err const endIncomingCall gt Incomingvideocall endIncomingcallAnswer updateCallStatus callerInfo type REJECTED Incomingvideocall configure incomingCallAnswer endIncomingCall Incomingvideocall displayIncomingCall callerInfo name Incomingvideocall backToForeground Register background handlermessaging setBackgroundMessageHandler firebaseListener Here how the incoming and outgoing call will look like Wow You just implemented the calling feature which works like a charm But without Video Call its still feels incomplete Well for that we have VideoSDK which we will implement in the upcoming steps VideoSDK Integration We will be showing the Video Call in the Meeting Screen which we created earlier These screen will have creating the room section before the meeting is joined and after that it will have remote participant in the large view and the local participant in the mini view We will have three buttons to toggle mic toggle webcam and to leave the call └ー scenes ├ー home └ー meeting ├ー OneToOne │ ├ー LargeView │ │ └ー index js │ ├ー MiniView │ │ └ー index js │ └ー index js ├ー index js └ー MeetingContainer js First step in integrating the VideoSDK is adding the MeetingProvider in the src scene meeting index js which will initate the meeting and join it import React from react import Platform SafeAreaView from react native import colors from styles colors import MeetingConsumer MeetingProvider from videosdk live react native sdk import MeetingContainer from MeetingContainer import SCREEN NAMES from navigators screenNames import IncomingVideoCall from utils incoming video call export default function navigation route const token route params token const meetingId route params meetingId const micEnabled route params micEnabled route params micEnabled true const webcamEnabled route params webcamEnabled route params webcamEnabled true const name route params name return lt SafeAreaView style flex backgroundColor colors primary padding gt lt MeetingProvider config meetingId meetingId micEnabled micEnabled webcamEnabled webcamEnabled name name notification title Video SDK Meeting message Meeting is running token token gt lt MeetingConsumer onMeetingLeft gt Platform OS ios amp amp IncomingVideoCall endAllCall navigation navigate SCREEN NAMES Home gt gt return lt MeetingContainer webcamEnabled webcamEnabled gt lt MeetingConsumer gt lt MeetingProvider gt lt SafeAreaView gt We used the MeetingContainer Component which will hold the different layouts for our meeting like showing Waiting to Join before the meeting is joined and also the complete meeting view once the meeting is joinedimport useMeeting ReactNativeForegroundService from videosdk live react native sdk import useEffect useState from react import OneToOneMeetingViewer from OneToOne import WaitingToJoinView from Components WaitingToJoinView import React from react import convertRFValue from styles spacing import Text View from react native import colors from styles colors export default function MeetingContainer webcamEnabled const isJoined setJoined useState false const join changeWebcam participants leave useMeeting onMeetingJoined gt setTimeout gt setJoined true useEffect gt setTimeout gt if isJoined join if webcamEnabled changeWebcam return gt leave ReactNativeForegroundService stopAll return isJoined lt OneToOneMeetingViewer gt lt View style flexDirection column justifyContent center alignItems center height width gt lt Text style fontSize convertRFValue color colors primary marginTop gt Creating a room lt Text gt lt View gt Next we will add our MeetingView which will show the buttons and Participants View in the src scenes meeting OneToOne index jsimport React from react import View Text Clipboard TouchableOpacity ActivityIndicator from react native import useMeeting from videosdk live react native sdk import CallEnd CameraSwitch Copy MicOff MicOn VideoOff VideoOn from assets icons import colors from styles colors import IconContainer from components IconContainer import LocalViewContainer from LocalViewContainer import LargeView from LargeView import MiniView from MiniView import Toast from react native simple toast export default function OneToOneMeetingViewer const participants localWebcamOn localMicOn leave changeWebcam toggleWebcam toggleMic meetingId useMeeting onError data gt const code message data Toast show Error code message const participantIds participants keys const participantCount participantIds participantIds length null return lt gt lt View style flexDirection row alignItems center width gt lt View style flex justifyContent space between gt lt View style flexDirection row gt lt Text style fontSize color colors primary gt meetingId meetingId xxx xxx xxx lt Text gt lt TouchableOpacity style justifyContent center marginLeft onPress gt Clipboard setString meetingId Toast show Meeting Id copied Successfully gt lt Copy fill colors primary width height gt lt TouchableOpacity gt lt View gt lt View gt lt View gt lt TouchableOpacity onPress gt changeWebcam gt lt CameraSwitch height width fill colors primary gt lt TouchableOpacity gt lt View gt lt View gt Center lt View style flex marginTop marginBottom gt participantCount gt lt gt lt LargeView participantId participantIds gt lt MiniView participantId participantIds gt lt gt participantCount lt LargeView participantId participantIds gt lt View style flex justifyContent center alignItems center gt lt ActivityIndicator size large gt lt View gt lt View gt Bottom lt View style flexDirection row justifyContent space evenly gt lt IconContainer backgroundColor red onPress gt leave Icon gt return lt CallEnd height width fill FFF gt gt lt IconContainer style borderWidth borderColor B backgroundColor localMicOn colors primary transparent onPress gt toggleMic Icon gt return localMicOn lt MicOn height width fill FFF gt lt MicOff height width fill D gt gt lt IconContainer style borderWidth borderColor B backgroundColor localWebcamOn colors primary transparent onPress gt toggleWebcam Icon gt return localWebcamOn lt VideoOn height width fill FFF gt lt VideoOff height width fill D gt gt lt View gt lt gt Here we are showing the participants in two different views first if there is one participant we will show the local participant in the full screen and second when there are two participants we will show the local participant in the MiniView To achieve these you need to following two components a src scenes meeting OneToOne LargeView index jsimport useParticipant RTCView MediaStream from videosdk live react native sdk import React useEffect from react import View from react native import colors from styles colors import Avatar from components Avatar export default LargeViewContainer participantId gt const webcamOn webcamStream displayName setQuality isLocal useParticipant participantId useEffect gt setQuality high return lt View style flex backgroundColor colors primary borderRadius overflow hidden gt webcamOn amp amp webcamStream lt RTCView objectFit cover mirror isLocal true false style flex backgroundColor streamURL new MediaStream webcamStream track toURL gt lt Avatar containerBackgroundColor colors primary fullName displayName fontSize style backgroundColor colors primary height aspectRatio borderRadius gt lt View gt a src scenes meeting OneToOne MiniView index jsimport useParticipant RTCView MediaStream from videosdk live react native sdk import React useEffect from react import View from react native import Avatar from components Avatar import colors from styles colors export default MiniViewContainer participantId gt const webcamOn webcamStream displayName setQuality isLocal useParticipant participantId useEffect gt setQuality high return lt View style position absolute bottom right height aspectRatio borderRadius borderColor ff overflow hidden gt webcamOn amp amp webcamStream lt RTCView objectFit cover zOrder mirror isLocal true false style flex backgroundColor streamURL new MediaStream webcamStream track toURL gt lt Avatar fullName displayName containerBackgroundColor colors primary fontSize style backgroundColor colors primary height aspectRatio borderRadius gt lt View gt These how the video call will look like with two participant in it Hurray With these our video calling feature is complete Here is a video how it looks Head over to the second part of the series to see how you can configure the iOS to receive the calls and initiate the video call ConclusionWith this we successfully built the React Native video calling app with Callkeep using the video SDK and Firebase You can always refer to our documentation if you want to add features like chat messaging and screen sharing If you have any problems with the implementation please contact us via our Discord community	2023-01-24 11:18:50
Apple	AppleInsider - Frontpage News	NYPD finds AirTag tracking its patrol car	https://appleinsider.com/articles/23/01/24/nypd-finds-airtag-tracking-its-patrol-car?utm_medium=rss	NYPD finds AirTag tracking its patrol carOfficers from the New York Police Department discovered one of Apple s AirTags hidden under their car s hood but don t appear to have traced the owner The marked NYPD police car was reportedly patrolling the Queens borough of New York City when the device was found According to the New York Daily News no details are available about how the device was spotted It s likely that officers were alerted to its presence via Apple s anti stalking features which would have sent a notification to their iPhones However they learned of its presence a search of the hood uncovered the AirTag sealed in a small plastic bag Read more	2023-01-24 11:49:33
海外TECH	Engadget	WhatsApp's native Mac app beta is now available to all	https://www.engadget.com/whatsapps-native-mac-app-beta-is-now-available-to-all-113517461.html?src=rss	WhatsApp x s native Mac app beta is now available to allMac users who have been waiting for a native version of WhatsApp can now download it without restrictions WaBetaInfo has reported The new app is optimized for Mac hardware and built with Mac Catalyst so it should be faster and more efficient than the current web wrapped Electron version You also get a new interface with three panels to easily flip between chats calls archived and starred messages while seeing contacts and interactions at a glance nbsp nbsp Apple s Catalyst was designed to allow developers to port iOS apps over to macOS or create just one version that can run on either platform Since the Mac was developed on Catalyst that lends some hope that a long awaited version may also come to iOS In Meta said that it was expanding multi device support for WhatsApp leading to speculation that an iPad app was forthcoming Last year WhatsApp released a native version for Windows that works without the need for a smartphone It looks much the same as the Mac app and also offers increased reliability and speed The native macOS app has been around for several months on TestFlight but that only offers limited slots for testers Now that it s in a full beta though you can download it directly from WhatsApp s website nbsp	2023-01-24 11:35:17
医療系	医療介護 CBnews	少子化対策「財源確保の議論不可欠」民間議員-諮問会議、児童手当拡充などで	https://www.cbnews.jp/news/entry/20230124202335	児童手当	2023-01-24 20:35:00
医療系	医療介護 CBnews	看護職員のコロナ関連欠勤、2週連続で1万人超-厚労省が重点医療機関の集計更新、東京が最多	https://www.cbnews.jp/news/entry/20230124200806	医療機関	2023-01-24 20:20:00
ニュース	BBC News - Home	Half Moon Bay: Seven dead in another California mass shooting	https://www.bbc.co.uk/news/world-us-canada-64382598?at_medium=RSS&at_campaign=KARANGA	dancing	2023-01-24 11:10:52
ニュース	BBC News - Home	Richard Sharp: BBC chairman says he will not quit over Boris Johnson loan row	https://www.bbc.co.uk/news/uk-64383742?at_medium=RSS&at_campaign=KARANGA	sharp	2023-01-24 11:36:50
ニュース	BBC News - Home	Top Ukrainian officials quit in anti-corruption drive	https://www.bbc.co.uk/news/world-europe-64383388?at_medium=RSS&at_campaign=KARANGA	reports	2023-01-24 11:50:41
ニュース	BBC News - Home	Elon Musk says Tesla tweet was genuine in fraud case	https://www.bbc.co.uk/news/business-64384278?at_medium=RSS&at_campaign=KARANGA	billionaire	2023-01-24 11:11:31
ニュース	BBC News - Home	Doja Cat turns heads in red body paint and 30,000 crystals at Schiaparelli's Paris show	https://www.bbc.co.uk/news/entertainment-arts-64384479?at_medium=RSS&at_campaign=KARANGA	catwalk	2023-01-24 11:49:54
ニュース	BBC News - Home	The Hundred: Trent Rockets and Southern Brave to open competition on 1 August	https://www.bbc.co.uk/sport/cricket/64372314?at_medium=RSS&at_campaign=KARANGA	bridge	2023-01-24 11:47:46
ニュース	Newsweek	ロシアのハッカー集団「コールドリバー」、アメリカの３つの原子力研究施設を標的に	https://www.newsweekjapan.jp/stories/world/2023/01/post-100682.php	コールド・リバーはネット上に偽のログインページを作成し、原子力研究に携わる科学者たちにメールを送信することで同ページへ誘導しようとした。	2023-01-24 20:25:51