反应-本土-每日-js
Daily JavaScript Resact Introduct图书馆.
最低OS/SDK版本
此软件包对您的项目所能支持的OS/SDK版本提出了一些限制 :
- iOS系统- 部署目标
- 机器人数字 :
minSdkVersion第24条
安装
安装 react-native-daily-js 及其同伴依赖关系:
npm i @daily-co/react-native-daily-js @react-native-async-storage/async-storage@^1.15.7 react-native-background-timer@^2.3.1 react-native-get-random-values@^1.9.0
npm i --save-exact @daily-co/[email protected]
然后,遵循以下步骤,在每个平台上设置你的本土项目. 请注意,这些步骤假设你使用的是支持自動連接(QQ 60)的React Industrial版本.
如果您的项目使用 博览,使用
config-plugin-rn-daily-js配置软件包 而不是以下步骤.
iOS系统
更新 platform 在你身边 Podfile,从 @daily-co/react-native-webrtc 仅在iOS 12及以上工作:
platform :ios, '12.0'
如果你愿意的话 发送屏幕共享 从iOS,它只工作 iOS 14 及以上各点。 因此,在这种情况下,请切换使用iOS 14.0而不是iOS 12.0.
然后运行 :
npx pod-install
接下来,你需要更新您的项目 Info.plist 添加三行新键如下:
NSCameraUsageDescriptionNSMicrophoneUsageDescriptionUIBackgroundModes
对于前两个密钥的值,提供用户化的字符串,解释你的应用程序为什么要求相机和麦克风访问. 请注意, 没有这些应用程序, 应用程序只会静静地崩溃 .
UIBackgroundModes 处理方式略有不同,并将决定一个阵列。 对于第一个项目,请指定值 voip。这可以确保当您的应用程序被发送到背景时,音频会不间断地继续 .
要通过 Xcode 添加新行,请打开 Info.plist 并增加以下三行:
| 密钥 | 类型 | 数值 |
|---|---|---|
| 隐私 - 相机使用描述 | 字符串 | "每日游乐场需要相机进入工作" |
| 隐私 - 麦克风使用描述 | 字符串 | "每日游乐场需要麦克风进入工作" |
| 所需的背景模式 | 阵列 | 1项 |
| -- -- > 项目0 | 字符串 | App提供IP服务之声 |
如果您查看了原始文件内容 Info.plist应该是这样的
<dict>
...
<key>NSCameraUsageDescription</key>
<string>Daily Playground needs camera access to work</string>
<key>NSMicrophoneUsageDescription</key>
<string>Daily Playground needs microphone access to work</string>
<key>UIBackgroundModes</key>
<array>
<string>voip</string>
</array>
...
</dict>
IOS 上的屏幕共享
要使用iOS上的屏幕共享功能,需要做几个人工步骤来设置 Daily's 反应原生屏幕共享扩展框架 (已包括在 react-native-daily-js) (中文(简体) ).
请参考其读取内容详细.
机器人
添加以下内容到 AndroidManifest.xml数字 :
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_CAMERA"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MICROPHONE"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION"/>
<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
<application>
// ...
<service android:name="com.daily.reactlibrary.DailyOngoingMeetingForegroundService" android:foregroundServiceType="camera|microphone"/>
</application>
注:上文,
android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION只有想要进行屏幕共享时才需要.
更新您的 minSdkVersion 在您的顶级 build.gradle 文件 :
minSdkVersion = 24
(如果遇到任何问题,请参考 Github 问题 喜欢 这些,或 react-native-webrtc 安装文件让你经历一个更复杂的过程 上文阐述的较简单程序似乎在以 " 土著CLI " 为基础的 " 香草现代反应 " 结构中起作用.
使用量
react-native-daily-js 是反应原生对应物 daily-js,并且可以几乎一样的方式用于在您的应用程序中添加视频通话. 完整文档 react-native-daily-js (还有) daily-js)在这里可以找到。 。 。 .
import Daily from '@daily-co/react-native-daily-js';
// ...
// Start joining a call
const call = Daily.createCallObject();
call.join({ url: 'https://your-team.daily.co/allhands' });
// Listen for events signaling changes to participants or their audio or video.
// - 'participant-joined' and 'participant-left' are for remote participants only
// - 'participant-updated' is for the local participant as well as remote participants
const events: DailyEvent[] = [
'participant-joined',
'participant-updated',
'participant-left',
];
for (const event of events) {
call.on(event, () => {
for (const participant of Object.values(call.participants())) {
console.log('---');
console.log(`participant ${participant.user_id}:`);
if (participant.local) {
console.log('is local');
}
if (participant.audio) {
console.log('audio enabled', participant.audioTrack);
}
if (participant.video) {
console.log('video enabled', participant.videoTrack);
}
}
});
}
import { DailyMediaView } from '@daily-co/react-native-daily-js';
// ...
<DailyMediaView
videoTrack={participant.videoTrack}
audioTrack={participant.audioTrack}
mirror={participant.local}
zOrder={participant.local ? 1 : 0}
style={someStyle}
/>;
请见此博客文章. 它专注于React Web,但大部分也应应用于你的React Introduct应用.
对应用程序执行者的各类考虑
参与者数
请注意,同时为众多参与者展示视频可以使用你手机的大量资源. 这可以让应用程序运行得更慢,使用更多的电池,特别是如果你使用更老的设备. 对于更大的会议,考虑一次只展示一些视频. 在未来的发行中, daily-js是因为 音轨订阅 API 将会被带到 react-native-daily-js,让您避免网络带宽成本 接收视频为非屏幕参与者.
设备方向
如果您想支持在电话中旋转您的电话, 建议您不要限制您的应用程序支持的方向( 即通过) Info.plist 或者说 AndroidManifest.xml) (中文(简体) ).
狦 为: 限制您的应用程序所支持的方向( 例如, 用于肖像) , 请注意, 默认情况下, 每次您都会在 iOS 和 Android 上出现一些不同的视频行为 对 旋转您的手机( 例如到地平面) .
在iOS上,您所捕获的视频会旋转以补偿手机的旋转,意思是:
- 其他学员会继续直面你
- 您的本地视频将和您手机上其他参与者的视频一样定向(所以您现在需要用鸡巴敲头才能直观)
在Android上,你抓获的视频会 没有 旋转以补偿电话的旋转,意思是:
- 其他参与者现在会看到你的侧面
- 您的本地视频会 没有 和电话上其他参与者的视频一样