Web, Mobile & Video For The Masses
$whoami
Diana Rodríguez
Google Developer Expert
Microsoft MVP
Auth0 Ambassador
Developer Advocate @ Twitch / AWS
⭐️ https://superdi.dev
🐦 @cotufa82
$whoami-NOT
1972 - ----------- - 2021
API
of
choice
IT'S NOT ROCKET SCIENCE!! (NOT ANYMORE!)
Framework / Language of Choice
- Javascript?
- Native Mobile?
- Complicated Backends?
The Ionic-Vue Recipe
- Starter Template
- Install Requirements
- Create Player Component
- Style your app
- #Boom
The Amazon IVS Recipe
- Create Channel
- Point your stream!
- Add to your app
- #Boom
ionic start hello-ivs tabs --type vue --capacitor
<template>
<div id="container">
<video ref="videoPlayer" class="video-js"></video>
</div>
</template>
<script>
import videojs from 'video.js';
import { registerIVSTech } from 'amazon-ivs-player';
import 'video.js/dist/video-js.css';
export default {
name: 'VideoPlayer',
props: {
name: String
},
data: () => ({
player: null,
videoSource: process.env.VUE_APP_PLAYER_URL,
videoOptions: {
autoplay: true,
controls: true,
techOrder: ["AmazonIVS"],
width: "800"
},
}),
[...]
mounted() {
// register the tech with videojs
console.log(`wasmWorker: ${this.createAbsolutePath('/assets/amazon-ivs-wasmworker.min.js')}`)
registerIVSTech(videojs, {
wasmWorker: this.createAbsolutePath('/assets/amazon-ivs-wasmworker.min.js'),
wasmBinary: this.createAbsolutePath('/assets/amazon-ivs-wasmworker.min.wasm'),
});
// Init the player
this.player = videojs(this.$refs.videoPlayer, this.videoOptions, () => {
console.log('Player is ready to use!');
// play the stream
this.player.src(this.videoSource);
})
},
beforeUnmount() {
// Destroy the player instance
if(this.player) {
this.player.dispose();
}
},
methods: {
createAbsolutePath(assetPath) {
console.log( document.URL );
return new URL(assetPath, document.URL).toString();
},
}
}
</script>
<style scoped>
[...]
MUCHAS GRACIAS!!
@cotufa82
https://superdi.dev
web, mobile & streaming for the masses
By Super Diana
web, mobile & streaming for the masses
- 823