Skip to content

PluginOK
PluginOK

ZorroSoft / PluginOK

通知 1503
Star 12
Fork 2
PluginOK
PluginOK

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 64189e55 编写于 作者: Z zorro
浏览文件
操作

增加RTSP多引擎网页播放器VUE2及VUE3集成范例代码

上级 6ed48fc6
展开全部 隐藏空白更改
内联 并排
Showing with 19498 addition and 0 deletion
Demo/PlayerVue2/.env.development 0 → 100644
浏览文件 @ 64189e55
VUE_APP_API_URL = ''
\ No newline at end of file
Demo/PlayerVue2/.env.production 0 → 100644
浏览文件 @ 64189e55
VUE_APP_API_URL = ''
\ No newline at end of file
Demo/PlayerVue2/babel.config.js 0 → 100644
浏览文件 @ 64189e55
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
'import',
{ libraryName: 'vant', libraryDirectory: 'es', style: true },
'vant'
]
]
};
Demo/PlayerVue2/package-lock.json 0 → 100644
浏览文件 @ 64189e55
此差异已折叠。
Demo/PlayerVue2/package.json 0 → 100644
浏览文件 @ 64189e55
{
"name": "vant-demo-vue2",
"version": "1.0.0",
"description": "Collection of vant demos.",
"author": "neverland <chenjiahan@neverl.com>",
"license": "MIT",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.0",
"core-js": "^3.4.3",
"element-ui": "^2.15.6",
"qs": "^6.9.4",
"vant": "^2.12.30",
"vue": "^2.6.10",
"vue-router": "^3.0.5",
"vuex": "^3.6.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.1.1",
"@vue/cli-plugin-eslint": "^4.1.1",
"@vue/cli-service": "^4.1.1",
"babel-eslint": "^10.0.3",
"babel-plugin-import": "^1.12.0",
"eslint": "^4.19.1",
"eslint-plugin-vue": "^6.0.1",
"less": "^3.8.1",
"less-loader": "^5.0.0",
"postcss-pxtorem": "^5.1.1",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"Android >= 4.0",
"iOS >= 7"
]
}
Demo/PlayerVue2/public/index.html 0 → 100644
浏览文件 @ 64189e55
<!DOCTYPE html>
<html>
<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, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
<title></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
Demo/PlayerVue2/public/vlcframe.html 0 → 100644
浏览文件 @ 64189e55
<!DOCTYPE html>
<html manifest="/websocket.appcache">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>当前页内嵌VLC多媒体播放小程序测试(PluginOK)</title>
<style>
html,body {
margin: 0;
padding: 0;
}
.VLCApplet{
width: 1100px;
height: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<object ID="WrlWS" CLASSID="CLSID:C0971B90-4513-4E2D-A0B6-15B915FE748A" width="0" height="0"></object>
<div id="VLCApplet" class="VLCApplet">
<param ID="2" Play="http://www.zorrosoft.com/Files/PluginOKBrowserApplet.mp4" />
<param ID="3" Play="rtsp://wzh:test123456@192.168.1.8:554/h264/ch1/main/av_stream" Caching="500" />
</div>
</body>
</html>
Demo/PlayerVue2/public/vlcwebplayer.html 0 → 100644
浏览文件 @ 64189e55
<!DOCTYPE html>
<html manifest="/websocket.appcache">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>当前页内嵌VLC Web Player小程序体验(PluginOK)</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
.VLCWebPlayer {
margin: 0;
width: 550px;
height: 500px;
border:none;
}
</style>
</head>
<body>
<object ID="WrlWS" CLASSID="CLSID:C0971B90-4513-4E2D-A0B6-15B915FE748A" width="0" height="0"></object>
<br />
<div id="VLCApplet" class="VLCApplet"></div>
<div id="VLCWebPlayer" class="VLCWebPlayer"></div>
</body>
</html>
Demo/PlayerVue2/src/App.vue 0 → 100644
浏览文件 @ 64189e55
<template>
<div id="app">
<router-view />
</div>
</template>
<style>
body {
-webkit-font-smoothing: antialiased;
padding: 0;
margin: 0;
font-family: 'PingFang SC';
height: 100%;
position: relative;
}
#app {
height: 100%;
padding: 0;
margin: 0;
}
.el-message-box__wrapper{
z-index: 99999999!important;
}
</style>
Demo/PlayerVue2/src/common/base.js 0 → 100644
浏览文件 @ 64189e55
import Vue from "vue";
function GetDefaultConn(port,type) {
/// flag为1代表启用日志输出，系统正式上线后设置0可提高运行速度
/// sid代表本次连接的会话ID，必须保证唯一
let Protocol = location.protocol;
if (Protocol.toUpperCase().indexOf('HTTPS') > -1)
{
/// HTTPS网站，需要申请自己主站下其它地方都不会用到的一个子域名来做SSL证书，如域名在阿里云上，请下载Apache类型的证书并提交给客服制作授权
if(1 == type)
return 'wss://wrl.zorrosoft.com:'+port+'?sid=' + getrandom(5).toLocaleString() + '&flag=1&cid=zorrosoft&tk=8C4560272C8A38C32EF6102CAB6B4D886504F06C63202A316B3FD88381FC5491704DA444156B9F6FDA313843E412F1E1DC414A7899399F14D76688090FC7DCE11DA121CB2B0E819B2B7080DB9CF09D4D66192C5893ABE182DA38DF8A02EFAACB304BF9A242ADEBFAA09FC0304918895DE3B56E30A17AA8D92E3D61C1AC2453E6C1C637C3E260FE9A445EC858BADEB9312A43DD99323EF5D63414B9BC7D3F4004C7E109ADD5A6289ADAB004A2A544D312BB84E467DAC4C9449418F3FCCC9529049DCFD562B77EF2CE429B242C23975E6EA922E0564B6507177187E92F254EC2678A795B5D2EC92F818A7364FB7CA3E553D4F94119F868261E5A0A8E7EBE841CF7'; // 这里注意test.yuanmaster.com替换为自己的子域名
else
return 'wss://wrl.zorrosoft.com:'+port+'?sid=' + getrandom(5).toLocaleString() + '&flag=1'; // 这里注意wrl.zorrosoft.com替换为自己的子域名
}
else
{
/// type为1时代表中间件启用了安全校验模式，需要按文档生成tk，具体方法参考SDK包中的文档：中间件安全解决方案.pdf
if(1 == type)
return 'ws://127.0.0.1:'+port+'?sid=' + getrandom(5).toLocaleString() + '?flag=1&cid=zorrosoft&tk=8C4560272C8A38C32EF6102CAB6B4D886504F06C63202A316B3FD88381FC5491704DA444156B9F6FDA313843E412F1E1DC414A7899399F14D76688090FC7DCE11DA121CB2B0E819B2B7080DB9CF09D4D66192C5893ABE182DA38DF8A02EFAACB304BF9A242ADEBFAA09FC0304918895DE3B56E30A17AA8D92E3D61C1AC2453E6C1C637C3E260FE9A445EC858BADEB9312A43DD99323EF5D63414B9BC7D3F4004C7E109ADD5A6289ADAB004A2A544D312BB84E467DAC4C9449418F3FCCC9529049DCFD562B77EF2CE429B242C23975E6EA922E0564B6507177187E92F254EC2678A795B5D2EC92F818A7364FB7CA3E553D4F94119F868261E5A0A8E7EBE841CF7';
else
return 'ws://127.0.0.1:'+port+'?sid=' + getrandom(5).toLocaleString() + '&flag=1';
}
}
///Vue.prototype.$rules = validate;
// 获取随机数
function getrandom(nums) {
return ('000000' + Math.floor(Math.random() * 999999)).slice(-6);
}
export default GetDefaultConn;
Demo/PlayerVue2/src/common/websocket.js 0 → 100644
浏览文件 @ 64189e55
export default class websocket {
constructor(url, options) {
this.instance = null
this.token = null
this.isConnected = false
this.url = url
this.options = options || this.defaultOptions()
if (this.options) {
this.reconnectEnabled = options.reconnectEnabled || false
if (this.reconnectEnabled) {
this.reconnectInterval = options.reconnectInterval
}
// Token
//this.token = options?.token || null
}
// These methods should be defined by components
this.onOpen = null
this.onMessage = null
this.onClose = null
this.onError = null
}
defaultOptions() {
return {
reconnectEnabled: false,
reconnectInterval: 0,
token: null
}
}
connect() {
const token = this.token || null
let url = this.url
if (token !== null) {
url += `?token=${token}`
}
this.instance = new WebSocket(url)
// Socket event listeners
// Each event handler also calls the corresponding class method,
// which can be defined by the component
this.instance.onopen = () => {
this.isConnected = true
console.log('链接成功')
if (typeof this.onOpen === 'function') {
this.onOpen()
}
}
this.instance.onmessage = (msg) => {
if (typeof this.onMessage === 'function') {
this.onMessage(msg)
}
}
this.instance.onclose = (evt) => {
this.isConnected = false
if (typeof this.onClose === 'function') {
this.onClose(evt)
}
if (this.reconnectEnabled) {
this.reconnect()
}
}
this.instance.onerror = (evt) => {
if (typeof this.onError === 'function') {
this.onError(evt)
}
}
}
disconnect() {
try {
this.instance.close()
} catch (e) {
console.warn(`${e} ${this.instance}`)
}
delete this.instance
}
reconnect() {
try {
this.instance.close()
} catch (e) {
console.warn(`${e} ${this.instance}`)
}
delete this.instance
setTimeout(() => {
this.connect()
}, this.reconnectInterval)
}
sendObj(data) {
if (this.instance.readyState === this.instance.OPEN) {
//若是ws开启状态
this.instance.send(JSON.stringify(data))
} else if (this.instance.readyState === this.instance.CONNECTING) {
// 若是 正在开启状态，则等待1s后重新调用
setTimeout(() => {
this.sendObj(data);
}, 1000);
} else {
// 若未开启 ，则等待1s后重新调用
setTimeout(() => {
this.sendObj(data);
}, 1000);
}
}
removeListeners() {
// removeListeners
this.onOpen = null
this.onMessage = null
this.onClose = null
this.onError = null
}
}
Demo/PlayerVue2/src/main.js 0 → 100644
浏览文件 @ 64189e55
import Vue from 'vue';
import App from './App';
import {
router
} from './router';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
let qs = require('qs');
Vue.prototype.$qs = qs;
new Vue({
router,
el: '#app',
render: h => h(App)
});
Demo/PlayerVue2/src/router.js 0 → 100644
浏览文件 @ 64189e55
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const routes = [{
path: '/',
name: 'index',
component: () => import('./view/index'),
meta: {
title: '首页'
},
}
];
// add route path
routes.forEach(route => {
route.path = route.path || '/' + (route.name || '');
});
const router = new Router({
routes
});
router.beforeEach((to, from, next) => {
const title = to.meta && to.meta.title;
if (title) {
document.title = title;
}
next();
});
export {
router
};
Demo/PlayerVue2/src/view/index.vue 0 → 100644
浏览文件 @ 64189e55
此差异已折叠。
Demo/PlayerVue2/vue.config.js 0 → 100644
浏览文件 @ 64189e55
module.exports = {
outputDir: 'dist',
lintOnSave: false,
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
css: {
},
productionSourceMap: false,
// devServer: {
// proxy: { //配置跨域
// '/api': {
// target:process.env.VUE_APP_API_URL, //这里后台的地址模拟的;应该填写你们真实的后台接口
// changOrigin: true, //允许跨域
// pathRewrite: {
// '^/api': ''
// }
// },
// }
// },
};
Demo/PlayerVue3/index.html 0 → 100644
浏览文件 @ 64189e55
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
Demo/PlayerVue3/package-lock.json 0 → 100644
浏览文件 @ 64189e55
此差异已折叠。
Demo/PlayerVue3/package.json 0 → 100644
浏览文件 @ 64189e55
{
"name": "vue3_cli_default",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"element-plus": "^2.4.4",
"postcss-px-to-viewport": "^1.1.1",
"vue": "^3.4.3",
"vue-router": "^4.2.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.10.2",
"@vue/compiler-sfc": "^3.4.3",
"events": "^3.3.0",
"util": "^0.12.4",
"vite": "^2.9.16"
}
}
Demo/PlayerVue3/src/App.vue 0 → 100644
浏览文件 @ 64189e55
此差异已折叠。
Demo/PlayerVue3/src/common/base.js 0 → 100644
浏览文件 @ 64189e55
function GetDefaultConn(port,type) {
/// flag为1代表启用日志输出，系统正式上线后设置0可提高运行速度
/// sid代表本次连接的会话ID，必须保证唯一
let Protocol = location.protocol;
if (Protocol.toUpperCase().indexOf('HTTPS') > -1)
{
/// HTTPS网站，需要申请自己主站下其它地方都不会用到的一个子域名来做SSL证书，如域名在阿里云上，请下载Apache类型的证书并提交给客服制作授权
if(1 == type)
return 'wss://wrl.zorrosoft.com:'+port+'?sid=' + getrandom(5).toLocaleString() + '&flag=1&cid=zorrosoft&tk=8C4560272C8A38C32EF6102CAB6B4D886504F06C63202A316B3FD88381FC5491704DA444156B9F6FDA313843E412F1E1DC414A7899399F14D76688090FC7DCE11DA121CB2B0E819B2B7080DB9CF09D4D66192C5893ABE182DA38DF8A02EFAACB304BF9A242ADEBFAA09FC0304918895DE3B56E30A17AA8D92E3D61C1AC2453E6C1C637C3E260FE9A445EC858BADEB9312A43DD99323EF5D63414B9BC7D3F4004C7E109ADD5A6289ADAB004A2A544D312BB84E467DAC4C9449418F3FCCC9529049DCFD562B77EF2CE429B242C23975E6EA922E0564B6507177187E92F254EC2678A795B5D2EC92F818A7364FB7CA3E553D4F94119F868261E5A0A8E7EBE841CF7'; // 这里注意test.yuanmaster.com替换为自己的子域名
else
return 'wss://wrl.zorrosoft.com:'+port+'?sid=' + getrandom(5).toLocaleString() + '&flag=1'; // 这里注意wrl.zorrosoft.com替换为自己的子域名
}
else
{
/// type为1时代表中间件启用了安全校验模式，需要按文档生成tk，具体方法参考SDK包中的文档：中间件安全解决方案.pdf
if(1 == type)
return 'ws://127.0.0.1:'+port+'?sid=' + getrandom(5).toLocaleString() + '?flag=1&cid=zorrosoft&tk=8C4560272C8A38C32EF6102CAB6B4D886504F06C63202A316B3FD88381FC5491704DA444156B9F6FDA313843E412F1E1DC414A7899399F14D76688090FC7DCE11DA121CB2B0E819B2B7080DB9CF09D4D66192C5893ABE182DA38DF8A02EFAACB304BF9A242ADEBFAA09FC0304918895DE3B56E30A17AA8D92E3D61C1AC2453E6C1C637C3E260FE9A445EC858BADEB9312A43DD99323EF5D63414B9BC7D3F4004C7E109ADD5A6289ADAB004A2A544D312BB84E467DAC4C9449418F3FCCC9529049DCFD562B77EF2CE429B242C23975E6EA922E0564B6507177187E92F254EC2678A795B5D2EC92F818A7364FB7CA3E553D4F94119F868261E5A0A8E7EBE841CF7';
else
return 'ws://127.0.0.1:'+port+'?sid=' + getrandom(5).toLocaleString() + '&flag=1';
}
}
// 获取随机数
function getrandom(nums) {
return ('000000' + Math.floor(Math.random() * 999999)).slice(-6);
}
export default GetDefaultConn;
Demo/PlayerVue3/src/common/websocket.js 0 → 100644
浏览文件 @ 64189e55
export default class websocket {
constructor(url, options) {
this.instance = null
this.token = null
this.isConnected = false
this.url = url
this.options = options || this.defaultOptions()
if (this.options) {
this.reconnectEnabled = options.reconnectEnabled || false
if (this.reconnectEnabled) {
this.reconnectInterval = options.reconnectInterval
}
// Token
//this.token = options?.token || null
}
// These methods should be defined by components
this.onOpen = null
this.onMessage = null
this.onClose = null
this.onError = null
}
defaultOptions() {
return {
reconnectEnabled: false,
reconnectInterval: 0,
token: null
}
}
connect() {
const token = this.token || null
let url = this.url
if (token !== null) {
url += `?token=${token}`
}
this.instance = new WebSocket(url)
// Socket event listeners
// Each event handler also calls the corresponding class method,
// which can be defined by the component
this.instance.onopen = () => {
this.isConnected = true
if (typeof this.onOpen === 'function') {
this.onOpen()
}
}
this.instance.onmessage = (msg) => {
if (typeof this.onMessage === 'function') {
this.onMessage(msg)
}
}
this.instance.onclose = (evt) => {
this.isConnected = false
if (typeof this.onClose === 'function') {
this.onClose(evt)
}
if (this.reconnectEnabled) {
this.reconnect()
}
}
this.instance.onerror = (evt) => {
if (typeof this.onError === 'function') {
this.onError(evt)
}
}
}
disconnect() {
try {
this.instance.close()
} catch (e) {
console.warn(`${e} ${this.instance}`)
}
delete this.instance
}
reconnect() {
try {
this.instance.close()
} catch (e) {
console.warn(`${e} ${this.instance}`)
}
delete this.instance
setTimeout(() => {
this.connect()
}, this.reconnectInterval)
}
sendObj(data) {
if (this.instance.readyState === this.instance.OPEN) {
//若是ws开启状态
this.instance.send(JSON.stringify(data))
} else if (this.instance.readyState === this.instance.CONNECTING) {
// 若是 正在开启状态，则等待1s后重新调用
setTimeout(() => {
this.sendObj(data);
}, 1000);
} else {
// 若未开启 ，则等待1s后重新调用
setTimeout(() => {
this.sendObj(data);
}, 1000);
}
}
removeListeners() {
// removeListeners
this.onOpen = null
this.onMessage = null
this.onClose = null
this.onError = null
}
}
Demo/PlayerVue3/src/main.js 0 → 100644
浏览文件 @ 64189e55
import {createApp} from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
\ No newline at end of file
Demo/PlayerVue3/vite.config.js 0 → 100644
浏览文件 @ 64189e55
import {
defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
base: './',
css: {},
define: {
'process.env': {},
}
})
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或