Guides

SauceLive Player

Suggest Edits

1. Introduction

This is the page that you see when you access the live URL, and you can watch it live.

Go to the schedule before the live, and if the live starts, go directly to the player.

A guide to the sauce live player for the above case.

2-1. Interworking method

Two cases can be considered.

  • When the live ends
  • If login is required

If you are working with the company mall, please refer to the JSON field example below and deliver the related information to the Saucelive development team.

Enter live

  • There is no default behavior.
  • Share

Share

  • The default of whether or not to use is use.
  • If you are using the customer's own app sharing, use the scheme to select the title, playerURL, and live representative image
  • If you don't use the SNS function, you can only copy the address**

Coupon function

  • The default of use is not used.

Close Broadcast URL

  • The default behavior is history.back().

⭐️ stage, apply prod environment settings - For questions, contact [KakaoTalk](https://accounts.kakao.com/login/>> ?continue=https%3A%2F%2Fpf.kakao.com %2Fchat#login) ChannelTalk or [person-in-charge email] (mailto:[email protected] ) [[email protected] ] (mailto:[email protected] )

{
      /* 방송입장 관련 */
      "enter":{
           /* webview scheme call */
           /* Type string|string[]|null defaultValue:null */
           /* ex)"webivew":"sauceflexapp://enter"*/
           "webview":null
      },
      /* share btn */
      "share":{
           /* share btn */
           /* Type boolean defaultVlue:true */
           "use":true,
 
           /* When pressed to share, the webview scheme 
           call title, broadcast address, and representative
           image are encodeURIComponent and handed over to the json parameter.*/
           /* Type string | null defaultValue:null */
           /* ex "webview":"sauceflexapp://share?${JSON}"
           */
           "webview":null,
 
           /* sns*/
           /* Type boolean defaultVlue true*/
           "sns":true
 
           /* kakaotalk */
           /* Type string | null defaultValue null*/
           "kakaoAppLink":null
       },
 
      /* coupon    /
      "coupon": {
           /* coupon use or not */
           /* Type boolean defaultValue true */
           "use":true,
       },
 
      /* guestLogin  */
      "guestLogin":{
            /* guestLogin use or not (Members and non-members Choose one)*/
            /* Type boolean defaultValue false*/
            "use":false,
           
            /* Non-members login privacy collection terms and conditions address */
            /* Type string|null defaultValue null*/
            "agreementUrl":null
      },
 
     /* Related to page movement */
     "redirection":{
     /* About logging in */
        "login": {
         /*  WebView scheme Call */
         /* Type string | null defaultValue null */
         /* ex) "webivew":"sauceflexapp://login" */
         "webview":null,

        /* How to History */
         /* Type "href" | "replace" defaultValue "href" href="History added and acted,"replace="Change current page history" */
         "history": "href",

     /* Mobile Address */
     /* Type string | null defaultVlue null*/
     /* ex) "https://stage.space.sauceflex.com/?returnUrl=${broadcastUrl}"  */
      "mobile": null,

     /* PC Address */
     /* Type string | null */
     /* ex) "https://stage.space.sauceflex.com/?returnUrl=${broadcastUrl}" */
            "pc": null
          },
      /* Regarding the close button (❌ behave differently than backward).) */
     "broadcastClose": {
         /*  WebView scheme Call */
      /* Type string | null */
     /* ex) "webivew":"sauceflexapp://close" */
         "webview":null,

/* How to History */
/* Type "href" | "replace" defaultValue "href" href= "History added and action",replace="Change current page history" */
           "history": "href",

/* Mobile Address */
       /* Type string | null defaultValue null*/
       /* ex) "https://stage.space.sauceflex.com/?returnUrl=${broadcastUrl}"*/
           "mobile": null,

/* PC Address */
       /* Type string | null */
        /* ex) "https://stage.space.sauceflex.com/?returnUrl=${broadcastUrl}"*/
           "pc": null
     }
   }
}

1.Examples of json (for reference only)

