简体   繁体   English

如何在 React-Native 中使用 Z9017AFDB2E0254E2BB692ZA8 将 LocalScreenShare 曲目从 IOS 发布到 Web 浏览器

[英]How to publish LocalScreenShare tracks from IOS to Web browser in React-Native using Twilio

I want to integrate Screen Share feature in my react-native application in which I am using Twilio for video communication.我想在我的 react-native 应用程序中集成屏幕共享功能,我在其中使用 Twilio 进行视频通信。 In Web we are able to achieve this by following these steps.在 Web 中,我们可以通过以下步骤来实现这一点。

1: We get the media device stream using 1:我们得到媒体设备 stream 使用

navigator.mediaDevices.getDisplayMedia({ video: true, }); navigator.mediaDevices.getDisplayMedia({ video: true, });

2: Then we get the first stream tracks using 2:然后我们得到第一个 stream 轨道使用

const newScreenTrack = first(stream.getVideoTracks());常量 newScreenTrack = first(stream.getVideoTracks());

3: After that we set this newScreenTrack in some useState 3:之后我们在一些useState中设置这个newScreenTrack

const localScreenTrack = new TwilioVideo.LocalVideoTrack( newScreenTrack ); const localScreenTrack = new TwilioVideo.LocalVideoTrack(newScreenTrack);

4: After that we first unpublish the previous tracks and publish the new tracks using 4:之后,我们首先取消发布以前的曲目并使用发布新曲目

videoRoom.localParticipant.publishTrack(newScreenTrack, { name: "screen_share", }); videoRoom.localParticipant.publishTrack(newScreenTrack, { name: "screen_share", });

5: And finally we pass these tracks in our ScreenShare component and render these tracks to View the screenShare from remote Participant. 5:最后我们在 ScreenShare 组件中传递这些轨迹,并将这些轨迹渲染到远程 Participant 的 View the screenShare。

I need to do the same thing in my react-native application as well.我也需要在我的 react-native 应用程序中做同样的事情。 Where if localParticipant ask for screenShare permission to another participant.如果 localParticipant 向其他参与者请求屏幕共享权限。 Participant will accept the permission and able to publish the localScreenShare tracks.参与者将接受许可并能够发布 localScreenShare 曲目。 If anyone know this please help me in this.如果有人知道这一点,请帮助我。 It would be really helpful.这真的很有帮助。 Thank you谢谢

I think this is an issue with the react-native-twilio-video-webrtc package.我认为这是react-native-twilio-video-webrtc package 的问题。 It seems that, as you discovered in this issue , that screen sharing was previously a feature of the library and it was removed as part of a refactor.正如您在本期中发现的那样,屏幕共享之前似乎是该库的一项功能,并且作为重构的一部分已被删除。

Sadly, the library does more work than the underlying Twilio libraries to look after the video and audio tracks.遗憾的是,该库比底层的 Twilio 库做更多的工作来处理视频和音频轨道。 The Twilio library is built to be able to publish more than one track at a time, however this React Native library allows you to publish a single audio track and a single video track using the camera at a time. Twilio 库被构建为能够一次发布多个轨道,但是这个 React Native 库允许您一次使用相机发布单个音频轨道和单个视频轨道。

In order to add screen sharing, you can either support pull requests like this one or refactor the library to separate getting access to the camera from publishing a video track, so that you can publish multiple video tracks at a time, including screen tracks.为了添加屏幕共享,您可以支持像这样的拉取请求或重构库以将获取相机的访问权限与发布视频轨道分开,这样您就可以一次发布多个视频轨道,包括屏幕轨道。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 React-Native 应用程序中通过 Twilio Datatracks - How to pass Twilio Datatracks in React-Native application React Native MSAL - 从 Native 到 Web 的 SSO 不起作用 - iOS - React Native MSAL - SSO does not work from Native to Web - iOS Expo react-native app with firebase phone authentication works on web, error on ios simulator and crashes with no warning on Android - Expo react-native app with firebase phone authentication works on web, error on ios simulator and crashes with no warning on Android Auth state 即使在卸载并重新安装后仍然坚持 react-native(iOS)! 使用 Firebase 认证 - Auth state still persisting in react-native(iOS) even after uninstalling and reinstalling! Using Firebase Auth 如何去除 react-native firebase 依赖 - How to remove react-native firebase dependency react-native Ios AWS pinpoint notifications not received not received on testflight - react-native Ios AWS pinpoint notifications not receiving on testflight 从 Firebase 实时更新 React-native 中的数据(使用 NestJs) - Live updating data in React-native from Firebase(with NestJs) 如何使用 twilio 接收浏览器呼叫到使用 javascript 的电话号码 - How to receive a browser call using twilio to a phone number using javascript 安装 react-native-firebase/app 后,Build 将在 react-native ios 中失败 - After installing react-native-firebase/app it's Build will failed in react-native ios 建议使用@vitalets/google-translate-api 之类的库或直接从 react-native 翻译? - It is advisable using libraries like @vitalets/google-translate-api or translate directly from react-native?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM