SkyWayをSwiftUIで実装した際に、色々とハマったので、そのときのメモです。
現在、SkyWay Betaが公開されていますが、iOS用のSDKはまだ公開されていないので、SkyWay Community Editionを使って実装しました。
ハマりどころと対処したこと
- SkyWay SDKがM1 Mac環境に対応していない → ビルド指定にarm64を追加
- SkyWay SDKがSwiftUIに対応していない → UIViewRepresentableでSKWVideoをラッピング
使用環境
- MacBook Air (M1, 2020)
- macOS Monterey 12.3.1
- Xcode 13.3.1
備忘録を兼ねて、最初から順番にやっていきます。(2022/5/1現在)
Xcodeプロジェクトを新規作成
InterfaceにSwiftUI、LnaguageにSiwftを指定します。
SkyWay SDKをプロジェクトに追加(CocoaPodsを利用)
CocoaPodsをまだインストールしていない場合は公式サイトに従ってインストールしておきます。
https://cocoapods.org
ターミナルでXcodeのプロジェクトのディレクトリに移動してpodsを初期化します。
ターミナル
% pod init
同じディレクトリに作成されたPodfileが作成されます。SkyWayの公式チュートリアルを参考にPodfileにSkyWay SDKを追加します。
このままだとM1 Mac環境ではシミュレーターやSwiftUIのプレビューでビルドが通らないので、SkyWayサポート記事を参考に、Podfileの末尾にシミュレーター環境としてarm64を指定します。
Podfile
target 'SkyWayP2pDemo' do
# Pods for SkyWayP2pDemo
pod 'SkyWay'
end
post_install do |installer|
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
end
end
end
Podfileを保存して、SkyWay SDKをインストールします。
ターミナル
% pod setup
% pod install
いったんXcodeを閉じて、podsが組み込まれたプロジェクトファイル(白背景で青字のアイコン)を開きます。
Xcodeが起動したら、Build Settingsを開いて、Excluded ArchitecturesのiOSシミュレータにarm64を指定します。これで、シミュレーターと実機のどちらでもビルドが通るようになります。
そして、info.plistにカメラ(NSCameraUsageDescription)とマイク(NSMicrophoneUsageDescription)のアクセス許可を追加しておきます。
SkyWay SDKをラップする
現在のところSkyWay SDKはSwiftUIに対応していないため、UIViewRepresentableを使ってラップします。
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 {
Text("test")
}
}
サンプルアプリ
SwiftUIのZStackを使って、自分の映像用と相手の映像用の二つのVideoViewを重畳表示するサンプルです。相手のPeer IDを指定してコールすることができます。また、Peerの初期化後は着信待ちになるため、相手からの着信にも対応しています。
ContentView.swift
import SwiftUI
import SkyWay
struct ContentView: View {
@State var myPeerId = ""
@State var remotePeerId = ""
@State var peer: SKWPeer?
@State var localStream: SKWMediaStream?
@State var remoteStream: SKWMediaStream?
@State var mediaConnection: SKWMediaConnection?
let skywayAPIKey = "YOU API KEY"
let skywayDomain = "localhost"
var body: some View {
VStack {
HStack {
Text("自分:")
.padding()
TextField("My peer ID", text: $myPeerId)
.padding()
Button("init") {
let option = SKWPeerOption.init()
option.key = skywayAPIKey
option.domain = skywayDomain
if let peer = SKWPeer(options: option) {
self.peer = peer
registerPeerCallbacks(peer)
SKWNavigator.initialize(peer)
let constraints = SKWMediaConstraints()
constraints.minFrameRate = 30
localStream = SKWNavigator.getUserMedia(constraints)
}
}
.padding()
}
if peer != nil {
HStack {
Text("相手: ")
.padding()
TextField("Remote peer ID", text: $remotePeerId)
.padding()
Button("call") {
// ソフトウェアキーボードを閉じる
UIApplication.shared.endEditing()
let callOption = SKWCallOption()
if let mediaConnection = peer?.call(withId: remotePeerId, stream: localStream, options: callOption){
self.mediaConnection = mediaConnection
registerMediaConnectionCallbacks(mediaConnection)
} else {
print("failed to call:", remotePeerId)
}
}
.padding()
}
ZStack {
GeometryReader { geometry in
let frameWidth = geometry.frame(in: .global).width
let frameHeight = geometry.frame(in: .global).height
if let remoteStream = remoteStream {
VideoView(stream: remoteStream)
.shadow(radius: 7)
}
if let localStream = localStream {
let width = frameWidth / 3
let height = frameHeight / 3
let x = frameWidth - width / 2 - 10
let y = frameHeight - height / 2 - 10
VideoView(stream: localStream)
.frame(width: width, height: height)
.padding()
.position(x: x, y: y)
.shadow(radius: 7)
}
}
}
.padding()
}
}
}
func registerPeerCallbacks(_ peer: SKWPeer) {
peer.on(.PEER_EVENT_OPEN, callback: { (obj) -> Void in
if let peerId = obj as? String {
myPeerId = peerId
print("PEER_EVENT_OPEN: peerId:", peerId)
}
})
peer.on(.PEER_EVENT_CONNECTION, callback: { (obj) -> Void in
if let dataConnection = obj as? SKWDataConnection {
print("PEER_EVENT_CONNECTION: dataConnection:", dataConnection)
}
})
peer.on(.PEER_EVENT_CALL, callback: { (obj) -> Void in
if let connection = obj as? SKWMediaConnection {
mediaConnection = connection
registerMediaConnectionCallbacks(connection)
connection.answer(localStream)
print("PEER_EVENT_CALL")
}
})
peer.on(.PEER_EVENT_CLOSE, callback: { (obj) -> Void in
self.peer = nil
print("PEER_EVENT_CLOSE")
})
peer.on(.PEER_EVENT_ERROR, callback: { (obj) -> Void in
if let error = obj as? SKWPeerError {
print("ROOM_EVENT_ERROR: error:", error)
}
})
}
func registerMediaConnectionCallbacks(_ connection: SKWMediaConnection){
connection.on(.MEDIACONNECTION_EVENT_STREAM, callback: { (obj) -> Void in
if let mediaStream = obj as? SKWMediaStream {
remoteStream = mediaStream
if let peerID = remoteStream?.peerId {
remotePeerId = peerID
}
print("MEDIACONNECTION_EVENT_STREAM")
}
})
connection.on(.MEDIACONNECTION_EVENT_REMOVE_STREAM, callback: { (obj) -> Void in
if let _ = obj as? SKWMediaStream {
remoteStream = nil
print("MEDIACONNECTION_EVENT_REMOVE_STREAM")
}
})
connection.on(.MEDIACONNECTION_EVENT_CLOSE, callback: { (obj) -> Void in
if let _ = obj as? SKWMediaConnection {
remoteStream = nil
mediaConnection = nil
print("MEDIACONNECTION_EVENT_CLOSE")
}
})
connection.on(.MEDIACONNECTION_EVENT_ERROR, callback: { (obj) -> Void in
if let error = obj as? SKWPeerError {
print("MEDIACONNECTION_EVENT_ERROR: error:", error)
}
})
}
}
extension UIApplication {
func endEditing() {
sendAction(
#selector(UIResponder.resignFirstResponder),
to: nil,
from: nil,
for: nil
)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
実行結果
自分と相手のPeer IDとカメラ画像が表示されます。
これで完成です。やはりSwiftUIで開発できると効率がいいですね。
次回は複数人とビデオチャットが可能なROOM機能を試してみます。
参考
blog記事を参考にさせていただきました。貴重な情報ありがとうございました。