{           
        "enter":{
            "webview":["sauceflexapp://showHeader?show=N","sauceflexapp://showActionBar?showYn=N"]
        },
        "share":{
            "use":true,
            "webview":null,
            "sns":true,
            "kakaoAppLink": null
        },
        "coupon": {
            "use":false
        },
        "guestLogin": {
            "use": false,
            "agreementUrl": null
        },
        "redirection": {
            "login": {
                "webview":null,
                "history": "href",
                "mobile": "https://sauceflex.com/example/sauceAuth?ret=${broadcastUrl}",
                "pc":  "https://sauceflex.com/example/sauceAuth?ret=${broadcastUrl}"
            },
             "broadcastClose": {
               "webview":"sauceflexapp://webPageClose",
               "history": "href",
               "mobile": null,
               "pc": "http://www.sauceflex.com/main"
           }
       }
}

📘

https://{ENV}player.sauceflex.com/broadcast/{broadcastUrl}?returnUrl=https://{movetoUrl}

ex)

https://{ENV}player.sauceflex.com/broadcast/lkmobidoo-964592b8d5e04507b9a8f4fe96ba89ca?returnUrl=https://www.saucelive.net/intro/

returnUrl = encodeURIComponent(https://www.saucelive.net/intro/)

Please write in http, https format.

Company Mall Login Page

  • Guide to returning to login page URL and Saucelive page (method using query string such as returnUrl)
  • After logging in, move the page by attaching the access token created through the link with the server as a query string to the address received through returnUrl, etc. as follows

📘

https://player.sauceflex.com/broadcast/{broadcastId}?accessToken={CreatedaccessToken}

Notes for Player Interworking in WebView

  • Please make sure to set up the SafeArea area to prevent player screen development on iOS X or higher devices.
  • Please use the code below if you want the video to be played without the play icon on Android Webview. (The guide is carried out by the customer's AOS app development team.)
    • override fun getDefaultVideoPoster(): Bitmap? { { return Bitmap.createBitmap(10,10, Bitmap.Config.ARGB_8888) }

2-2. Interworking method (Iframe embedded)

Feature enabled or disabled

⭐️ stage, prod configuration - For more information, contact, Channel Talk (https://zppj8.channel.io/home) or [person-in-charge email] (mailto:[email protected] ) [[email protected] ] (mailto:[email protected] )

{
      /* coupon */       
      "coupon": {
          /* coupon use or not */
          /* Type boolean defaultValue true */
         "use":true       
      },      
      /* guestLogin */
      "guestLogin":{
            /* guestLogin  (member or non-member Choose one)*/
            /* Type boolean defaultValue false*/
            "use":false,
           
            /* Non-members login privacy collection terms and conditions address */
            /* Type string|null defaultValue null*/
            "agreementUrl":null
      }
}

STEP 1. Add the broadcast page to the page using . 
<!-- Broadcast Address -->
<iframe src="<https://player.sauceflex.com/broadcast/{broadcastId}?accessToken={accessToken}&gt;"&gt;</iframe>
<!-- To use an external inflow code, you must pass the requested parameters before drawing an iframe. You must forward the value of fc among the queryString keys called to the parent page. -->
<!-- example -->
<iframe src="<https://player.sauceflex.com/broadcast/{broadcastId}?accessToken={accessToken}&gt;&amp;fc=value"&gt;</iframe>

STEP 2. Receive 'message' events in the JavaScript window object and handle them properly.

 window.addEventListener(
  "message",
   function(e) {
  // Take care of it here
  console.log(e.data);
   }, }, false
);

STEP 3. The message is delivered to the JSON type via the 'data' of the event. Each event is as follows.

  • Enter the broadcast - Call automatically when entering the page 
    • // event.data
{
    key: 'sauceflexEnter',
    params: null
}
  • broadcast end 
    • // event.data
{
    key: 'sauceflexMoveExit',
    params: null
}
  • init login 
    • // event.data
{
    key: 'sauceflexMoveLogin',
    params: null
}
  • click to product 
    • {
    key: 'sauceflexMoveProduct',
    params: {
        linkUrl: String | null,
        broadcastIdx: String  
    }
}
  • share 
    • {
    key: 'sauceflexOnShare',
    params: {
        linkUrl: String 
    }
}
  • banner click 
    • {
    key: 'sauceflexMoveBanner',
    params: {
        bannerId: String // bannerId
        linkUrl: String // banner url
        broadcastIdx: String 
    }
}

2-3. Interworking method (Webview)

### Bridge & Message

The message will be sent to the bridge as shown below. Each message is forwarded with the JSON object stringed.

  • Sauceflex Enter (Void) - Invoke automatically when entering a page
  • sauceflexMoveExit(Void)
  • sauceflexMoveLogin(Void)
  • sauceflexMoveProduct(message: String) 
    • // Stringified JSON
{
    linkUrl: String | null, 
    broadcastIdx: String    
}
  • sauceflexOnShare(message: String) 
    • // Stringified JSON
{
    linkUrl: String 
}

Android

For Android, if any of the bridges with the name "sauceflex" exist, the message will be sent, and the default behavior will be canceled.

import android.os.Handler
import android.webkit.JavascriptInterface
import android.widget.Toast
 
class AndroidBridge(private val activity: MainActivity) {
    private val handler = Handler()
 
    @JavascriptInterface
    fun sauceflexEnter() {
        handler.post {
            Toast.makeText(activity, "sauceflexEnter", Toast.LENGTH_SHORT).show()
        }
    }
 
    @JavascriptInterface
    fun sauceflexMoveExit() {
        handler.post {
            Toast.makeText(activity, "sauceflexMoveExit", Toast.LENGTH_SHORT).show()
        }
    }
  
   @JavascriptInterface
    fun sauceflexMoveLogin() {
        handler.post {
            Toast.makeText(activity, "sauceflexMoveLogin", Toast.LENGTH_SHORT).show()
        }
    }
 
    @JavascriptInterface
    fun sauceflexMoveProduct(message: String) {
        handler.post {
            Toast.makeText(activity, "sauceflexMoveProduct \\n $message", Toast.LENGTH_SHORT).show()
        }
    }
 
    @JavascriptInterface
    fun sauceflexOnShare(message: String) {
        handler.post {
            Toast.makeText(activity, "sauceflexOnShare \\n $message", Toast.LENGTH_SHORT).show()
        }
    }
  
   @JavascriptInterface
   fun sauceflexPictureInPicture () {
       handler.post {
           Toast.makeText(activity, "sauceflexPictureInPicture \\n $message", Toast.LENNGTH_SHORT).show()
       }
    }
 
    @JavascriptInterface
   fun sauceflexPictureInPictureNoEvent () {
       handler.post {
           Toast.makeText(activity, "sauceflexPictureInPictureNoEvent \\n $message", Toast.LENNGTH_SHORT).show()
       }
    }
 
}

iOS

extension ViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController,
                                    didReceive message: WKScriptMessage) {
        switch (message.name) {
            case "sauceflexEnter":
                print("sauceflexEnter")
                break
 
            case "sauceflexMoveExit":
                print("sauceflexMoveExit")
                break
 
            case "sauceflexMoveLogin":
                print("sauceflexMoveLogin")
                break
 
            case "sauceflexMoveProduct":
                print("sauceflexMoveProduct")
                print(message.body)
                break
 
            case "sauceflexOnShare":
                print("sauceflexOnShare")
                print(message.body)
                break
            
             case "sauceflexPictureInPicture":
                print("sauceflexPictureInPicture")
                print(message.body)
                break
 
             case "sauceflexPictureInPictureNoEvent":
                print("sauceflexPictureInPictureNoEvent")
                print(message.body)
                break
 
            default:
                print("message.name \\(message.name) not handled.")
        }
    }
}

🚦This document contains trade secrets and industrial technologies subject to protection under the Act on Unfair Competition Prevention and Trade Secrets Protection.

🚦Unauthorized disclosure, distribution, copying, or use of all or part of the information contained herein is strictly prohibited.

Updated about 1 year ago