SkyWay SDKを使用して、SwiftUIでビデオチャットアプリを作成しました。SkyWayの使用方法やM1 Macでビルドする方法は前回の記事を参考にしてください。
使用環境
- MacBook Air (M1, 2020)
- macOS Monterey 12.3.1
- Xcode 13.3.1
- iOS 15.4.1
- SkyWay Community Edition
画面の構成
RoomVideoViewを親Viewとして、機能ごとに子Viewに分割して画面を構成しています。SkyWay SDKは現時点ではSwiftUIに対応していないため、UIViewRepresentableでSDKのSKWVideoクラスをラップしたVideViewを用意しました。また、ルーム機能にはメッセージの送受信機能もあるので、MessageViewに受信メッセージの表示と、メッセージ送信を実装しました。
実装方法
今回の実装内容を順番にみていきます。
SkyWay SDKのラップクラス
まず、SkyWay SDKをクラスにまとめておきます。ルームメンバーの入室・退出イベントやテキストチャットの受信イベントをViewで検知するためにObservableObjectを継承し、監視対象のプロパティを@Publishedにつけておきます。あとはSwiftUIのランタイムが関連のViewを自動的に更新してくれます。
また、View特有のForEachで配列を扱えるようにIdentifiableを継承して一意のidをつけておきます。
SkyWayRoom.swif
import Foundation
import SkyWay
struct MediaStream: Identifiable {
let id = UUID()
let peerId: String
let stream: SKWMediaStream
}
struct Message: Identifiable {
var id = UUID()
var peerId: String
var date = Date()
var text: String
}
class SkyWayRoom: ObservableObject {
private let skywayAPIKey = "YOUR API KEY"
private let skywayDomain = "localhost"
private var peer: SKWPeer?
private var room: SKWRoom?
@Published var peerId = ""
@Published var localStream: SKWMediaStream?
var streams: [MediaStream] = []
@Published var streamCount = 0
var messages: [Message] = []
@Published var lastMessageId = UUID()
func join(_ roomName: String) {
let option = SKWPeerOption.init()
option.key = skywayAPIKey
option.domain = skywayDomain
if let peer = SKWPeer(options: option) {
self.peer = peer
registerPeerCallbacks(peer, roomName: roomName)
}
}
func leave() {
if room != nil {
let meshRoom = room as! SKWMeshRoom
meshRoom.close()
streams.removeAll()
streamCount = 0
room = nil
}
if peer != nil {
peer?.destroy()
peer = nil
}
}
func isJoined() -> Bool {
room != nil && localStream != nil
}
func addMessage(peerId: String, text: String) {
let msg = Message(peerId: peerId, text: text)
messages.append(msg)
lastMessageId = msg.id
}
func sendMessage(text: String) {
if let room = room {
room.send(text as NSObject)
}
// 自分からの送信メッセージはコールバックされないので、自前でエコー
addMessage(peerId: peerId, text: text)
}
func registerPeerCallbacks(_ peer: SKWPeer, roomName: String) {
peer.on(.PEER_EVENT_OPEN, callback: { (obj) -> Void in
if let peerId = obj as? String {
self.peerId = peerId
SKWNavigator.initialize(peer)
let constraints = SKWMediaConstraints()
constraints.minFrameRate = 30
self.localStream = SKWNavigator.getUserMedia(constraints)
let roomOption = SKWRoomOption()
roomOption.mode = .ROOM_MODE_MESH
roomOption.stream = self.localStream
if let room = peer.joinRoom(withName: roomName, options: roomOption) {
self.room = room
self.registerRoomCallbacks(room)
}
}
})
}
func registerRoomCallbacks(_ room: SKWRoom) {
room.on(.ROOM_EVENT_STREAM, callback: { (obj) -> Void in
if let mediaStream = obj as? SKWMediaStream {
if let peerID = mediaStream.peerId {
let item = MediaStream(peerId: peerID, stream: mediaStream)
self.streams.append(item)
self.streamCount = self.streams.count
}
}
})
room.on(.ROOM_EVENT_PEER_LEAVE, callback: { (obj) -> Void in
if let peerId = obj as? String {
for (index, item) in self.streams.enumerated() {
if item.peerId == peerId {
self.streams.remove(at: index)
self.streamCount = self.streams.count
}
}
}
})
room.on(.ROOM_EVENT_DATA, callback: { (obj) -> Void in
if let message = obj as? SKWRoomDataMessage {
let peerId: String = message.src
if let data = message.data as? String {
self.addMessage(peerId: peerId, text: data)
}
}
})
}
}
ContentView
@StateObjectを使ってSkyWayRoomをインスタンス化します。ここでは、@Publishedしたプロパティにはアクセスしませんが、子Viewにインスタンスを渡し、子View側で@ObservedObjectとしてインスタンスを保持することで、Publishedを検知します。このように、Viewをまたがってプロパティの変更を検知することができます。
ContentView.swif
struct ContentView: View {
@State var isJoined = false
@State var roomName = "room1"
@StateObject var skyWayRoom = SkyWayRoom()
var body: some View {
NavigationView {
VStack {
RoomVideoView(skyWayRoom: skyWayRoom)
}
.navigationTitle(roomName)
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .navigationBarTrailing){
if isJoined {
Button("Leave") {
skyWayRoom.leave()
isJoined = false
}
} else {
Button("Join") {
skyWayRoom.join(roomName)
isJoined = true
}
}
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView(isJoined: false, roomName: "room1")
}
}
RoomVideoView
ルームの参加メンバーの人数が可変のため、LazyVGridで動的にカラムを分割して相手の映像を表示します。メンバーの参加、退出のタイミングでObservableObjectプロトコルを通じて、SkyWayRoomオブジェクトが変更が検知されます。（便利すぎ）
RoomVideoView.swift
import SwiftUI
struct RoomVideoView: View {
var columns: [GridItem] = [GridItem(.adaptive(minimum: 80))]
@ObservedObject var skyWayRoom: SkyWayRoom
var body: some View {
VStack {
HStack {
VStack {
Text(String(skyWayRoom.streamCount) + "人")
.font(.largeTitle)
Text("参加人数")
.font(.caption)
}
.frame(maxWidth: .infinity)
HStack {
VStack {
if let localStream = skyWayRoom.localStream {
VideoView(stream: localStream)
.frame(minWidth: 80, minHeight: 110)
.clipShape(Circle())
.overlay(Circle().stroke(Color.gray, lineWidth: 1))
} else {
// デバッグ（レイアウト確認）
Text("My Camera")
.frame(minWidth: 80, minHeight: 110)
.clipShape(Circle())
.overlay(Circle().stroke(Color.gray, lineWidth: 1))
}
Text(skyWayRoom.peerId)
.frame(alignment: .top)
.font(.caption)
}
.frame(minWidth: 200)
}
}
.frame(minHeight: 140, maxHeight: 140)
LazyVGrid(columns: columns) {
if skyWayRoom.isJoined() {
ForEach(skyWayRoom.streams) { stream in
VStack {
VideoView(stream: stream.stream)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 130)
Text(stream.peerId)
.font(.caption)
}
}
} else {
// デバッグ（レイアウト確認）
ForEach((1...6), id: \.self) {
Text("\($0)")
.font(.title)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 130)
.background(Color.white)
}
}
}
.padding()
.background(Color(red: 210/255, green: 217/255, blue: 230/255, opacity: 1.0))
Spacer()
MessageView(room: skyWayRoom)
}
}
}
struct GridVideoView_Previews: PreviewProvider {
@StateObject static private var skyWayRoom = SkyWayRoom()
static var previews: some View {
RoomVideoView(skyWayRoom: skyWayRoom)
}
}
MessageView
ルームメンバーのグループチャットを担当するViewです。チャットデータはSkyWayRoomクラスで管理されているため、ここではメッセージの表示と、キーボード入力の処理だけ実装しています。
MessageView.swift
import SwiftUI
struct MessageView: View {
@ObservedObject var room: SkyWayRoom
@State var inputText = ""
var body: some View {
ScrollViewReader { reader in
List {
ForEach(room.messages) { message in
MessageItemView(message: message)
.id(message.id)
}
}
.listStyle(PlainListStyle())
.onChange(of: room.lastMessageId) { id in
// 末尾にスクロール
withAnimation(.linear(duration: 2)) {
reader.scrollTo(id)
}
}
}
HStack {
TextField("メッセージを入力...", text: $inputText)
.padding()
Button("送信") {
UIApplication.shared.closeKeyboard()
if !inputText.isEmpty {
room.sendMessage(text: inputText)
inputText = "" // クリア
}
}
Button("Cancel") {
UIApplication.shared.closeKeyboard()
inputText = "" // クリア
}
.padding()
}
.frame(maxWidth: .infinity, maxHeight: 50)
.onAppear {
if isPreview() {
for i in 1..<4 {
room.addMessage(peerId: "peer" + String(i), text: "メッセージ" + String(i))
}
}
}
}
func isPreview() -> Bool {
return ProcessInfo.processInfo.environment["XCODE_RUNNING_FOR_PREVIEWS"] == "1"
}
}
struct MessageItemView: View {
@State var message: Message
var body: some View {
VStack {
HStack {
Text(message.peerId)
.font(.caption)
Text(formatTime(date: message.date))
.font(.caption)
}
.frame(maxWidth: .infinity, alignment: .leading)
Text(message.text)
.font(.footnote)
.frame(maxWidth: .infinity, alignment: .leading)
}
}
func formatTime(date: Date) -> String {
let f = DateFormatter()
f.timeStyle = .short
f.dateStyle = .short
f.locale = Locale(identifier: "ja_JP")
let time = f.string(from: date)
return time
}
}
extension UIApplication {
func closeKeyboard() {
sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
}
}
struct MessageView_Previews: PreviewProvider {
@StateObject static var room = SkyWayRoom()
static var previews: some View {
MessageView(room: room)
}
}
VideoView
UIViewRepresentableでSkyWay SDKをラップしています。
VideoView.swift
import SwiftUI
import SkyWay
struct VideoView: UIViewRepresentable {
typealias UIViewType = SKWVideo
let stream: SKWMediaStream
let videoView = UIViewType()
func makeUIView(context: Context) -> UIViewType {
return videoView
}
func updateUIView(_ uiView: UIViewType, context: Context) {
stream.addVideoRenderer(uiView, track: 0)
}
final class Coordinator: NSObject {
let parent: VideoView
init(_ parent: VideoView) {
self.parent = parent
}
}
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
static func dismantleUIView(_ uiView: UIViewType, coordinator: Coordinator) {
// perform additional clean-up work related custom view
coordinator.parent.stream.removeVideoRenderer(uiView, track: 0)
}
}
struct VideoView_Previews: PreviewProvider {
static var previews: some View {
//VideoView()
Text("test")
}
}
完成
実機での実行イメージです。円のクリップが自分の映像で、四角が相手の映像です。
メンバーが参加するたびに動的に参加人数が更新され、ビデオ映像が追加されていきます。
通信系のアプリはイベント管理と表示の処理が煩雑になりがちですが、SwiftUIでこのあたりを意識することなく、かなりシンプルにコーディングできました。お試しあれ！