zishuo/RTSPtoWEBPlayer
1
0
Fork 0
mirror of https://github.com/vdalex25/rtsp-to-web-player.git synced 2025-09-26 21:01:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

add VUE3 component example

Browse Source
This commit is contained in:
vdalex
2022-04-25 22:12:27 +03:00
parent 6d3f8e4923
commit 6788cbe3a3
9 changed files with 175 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
examples/Vue3Component/README.md Normal file
View File

@@ -0,0 +1,16 @@
# Vue Player Component
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```

5
examples/Vue3Component/babel.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

19
examples/Vue3Component/jsconfig.json Normal file
View File

@@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}

44
examples/Vue3Component/package.json Normal file
View File

@@ -0,0 +1,44 @@
{
"name": "RTSPtoWEBPlayerVue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"rtsptowebplayer": "github:vdalex25/rtsp-to-web-player#v1.0.5"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}

18
examples/Vue3Component/public/index.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

43
examples/Vue3Component/src/App.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<div class="container mt-3">
<h3 class="text-center">Simple Example RTSPtoWEB mediaplayer VUE.JS</h3>
<div class="row">
<div class="col-12">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Type url link here" ref="link">
<button class="btn btn-outline-secondary" type="button" @click="playVideo">PLAY</button>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
PLAYER
</div>
<div class="card-body p-0">
<PlayerVue :link='link'/>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import PlayerVue from "./components/PlayerVue.vue";
export default {
name: 'App',
components: {
PlayerVue
},
data () {
return {
link: ''
}
},
methods:{
playVideo(){
this.link = this.$refs.link.value;
}
}
}
</script>

22
examples/Vue3Component/src/components/PlayerVue.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<div ref="player" />
</template>
<script>
import RTSPtoWEBPlayer from "rtsptowebplayer";
export default {
name: "PlayerVue",
props: ['link'],
mounted: function (){
this.player=new RTSPtoWEBPlayer({
parentElement:this.$refs.player
});
},
updated: function (){
this.player.load(this.link);
},
beforeUnmount:function(){
this.player.destroy()
}
}
</script>

4
examples/Vue3Component/src/main.js Normal file
View File

@@ -0,0 +1,4 @@
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

4
examples/Vue3Component/vue.config.js Normal file
View File

@@ -0,0 +1,4 @@
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})