From 53f9d402cab06b7a4647fa0663be4f1dfaed8a7b Mon Sep 17 00:00:00 2001 From: Yohan Totting Date: Wed, 30 Mar 2022 12:47:56 +0700 Subject: [PATCH 1/2] content: update tutorial and video input --- .../docs/tutorial/app-with-webrtc/index.md | 104 +++++++++++------- content/docs/video-input/index.md | 13 ++- 2 files changed, 74 insertions(+), 43 deletions(-) diff --git a/content/docs/tutorial/app-with-webrtc/index.md b/content/docs/tutorial/app-with-webrtc/index.md index 0a0c4109..4157afd6 100644 --- a/content/docs/tutorial/app-with-webrtc/index.md +++ b/content/docs/tutorial/app-with-webrtc/index.md @@ -112,60 +112,80 @@ async function startStream(){ } ``` -### 3. Initiate the WebRTC connection by sending offer SDP and receiving an answer from inLive API +### 4. Prepare the live stream +For now, we need you to call this `prepare` API endpoint before starting to initiate the WebRTC connection. This is to start your live stream session, and this is where the billing will start counting your live streaming duration. In the future, we will automate the preparation process so the preparation will start automatically once we receive your video ingestion. Let's create a function that will be used to call the `prepare` API endpoint: + +```js +async function prepareStream(slug){ + const url = `${options.origin}/${options.apiVersion}/streams/${slug}`; + try{ + resp = await apiRequest(options.apiKey, url, 'POST'); + if (resp.code !== 200) { + throw new Error('Failed to prepare stream session'); + } + } catch(err) { + console.error(err) + } +} +``` + +### 5. Initiate the WebRTC connection by sending offer SDP and receiving an answer from inLive API Once the video stream input is available, we're ready to send the video stream to Inlive encoder and start publishing our live video stream. To send the video, these are the steps we need to follow: 1. Create `RTCPeerConnection` object and add the media stream tracks to this RTCPeerConnection. This is an important step to make sure the Offer SDP that we will generate will have information about our media tracks, like video and audio codec information. The RTCPeerConnection also will need to have a media track before being able to start the ice gathering process. - We modify the start stream function and adding some lines to send the video through WebRTC connection. + We modify the start stream function and added some lines to send the video through WebRTC connection. We also need to call the `prepare` API endpoint first before start capturing the video camera. ```js async function startStream(){ - const videoEl = document.querySelector('video'); - const constraints = { - video: { - frameRate: 30, - width: 1280, - height: 720, - }, - audio: true - }; - - const localStream = await navigator.mediaDevices.getUserMedia(constraints); - videoEl.srcObject = localStream; - - const servers = { - iceServers: [ - { urls: 'stun:stun.l.google.com:19302' }, - { - urls: 'turn:34.101.121.241:3478', - username: 'username', - credential: 'password' - } - ] - } + try { + // call the prepare endpoint first + await prepareStream('my-first-stream'); + + const videoEl = document.querySelector('video'); + const constraints = { + video: { + frameRate: 30, + width: 1280, + height: 720, + }, + audio: true + }; + + const localStream = await navigator.mediaDevices.getUserMedia(constraints); + videoEl.srcObject = localStream; + + const servers = { + iceServers: [ + { urls: 'stun:stun.l.google.com:19302' }, + { + urls: 'turn:34.101.121.241:3478', + username: 'username', + credential: 'password' + } + ] + } - const peerConnection = new RTCPeerConnection(servers); + const peerConnection = new RTCPeerConnection(servers); - peerConnection.oniceconnectionstatechange = () => { - // handle state change (disconnect, connected) - const iceConnectionState = peerConnection.iceConnectionState; - console.log('iceConnectionState', iceConnectionState); + peerConnection.oniceconnectionstatechange = () => { + // handle state change (disconnect, connected) + const iceConnectionState = peerConnection.iceConnectionState; + console.log('iceConnectionState', iceConnectionState); - } + } - peerConnection.onicecandidate = async (event) => { - // initiate the stream process once ice gathering is finished - if (event.candidate === null) { - await initStream(slug,peerConnection,options); + peerConnection.onicecandidate = async (event) => { + // initiate the stream process once ice gathering is finished + if (event.candidate === null) { + await initStream(slug,peerConnection,options); + } } - } - // we use stream from the webcam that we captured from previous step - localStream.getTracks().forEach((track) => { - peerConnection.addTrack(track, localStream); - }); + // we use stream from the webcam that we captured from previous step + localStream.getTracks().forEach((track) => { + peerConnection.addTrack(track, localStream); + }); - try { const offerSession = await peerConnection.createOffer(); peerConnection.setLocalDescription(offerSession); } catch (err) { @@ -206,7 +226,7 @@ Once the video stream input is available, we're ready to send the video stream t 3. Once the RTCPeerConnection is set with both offer and answer SDP, it will initiate the connection to the remote peer, and the `peerConnection.oniceconnectionstatechange` will be triggered if the connection state is changing. -### 4. Get the video +### 6. Get the video Once we streamed the video from our webcam through WebRTC, we can watch the video by getting the video URL through the stream detail endpoint. Get the stream detail by sending HTTP GET request to the API endpoint `https://api.inlive.app/v1/streams/${streamid}`. Let's create a get stream function that we can call later ```js diff --git a/content/docs/video-input/index.md b/content/docs/video-input/index.md index ca6c0a3b..1b76177a 100644 --- a/content/docs/video-input/index.md +++ b/content/docs/video-input/index.md @@ -14,9 +14,20 @@ menu: --- # Video Input -Inlive is support 2 ways to sending the video source input to our encoder. You can use either WebRTC or RTMP. This page will explain the different between this two and how you can choose which input method that fit with your case. +Inlive is support 2 ways to send the video source input to our encoder. You can use either [WebRTC](https://webrtc.org/)(Web Real Time Communication) or RTMP(Real-Time Messaging Protocol - coming soon). This page will explain the difference between these two and how you can choose which input method fits your case. ## WebRTC +WebRTC is a web standard protocol for video communication that is used by Google Meet. It's a UDP-based network transport by default which is known to reduce latency, but we still can make it work through TCP if needed. The better latency is the main reason why we focus on WebRTC input first instead of the RTMP that is already standard input in the live streaming app. Another reason is WebRTC can work everywhere including in the browser, something that RTMP can't do. With this, we can build a live streaming broadcaster app like OBS but on the web. No need to install anything. + +So if you want to build a live streaming app that can capture the camera on all platforms, not only in the mobile apps but also on the web, then WebRTC is your choice. Check out [our tutorial](/docs/tutorial/tutorial-app-with-webrtc/) on how to capture a camera on the web and send it as a video stream input. For mobiles, there are some tutorials and examples that you can use as well. ## RTMP +RTMP is the most popular standard protocol for live streaming. It was used by Adobe Flash to stream the video from the server to a Flash player. But now RTMP is mostly known as a video input standard for YouTube, Twitch, and other live stream services. The main issue with RTMP is it's not supporting the web. So we can't build a broadcaster client on the web and use it as video stream input like WebRTC can do. And compared with WebRTC, RTMP is using TCP as their network transport. It's more reliable because TCP can guarantee all the network packets will be received by the server. + +## Conclusion +WebRTC and RTMP can be used as a video input protocol for our live stream, but which one you should use? It depends. The main difference between WebRTC and RTMP is the network transport protocol. WebRTC has better latency but can't guarantee reliability, which means you might have better latency but you probably will see some glitch in the video when the broadcaster host internet network is not that good. + +If you're hosting a live stream that doesn't need interactivity, like a live concert, sports event, or any one-way broadcasting where the quality of the video is important and that broadcast usually can be seen on TV as well, then you probably want to use RTMP because it will have a better video quality of the live stream. But if you're hosting an interactive live stream, like a live shopping, trivia quiz, online bidding, or any live stream where the low latency is a must, then WebRTC will be a good option. + +Another consideration is the platform support, if you're thinking to have a broadcaster feature on all platforms including the web, then WebRTC is the only way. RTMP can't be used on a browser, only on native mobile platforms like Android and iOS. Let us know if you still need more insights on which video input to choose. From e84298334b86fb092db1b5429300490367d61e78 Mon Sep 17 00:00:00 2001 From: Yohan Totting Date: Wed, 30 Mar 2022 17:17:41 +0700 Subject: [PATCH 2/2] add blog content and adjust some templates --- content/blog/1-intro-inlive/index.md | 26 ---------------- content/blog/1-lets-go-inlive/index.md | 30 +++++++++++++++++++ content/docs/getting-started/index.md | 2 +- themes/inlive/layouts/blog/single.html | 4 +-- .../layouts/partials/footer/footer.html | 2 +- 5 files changed, 34 insertions(+), 30 deletions(-) delete mode 100644 content/blog/1-intro-inlive/index.md create mode 100644 content/blog/1-lets-go-inlive/index.md diff --git a/content/blog/1-intro-inlive/index.md b/content/blog/1-intro-inlive/index.md deleted file mode 100644 index 66d47aa5..00000000 --- a/content/blog/1-intro-inlive/index.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -# Refer to the themes/inlive/archetypes/README.md -date: 2022-03-08 -lastmod: 2022-03-08 -title : Intro about Inlive -slug : intro-inlive -summary: Aenean sed adipiscing diam donec. Ac turpis egestas sed tempus urna et pharetra pharetra massa. At varius vel pharetra vel turpis. Ullamcorper sit amet risus nullam eget felis eget nunc lobortis. Ullamcorper sit amet risus nullam eget felis eget nunc lobortis. Vel pretium lectus quam id leo in vitae. Blandit turpis cursus in hac. ---- - -# Intro about Inlive - -## What is Inlive - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus. Viverra suspendisse potenti nullam ac. Aenean sed adipiscing diam donec. Ac turpis egestas sed tempus urna et pharetra pharetra massa. At varius vel pharetra vel turpis. Ullamcorper sit amet risus nullam eget felis eget nunc lobortis. Vel pretium lectus quam id leo in vitae. Suscipit tellus mauris a diam maecenas sed enim. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. - -## Our Services - -Blandit turpis cursus in hac. Sollicitudin ac orci phasellus egestas. Augue eget arcu dictum varius duis. Eu mi bibendum neque egestas congue quisque egestas. Elit eget gravida cum sociis. Nisi est sit amet facilisis magna etiam tempor orci. Non odio euismod lacinia at quis risus sed. Enim praesent elementum facilisis leo vel fringilla est ullamcorper eget. In hac habitasse platea dictumst quisque sagittis purus. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. - -## Our Team - -Blandit turpis cursus in hac. Sollicitudin ac orci phasellus egestas. Augue eget arcu dictum varius duis. Eu mi bibendum neque egestas congue quisque egestas. - -- Eu mi bibendum neque egestas. -- Eu mi bibendum neque egestas. -- Eu mi bibendum neque egestas. \ No newline at end of file diff --git a/content/blog/1-lets-go-inlive/index.md b/content/blog/1-lets-go-inlive/index.md new file mode 100644 index 00000000..bd336376 --- /dev/null +++ b/content/blog/1-lets-go-inlive/index.md @@ -0,0 +1,30 @@ +--- +# Refer to the themes/inlive/archetypes/README.md +date: 2022-03-01 +lastmod: 2022-03-01 +title : Let's go Inlive +slug : lets-go-inlive +summary: inLive is going to unlock the live streaming interactions beyond comments and likes. We want to help more startups and developers to build products around live streaming and help us discover new way to interact through live streaming. +--- + +# To unlock the live streaming interactions beyond comments and likes + +Before we started inLive, we saw that live streaming is starting to be more than just game stream, or live shopping. We saw that live stream is a new way to engage and interact with more people, in more scaleable way. But engagement and interaction should'nt stop at comments and likes, there should be more we can do in a live stream. Why not many startups build something around live streaming? + +## Problems in live streaming ecosystem +This the main question that we're trying to answer, why not many startups or developers build something around live streaming and unlock more interaction beyond likes and comments? We know video industry is growing significantly during this pandemic, but mostly the innovation happens only in big companies like YouTube, Netflix, or Twitch. Not many startups really come with an innovation that able to create a new way to interact through a live stream. + +We can't take away our eyes about the live streaming potential in Indonesia. We talked with one of Indonesia tipping platform and we estimated that the total gross merchandise value (GMV) only in live streaming tipping ecosystem in 2021 is around IDR 13,5 billions/month. We believe more money is circulated outside the tipping platform, like in live streaming platform like Twitch. + +Then we asked to several startups why they're not create a live streaming feature, most of them will answer build a live streaming feature is too complicated and too costly to run the server. We understand the complicated part because not many developers build something around live streaming, and so many components will be involved like networks, video encoding process, and delivering the video through CDN. Have you ever broadcasting your own live streaming from your laptop and those laptop fans sounds even harder than the background music you play when you're doing the live streaming? And it make you keep thinking that you need more expensive laptop to do your live streaming better? The same thing with live streaming server, it will need a high specification server to be able encode your live stream and deliver the video in low latency less than 10 seconds. + +## inLive is here as an infrastructure to help you develop your live streaming feature +That's why we come with inLive, an infrastructure as a service to help you focus on the use case of your live streaming and forget the complicated part on the backend. We also want to make sure you can experiment freely on building your first live streaming app, so we provide you a free quota of our service. You don't need to worry about getting expensive bills when no one watch your live stream. To make sure you can develop freely your live streaming without thinking too much about the cost, we're developing our infrastructure to able automate the server so we can charge you only when you running your live streaming. + +We still developing our pricing model because we want to make sure it won't confuse you and ask you to calculate your cost estimation through a pricing calculator. We want to make sure that the cost is predictable for you, no shocking bills if suddenly your live streaming is getting populars. But hey, why not just start developing your live streaming app or build a live streaming feature in your current app while waiting our pricing? + +## A self-serving platform +inLive was started because the developer's pain point. And just like other developers, we don't like when it's required to talk with a representative first just to try the platform. That's why we're focus on the developer experiences, we focus to help developers self-serving them self to develop a live streaming apps or features with our documentations and tutorials. We still working on this, we like to provide you a comprehensive guidelines on using our platform. No need to reach out to us to try our platform, but we're very happy if you like to discuss or ask anything to help you use our platform. + +## Free quota during beta +For this beta, our quota will be based on total streaming durations across your live streams, and you will get 10 hours for free each month. Let us know if you need more. We want to make sure we can help you develop your live streaming use case, so please reach out to our team if you have any questions, requests, or feedback. diff --git a/content/docs/getting-started/index.md b/content/docs/getting-started/index.md index 0f9fd115..8fed37f2 100644 --- a/content/docs/getting-started/index.md +++ b/content/docs/getting-started/index.md @@ -52,4 +52,4 @@ When you send the video source input through WebRTC or RTMP protocol, the Inlive You can choose which format you want to use if you're using your own or an open-source video player. But if you use our embedded HTML player, the player will automatically use low latency Dash if your browser is supported but will fall back to HLS format if not. -Check the play video section in our complete tutorial on using Inlive APIs to get the video and play it in your app. \ No newline at end of file +Check the [play video section in our complete tutorial](/docs/tutorial/app-with-webrtc/#6-get-the-video) on using Inlive APIs to get the video and play it in your app. \ No newline at end of file diff --git a/themes/inlive/layouts/blog/single.html b/themes/inlive/layouts/blog/single.html index ff846ede..bdee4372 100644 --- a/themes/inlive/layouts/blog/single.html +++ b/themes/inlive/layouts/blog/single.html @@ -19,11 +19,11 @@

Try inLive today

- Explore Developer Portal to get up and running with inLive API as easy as count 1-2-3, or create an account in inLive Studio to start live streaming from your browser. + Explore our documentations to get up and running with inLive API as easy as count 1-2-3, or create an account in inLive Studio to start live streaming from your browser.

diff --git a/themes/inlive/layouts/partials/footer/footer.html b/themes/inlive/layouts/partials/footer/footer.html index e17b209a..4f283f6a 100644 --- a/themes/inlive/layouts/partials/footer/footer.html +++ b/themes/inlive/layouts/partials/footer/footer.html @@ -23,7 +23,7 @@ Resources
  • - Developer Portal + Docs