Test Integration: X Only
Test X Feature: This is the simplest test integration of StreamLayer and can be set up in just a few hours. This test feature allows you to deploy a Twitter-branded pill on top of your stream. Selecting the Twitter icon would open the StreamLayer Twitter overlay with the accounts of your choice populating in real time. New tweets would populate in the overlay without any moderation required by your team. This would allow your team to quickly see how the overlays interact with your apps and programming.
Whichever X accounts you will populate in the StreamLayer overlay, tweets from those accounts will be available to viewers. Viewers can click the X icon button (positioned wherever they like) to open an overlay to view real-time tweets that the linked accounts have published. The typical StreamLayer launch menu and other feature sub-menu options will be hidden for this test integration.

*examples of how the Test X integration will appear in your app
If the Test X Feature is of interest, the StreamLayer development team is on-hand and available to ensure the integration is done smoothly and correctly. The initial steps to get started are:
- Provide StreamLayer with the list of X accounts you want to populate into the X feature.
- Install the StreamLayer test SDK. This can be done via the Carthage Package Manager or manually.
- Initialize the SDK.
- Create the StreamLayer ViewController.
- Position the overlay within your video experience.
- Position the X button.
Prerequisites
System Requirements
- Xcode 14.0 / Swift 5.7
- iOS 13+
NOTE: If you use other versions of Xcode/swift, contact support, and we can add it to our continuous delivery pipeline.
Installation
Swift Package Manager
You can integrate StreamLayer SDK using SPM (Swift Package Manager) in 2 ways
Semi-Manual Integration
- Select your workspace in the Xcode Project View
- Select project
- Select package dependencies
- Press + to add a new dependency
- Insert
[email protected]:StreamLayer/sdk-ios.git - Dependency Rule:
Up to Next Major Version: 8.10.4 Add Package- Select
StreamLayerfrom package products, select an appropriate target to add this to - Wait until all dependencies have been downloaded
Integration through Package.swift
- Open your
Package.swiftfile - In
dependenciesadd.package(url: "[email protected]:StreamLayer/sdk-ios.git", from: "8.10.4") - Add
.product(name: "StreamLayerSDK", package: "sdk-ios")to appropriate target
Integration Steps
1. Email-associated X accounts
Choose which X accounts you want to associate with your organization and email them to [email protected].
2. Install the StreamLayer test SDK
Import the StreamLayer and the third-party dependencies packed inside the StreamLayer framework.**Add the following to the AppDelegate.swift file:
import StreamLayerNow you can build the application to check and confirm whether you have correctly included the framework and related dependencies into the project.
3. Initialize the SDK
In your AppDelegate, initialize the SDK with the following command:
func initStreamLayerSDK() {
StreamLayer.initSDK(with: /** REPLACE_WITH_YOUR_SDK_KEY **/)
// following lines disable advanced SDK features
StreamLayer.config.phoneContactsSyncEnabled = false
StreamLayer.config.isUserProfileOverlayHidden = true
StreamLayer.config.notificationsMode = [.vote, .promotion, .twitter]
StreamLayer.config.tooltipsEnabled = false
}Note: You need to replace REPLACE_WITH_YOUR_SDK_KEY with the SDK Key provided to you by the StreamLayer team.
4. Create the StreamLayer ViewController
Init the overlay ViewController using StreamLayer.createOverlay(...) method and remove the overlay during the parent VC deinitialization.
import StreamLayer
class StreamLayerViewController: UIViewController {
// blank reference view
private let overlayReferenceView = UIView()
// ..
private lazy var overlayVC = StreamLayer.createOverlay(
overlayReferenceView, // overlayView will use this as reference inside streamlayer SDK to know where to draw overlays
overlayDelegate: self // you can designate a separate delegate, but for the simplicity of it we use the same VC
)
// ...
override func viewDidLoad() {
super.viewDidLoad()
// reference view that is added to view hierarchy, must be on the same level with overlayViewController
view.addSubview(overlayReferenceView)
// add overlay ViewController into the hierarchy
// this is where the UI integration takes place
overlayVC.willMove(toParent: self)
addChild(overlayVC)
view.addSubview(overlayVC.view)
overlayVC.didMove(toParent: self)
}
// make sure to not store references outside creating VC as it will prevent streamlayer SDK from cleaning up
deinit {
StreamLayer.removeOverlay()
}5. Position the overlay and handle system orientation.
Position the Overlay ViewController.
We have excerpted the implementation of orientation handling from the Sample Integrations found in the repository along with the SDK. In this example, we use SnapKit and RxSwift for simplicity. Neither of these is required, but it allows us to demonstrate the functionality of our framework quickly. You can position the overlay in whatever best suits your current markup style. Please note that this example may not work with your integration if you perform a simple cut and paste. This example code works with the Sample Integrations it was pulled from. See the complete demo application for additional details.
The complete demo source code is available here: https://github.com/StreamLayer/sdk-ios/tree/sample-twitter
Extend the file you've created in step 3 with the following:
class StreamLayerViewController: UIViewController {
// ... keep all the code from step 3 and add/alter the rest
private let videoPlayer = UIViewController() // just for illustration purposes, we assume you already have your own setup in an actual ViewController
// helper to access interface orientation
private var windowInterfaceOrientation: UIInterfaceOrientation? {
return UIApplication.shared.windows.first?.windowScene?.interfaceOrientation
}
enum Constants {
static let demoEventID: String = "demo"
}
override func viewDidLoad() {
// ... your existing code
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
StreamLayer.createSession(for: Constants.demoEventID)
// used in single feature integrations - hides launch button and who's watching indicator
StreamLayer.hideLaunchButton(true)
StreamLayer.hideLaunchControls(true)
}
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
super.viewWillTransition(to: size, with: coordinator)
coordinator.animate(alongsideTransition: { (context) in
guard let windowInterfaceOrientation = self.windowInterfaceOrientation else { return }
if windowInterfaceOrientation.isLandscape {
horizontalOrientation()
} else {
verticalOrientation()
}
})
}
}
private extension StreamLayerViewController {
func setupConstraints(_ orientation: OrientationState) {
switch orientation {
case .horizontalLeft, .horizontalRight:
horizontalOrientation()
default:
verticalOrientation()
}
}
/// Portrait.
/// Roughly 1/3 of the screen is taken up by video player, remainder is useful content + overlay button
/// Overlays slide from the bottom
func verticalOrientation() {
overlayReferenceView.slr_snp.remakeConstraints { [unowned videoPlayer] in
$0.bottom.left.right.equalToSuperview()
$0.top.equalTo(videoPlayer.view.slr_snp.bottom).offset(-40)
}
overlayVC.view.slr_snp.remakeConstraints { [unowned videoPlayer] in
$0.top.equalTo(videoPlayer.view.slr_snp.bottom).offset(-40)
$0.left.right.bottom.equalTo(0)
}
}
/// Landscape
/// Everything is taken up by video player & button is visible
/// Overlays slide from the left
func horizontalOrientation() {
overlayReferenceView.slr_snp.remakeConstraints { [unowned view] in
$0.left.top.bottom.equalToSuperview()
// you can adjust these settings and have a bigger/smaller overlay if desired, but these
// are the "ideal" settings
if #available(iOS 11, *) {
$0.right.equalTo(view.safeAreaLayoutGuide.slr_snp.left).offset(300 + 40)
} else {
$0.right.equalTo(view.slr_snp.left).offset(300 + 40)
}
}
// view controller covers the whole screen, will forward touches unless they land in overlayView
overlayVC.view.slr_snp.remakeConstraints { [unowned view] in
$0.edges.equalTo(view)
}
}
}Visually this would result in the following representation:
Astands for your video player areaBstands foroverlayVC.viewCstands foroverlayViewReference ViewisoverlayReferenceView
The following is the base implementation of the SLROverlayDelegate:
// these are delegate methods that allow for greater control over streamlayer SDK
// blank implementation is provided
extension StreamLayerViewController: SLROverlayDelegate {
func overlayOpened() {
// will fire when streamlayer overlay is opened
}
func overlayClosed() {
// will fire when streamlayer overlay is closed
}
func requestAudioDucking() {
// react by setting relative audio of your audio sources to a lower %
}
func disableAudioDucking() {
// react by setting relative audio to your previous setting
}
func prepareAudioSession(for type: SLRAudioSessionType) {
// used when watch party is enabled
}
func disableAudioSession(for type: SLRAudioSessionType) {
// used when watch party is enabled
}
func shareInviteMessage() -> String {
// will be used for generating invite messages
return ""
}
func waveMessage() -> String {
return ""
}
func switchStream(to streamId: String) {
}
func playVideo() {
}
func pauseVideo() {
}
func getVideoPlayerContainer() -> SLRVideoPlayerOverlayContainer? {
return nil
}
}6. Position the X button
Using same StreamLayerViewController add the button that will open the X overlay:
Sample X icon can be taken from here:
- https://cdn.streamlayer.io/demo-assets/icons/twitter/[email protected]
- https://cdn.streamlayer.io/demo-assets/icons/twitter/[email protected]
class StreamLayerViewController: UIViewController {
// ... existing code
private lazy var twitterButton: UIButton = {
let button = UIButton()
button.setImage(UIImage(named: "twitter_icon"), for: .normal) // use your image or we can provide one
button.translatesAutoresizingMaskIntoConstraints = false
button.addTarget(self, action: #selector(twitterButtonTapped), for: .touchUpInside)
return button
}()
// ... constraints
override func viewDidLoad() {
// ... existing code
view.addSubview(twitterButton)
twitterButton.slr_snp.makeConstraints {
// you can change this to your desired settings
$0.height.width.equalTo(32.0)
$0.trailing.equalToSuperview().inset(20.0)
$0.bottom.equalTo(view.safeAreaLayoutGuide).inset(20.0)
}
// existing overlayVC code - button will be below it
overlayVC.willMove(toParent: self)
addChild(overlayVC)
view.addSubview(overlayVC.view)
overlayVC.didMove(toParent: self)
}
// this will open the twitter overlay
@objc func twitterButtonTapped() {
StreamLayer.showOverlay(overlayType: .twitter)
}
}Updated 12 months ago
