This tutorial will help guide users to setup a player using video.js and Livepeer Video Services.
Livepeer is a decentralized video transcoding platform.
Livepeer Video Services makes adding video streaming features into your web3 apps easy. It can handle live streams or video files.
- Register Livepeer.com Video Service Account
- Playback URL which should look like this:
https://livepeercdn.com/hls/a9346mwvhic21vtj/index.m3u8 - OBS (Open Broadcaster System) or webrtmp SDK
- Create a free Livepeer Video Service Account
- Create and name the API Key
-
A modal should popup for you to enter your new stream
-
Click on
Create Streamand your dashboard should look like:
We will be using video.js to view your livepeer video streams from obs (Open Broadcaster System) or webrtmp SDK
- Start your stream using
OBSorwebrtmp SDK
-
Have
OBSsetup
-
Go to sources box and click on the plus Select video capture device
-
Make sure the source has the video capture device
-
Select Stream settings
-
Select
Customfor services -
Copy and paste the RTMP ingest URL and Stream Key
-
RTMP ingest URL Example:
rtmp://rtmp.livepeer.com/live -
Stream key Example:
7d92-zrfi-tqki-lp0x
-
- Click Start Streaming for the
OBS
You can take a look at the codepen
Warnings
-
⚠️ Livepeer dashboard is to check your stream health -
⚠️ So we need to make a player so we can implement it into our own app. -
⚠️ Disclaimer: video will only display when you are active livestreaming
Check out our codepen full source code
The playback URL should look like this: https://livepeercdn.com/hls/1fcae6n18ljto86h/index.m3u8 enter it in the src attribute
Example:
<video-js id=example-video width=960 height=540 class="vjs-default-skin" controls>
<source src="https://livepeercdn.com/hls/1fcae6n18ljto86h/index.m3u8" type="application/x-mpegURL">
</video-js>- Create a folder for your project.
Example:
livepeer-player-sample
mkdir livepeer-player-sample- Create an
index.htmlinside the project folder
cd livepeer-player-sample
touch index.html-
Final code should look like this for implementing video.js with livepeer with the playback url
-
Please replace the
{{ENTER YOUR PLAYBACK URL }}with your own similiar to this:https://livepeercdn.com/hls/1fcae6n18ljto86h/index.m3u8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video.js with Livepeer </title>
<link href="https://vjs.zencdn.net/7.18.1/video-js.css" rel="stylesheet" />
</head>
<body>
<video-js id="livepeer-sample-videojs-player" width=960 height=540 class="vjs-default-skin" controls>
<source src="{{ENTER YOUR PLAYBACK URL}}" type="application/x-mpegURL">
</video-js>
</body>
<script src="https://vjs.zencdn.net/7.18.1/video.min.js"></script>
<script src="https://unpkg.com/@videojs/http-streaming@2.14.2/dist/videojs-http-streaming.min.js"></script>
<script>
var player = videojs('livepeer-sample-videojs-player');
player.play();
</script>
</html>Coming Soon...