Created
September 10, 2023 21:27
-
-
Save 3Kmfi6HP/d40f8a92447834230430e9b6616ec235 to your computer and use it in GitHub Desktop.
Stream Video using IPFS!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Video Streaming</title> | |
| <meta charset="UTF-8" /> | |
| </head> | |
| <body> | |
| <video id="video" controls></video> | |
| <div id="modal"><span id="errorText">error!</span></div> | |
| <script src="https://unpkg.com/ipfs@0.41.0-rc.2/dist/index.min.js"></script> | |
| <script src="https://unpkg.com/hlsjs-ipfs-loader@0.2.3/dist/index.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> | |
| <script src="src/streaming.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Setting HLS Config values | |
| Hls.DefaultConfig.loader = HlsjsIpfsLoader | |
| Hls.DefaultConfig.debug = false | |
| async function P2PMagic () { | |
| if (!Hls.isSupported()) { | |
| return displayError(new Error('Your Browser does not support the HTTP Live Streaming Protocol')) | |
| } | |
| const video = document.getElementById('video') | |
| const bigBuckBunnyCID = 'QmdpAidwAsBGptFB3b6A9Pyi5coEbgjHrL3K2Qrsutmj9K' | |
| // Create an IPFS node inside your browser | |
| let node; | |
| // Init a new repo for this run | |
| const repoPath = 'ipfs-' + Math.random() | |
| try { | |
| // Instatiate your IPFS node | |
| node = await Ipfs.create({ repo: repoPath }) | |
| } catch(err) { | |
| displayError(err) | |
| } | |
| const hls = new Hls() | |
| hls.config.ipfs = node | |
| hls.config.ipfsHash = bigBuckBunnyCID | |
| hls.loadSource('master.m3u8') | |
| hls.attachMedia(video) | |
| hls.on(Hls.Events.MANIFEST_PARSED, () => video.play()) | |
| } | |
| function displayError(err) { | |
| const modalElement = document.getElementById('modal'); | |
| modalElement.style.display = 'flex'; | |
| const errStr = String(err).toLowerCase(); | |
| const spanElement = document.getElementById('errorText'); | |
| spanElement.innerHTML = errorStr.includes('SecurityError'.toLowerCase()) | |
| ? 'You must use Chrome or Firefox to test this embedded app!' | |
| : 'Something went wrong. See the console to get further details.'; | |
| } | |
| P2PMagic() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| position: relative; | |
| width: 100%; | |
| min-height: 100vh; | |
| margin: 0; | |
| } | |
| #modal { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| background: rgba(0, 0, 0, 0.85); | |
| justify-content: center; | |
| display: none; | |
| } | |
| #modal span { | |
| color: white; | |
| font-family: Arial; | |
| height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment