SwiftUI 中的 WebRTC VideoCall 渲染答案

【问题标题】：WebRTC VideoCall Rendering in SwiftUISwiftUI 中的 WebRTC VideoCall 渲染
【发布时间】：2020-02-07 17:49:15
【问题描述】：

我正在使用 webRTC 在两个 iphone 设备之间进行视频通话。 webrtc对等连接建立成功。视频流应以 swiftui 显示。保存视频的 webRTC 对象 RTCEAGLVideoView 需要在 swiftui 中渲染。在模型类中，我将此对象声明为

var remoteVideoView : RTCEAGLVideoView?
    {
        willSet {
            objectWillChange.send()
        }
    }

在 SwiftUI 类中，remoteVideoView 应该呈现。

VStack()
{
//show remoteVideoView  here
}

应该使用什么样的对象来渲染这个视频视图。

简码enter image description here

【问题讨论】：

能否请您准确解释您的问题。这不清楚你到底想要什么。请编辑可能有人可以提供帮助！
好的，你想渲染本地视频还是远程视频。
我要渲染远程视频

标签： ios webrtc swiftui

【解决方案1】：

struct RemoteView : UIViewRepresentable {
    @Binding var video: VideoCall
    @Binding var remoteView: RTCEAGLVideoView
    func updateUIView(_ uiView: RTCEAGLVideoView, context: UIViewRepresentableContext<RemoteView>) {
   }

    func makeUIView(context: Context) -> RTCEAGLVideoView  {
        self.remoteView.frame = CGRect(x: 20, y: 20, width: 200, height: 300)
        self.remoteView = self.video.remoteVideoView!
        return self.remoteView
    }

}

我从另一个 swiftui 结构中将其称为

VStack()
{ 
      RemoteView() 
}

但我得到编译器错误

【讨论】：

【解决方案2】：

首先您需要创建RTCMediaStream，其中包含音轨和视频轨：

@property RTCMediaStream * _Nullable mediaStream;

您使用 streamId 从媒体服务器获取的流将其转换为 RTCMediaStream，然后使用以下代码在 RTCEAGLVideoView 中呈现它

 if (mediaStream.videoTracks.count > 0) {
     RTCVideoTrack *videoTrack = [self.mediaStream.videoTracks objectAtIndex:0];
     [videoTrack addRenderer:remoteView];
   }

还创建一个 RTCEAGLVideoView 的 IBOutlet，如下所示：

@property (weak, nonatomic) IBOutlet RTCEAGLVideoView *remoteView;

现在在您的视图控制器中添加一个视图，并将类作为RTCEAGLVideoView 分配给该视图。接下来连接 videoView 插座。

如果您不使用情节提要，请使用以下代码：

 RTCEAGLVideoView *remoteView = [[RTCEAGLVideoView alloc] initWithFrame:self.frame]; // pass CGRect frame here.
 remoteView.delegate = self;
 [yourView addSubview:remoteView];

现在你可以看到你的视频了。

在 VStack() 中添加 RTCEAGLVideoView 使用如下：

struct RemoteView: UIViewRepresentable {
    func remoteView(context: Context) -> RTCEAGLVideoView {
        //create frame for RTCEAGLVideoView here
    }
}


struct RemoteView_Preview: PreviewProvider {
    static var previews: some View {
        RemoteView(frame: .zero)
    }
}

在 VStack 中使用如下：

 VStack {
          RemoteView(frame)
      VStack{
           Text("")
           }
       }

【讨论】：

func webrtcClient(client : WebRtcClient, didReceiveRemoteVideoTrack remoteVideoTrack: RTCVideoTrack) { // 使用生成的remoteVideoTrack渲染流到remoteVideoView remoteVideoTrack.add(self.remoteVideoView!) self.remoteVideoTrack = remoteVideoTrack }。我在模型类中有这个代码。从那里我发布 'remoteVideoView' 像 var remoteVideoView : RTCEAGLVideoView？ { willSet { objectWillChange.send() } }。如何在swiftui中显示这个对象'remoteVideoView'
编辑了我的答案检查并希望您使用 Storyboards。
我使用 SwiftUI 并使用堆栈、按钮等创建了所有视图组件，没有故事板就无法显示视频。我没有使用故事板
VStack() { Text("VIDEO CALL") //在这个块中显示视频 }
你试过解决方案了吗？