Skip to content

PluginOK
PluginOK

ZorroSoft / PluginOK

通知 1503
Star 12
Fork 2
PluginOK
PluginOK

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

提交 641f096e 编写于 作者: Z zorro
浏览文件
操作

增加Vlc网页播放器VUE3范例及修改升级提示文字等

上级 64189e55
展开全部 隐藏空白更改
内联 并排
Showing with 59745 addition and 66 deletion
Demo/OfficeVue2/src/view/index.vue
浏览文件 @ 641f096e
......@@ -114,7 +114,9 @@
components: {
},
data() {
data()
{
return {
aid: 0, // 第一个办公网页组件实例ID
aid2: 0, // 第二个办公网页组件实例ID
......@@ -148,11 +150,13 @@
result: [] //日志结果数组
}
},
computed: {
DebugLog() {
return this.result.join("\n")
}
},
mounted(){
//初始化配置
this.init()
......@@ -162,13 +166,16 @@
_this.pageResize()
}
},
destroyed(){
window.onresize = null
},
beforeDestroy() {
//关闭所有websocket链接以及浏览器监听
this.close()
},
methods: {
init() {
//监听浏览器切换标签页面
......@@ -185,6 +192,7 @@
//先获取本机Office软件安装信息
this.GetOfficeInfo()
},
windowScroll() {
// 滚动条距离页面顶部的距离
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
......@@ -193,6 +201,7 @@
if (this.aid2 > 0)
this.appScroll(2, this.aid2, scrollTop)
},
appScroll(si, id, scrollTop) {
if(id)
{
......@@ -214,6 +223,7 @@
this.socket[si].sendObj(msg)
}
},
GetAppletPosition() {
//获取网页组件位置节点信息
let nScrollTop = 0
......@@ -243,6 +253,7 @@
this.left = Math.round(react.left) + nScrollLeft
this.top = Math.round(react.top) + nScrollTop
},
handleVisiable(e) {
//浏览器页面切换侦听回调函数
if (e.target.visibilityState == 'hidden') {
......@@ -253,22 +264,26 @@
this.showApp()
}
},
hasVerticalScrollbar(){
if(document.documentElement.clientHeight)
return document.body.scrollHeight > document.documentElement.clientHeight
return document.body.scrollHeight > window.innerHeight
},
hasHorizontalScrollbar(){
if(document.documentElement.clientWidth)
return document.body.scrollWidth > document.documentElement.clientWidth
return document.body.scrollWidth > window.innerWidth
},
pageResize(){
if(this.aid > 0)
this.SendScrollInfo(0,this.aid)
if(this.aid2 > 0)
this.SendScrollInfo(2,this.aid2)
},
SendScrollInfo(si,id){
let nScrollTop = 0
let nScrollLeft = 0
......@@ -314,10 +329,12 @@
console.log(msg)
this.socket[si].sendObj(msg)
},
unloadHandler() {
//关闭所有websoket链接
this.close()
},
close() {
//关闭网页组件实例
this.CloseAllApplet()
......@@ -336,6 +353,7 @@
//关闭侦听滚动条
window.removeEventListener('unload', this.unloadHandler,false)
},
GetOfficeInfo()
{
this.isConnService = true
......@@ -357,6 +375,7 @@
}
this.socket[0].sendObj(msg)
},
StartOfficeApplet() {
//启动第一个办公网页组件
// Web节点中参数可自行配置，目前支持这些参数：
......@@ -389,6 +408,7 @@
}
this.socket[0].sendObj(msg)
},
openSecondApplet() {
if(this.aid)
{
......@@ -437,6 +457,7 @@
this.$message.success('请先启动第一个网页组件')
}
},
CloseSecondApplet() {
if (this.StartSecond) {
this.isDisConnect = true
......@@ -458,6 +479,7 @@
this.resize(0)
}
},
CloseFirstApplet()
{
if (this.aid > 0)
......@@ -484,6 +506,7 @@
this.isDisConnect = false
}
},
AppletFullEdit()
{
this.rid++ // 增加请求序号
......@@ -497,6 +520,7 @@
else
this.socket[1].sendObj(msg)
},
ReLoadFirst()
{
this.CloseFirstApplet()
......@@ -525,6 +549,7 @@
}
this.socket[0].sendObj(Msg)
},
CloseAllApplet()
{
/// 先关闭第二个实例，否则socket中保存的连接序号会不正常
......@@ -679,17 +704,18 @@
if(!this.ReStartLoad && this.isConnService && !this.isDisConnect)
{
//连接不上，认为还没有安装办公网页组件 没有安装时提示安装
this.$confirm('PageHi办公网页组件 尚未安装，是否马上下载？', '提示', {
this.$confirm('PageHi办公网页组件 服务端口连接失败，可能是尚未安装，是否马上下载安装？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
window.open('http://local.zorrosoft.com/Files/PageHiOfficeIns.exe') // 建议改为zip等格式下载，解压后安装，EXE格式浏览器会提示是否保留
window.open('http://local.zorrosoft.com/Files/PageHiOfficeIns.exe') // 建议打包为zip等格式下载，解压后安装，EXE文件下载浏览器会提示是否保留
}).catch(() => {
})
}
}
},
resize(position) {
//请求改变网页组件实例显示位置或大小，如不需要改变显示位置，不传X和Y
if(this.aid2 > 0 && this.aid2 == this.curID){
......@@ -772,6 +798,7 @@
else
this.socket[1].sendObj(msg)
},
AddMark()
{
// 请求插入书签
......@@ -786,6 +813,7 @@
else
this.socket[1].sendObj(msg)
},
MarkRePlace()
{
// 请求替换书签内容
......@@ -800,6 +828,7 @@
else
this.socket[1].sendObj(msg)
},
InsertDJSign()
{
// 请求电子签章 Type默认0 支持北京点聚签章系统
......@@ -814,6 +843,7 @@
else
this.socket[1].sendObj(msg)
},
SaveFile()
{
// 请求保存文档
......@@ -828,6 +858,7 @@
else
this.socket[1].sendObj(msg)
},
SaveAsFile()
{
this.rid++ // 增加请求序号
......@@ -847,6 +878,7 @@
else
this.socket[0].sendObj(msg)
},
BeginSaveAsFile(LocalFilePath)
{
// 请求开始另存文档
......@@ -863,6 +895,7 @@
else
this.socket[1].sendObj(msg)
},
ExpportFile()
{
// 请求导出文档
......@@ -883,6 +916,7 @@
else
this.socket[0].sendObj(msg)
},
BeginExpportFile(LocalFilePath)
{
// 请求开始另存文档
......@@ -899,6 +933,7 @@
else
this.socket[1].sendObj(msg)
},
InsertImg()
{
// 请求当前光标位置插入图片 先让用户选择图片文件
......@@ -919,6 +954,7 @@
else
this.socket[0].sendObj(msg)
},
BeginInsertImg(LocalFilePath)
{
// Save为1时自动保存文档
......@@ -937,6 +973,7 @@
else
this.socket[1].sendObj(msg)
},
GetFirstImg()
{
// 提取文档中页码序号Index的图片，先设置图片保存位置
......@@ -956,6 +993,7 @@
else
this.socket[0].sendObj(msg)
},
BeginGetFirstImg(LocalFilePath)
{
// 提取文档中序号Index的Base64编码数据，如指定本地保存文件名File，则保存到本地文件中
......@@ -987,6 +1025,7 @@
else
this.socket[1].sendObj(msg)
},
ConvertFirstPage()
{
// 转换文档中序号为Index页码内容成图片，先设置转换图片存放位置
......@@ -1006,6 +1045,7 @@
else
this.socket[0].sendObj(msg)
},
BeginConvertFirstPage(LocalFilePath)
{
// 转换文档中页码序号Index的Base64编码数据，如指定本地保存文件名File，则保存到本地文件中
......@@ -1037,6 +1077,7 @@
else
this.socket[1].sendObj(msg)
},
PrintFile()
{
// 请求打印当前文档
......@@ -1054,6 +1095,7 @@
else
this.socket[1].sendObj(msg)
},
EnableRevision()
{
// 请求留痕，就是修订模式
......@@ -1071,6 +1113,7 @@
this.socket[1].sendObj(msg)
IsRevision = true
},
DisableRevision()
{
// 关闭留痕，就是关闭修订模式
......@@ -1088,6 +1131,7 @@
this.socket[1].sendObj(msg)
IsRevision = false
},
ShowRevision()
{
// 显示留痕信息，就是显示修订内容
......@@ -1104,6 +1148,7 @@
else
this.socket[1].sendObj(msg)
},
AcceptRevision()
{
// 接受留痕，就是接受修订内容
......@@ -1120,6 +1165,7 @@
else
this.socket[1].sendObj(msg)
},
changeOpen() {
//重新打开文档
this.rid++ // 增加请求序号
......@@ -1135,6 +1181,7 @@
else
this.socket[1].sendObj(msg)
},
showApp() {
//显示办公网页组件
if (this.aid > 0) {
......@@ -1163,6 +1210,7 @@
this.socket[2].sendObj(msg)
}
},
hideApp(code) {
//隐藏办公网页组件 Code设置4是自动隐藏，如需强制隐藏，设置为32
if (this.aid > 0)
......@@ -1193,6 +1241,7 @@
this.socket[2].sendObj(msg)
}
},
CheckUpdate() {
//校验中间件版本是不是需要升级,如果额外指定PID参数，代表校验PID代表的网页组件，Wrl_Version功能多
this.rid++ // 增加请求序号
......@@ -1205,6 +1254,7 @@
}
this.socket[0].sendObj(msg)
},
SendUpdateJson() {
// 发送中间件的升级命令，实现自动升级，同时升级微软及金山办公等网页组件
// 注意：Wrl_Update中的请求参数如MD5 TK Size等，请根据文档“中间件制作升级包说明.pdf”中的打包工具生成
......
Demo/OfficeVue3/src/App.vue
浏览文件 @ 641f096e
......@@ -144,9 +144,11 @@ let isConnService = false //是否连接的中间件服务
let isDisConnect = false // 是否处于断开连接过程
let socket =[] //websocket对象数组，采用数组需要注意维护索引号，建议改为根据连接的SID参数存到对应的集合，需要用到连接时根据SID提取
let result = reactive([]) //日志结果数组
const DebugLog = computed(() => {
return result.join("\n")
})
onMounted(()=>{
//初始化配置
init()
......@@ -155,11 +157,13 @@ onMounted(()=>{
pageResize()
}
})
onUnmounted(()=>{
//关闭所有websocket链接以及浏览器监听
close()
window.onresize = null
})
function init() {
//监听浏览器切换标签页面
if(document.addEventListener)
......@@ -175,6 +179,7 @@ function init() {
//先获取本机Office软件安装信息
GetOfficeInfo()
}
function windowScroll() {
// 滚动条距离页面顶部的距离
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
......@@ -183,6 +188,7 @@ function windowScroll() {
if (aid2 > 0)
appScroll(2, aid2, scrollTop)
}
function appScroll(si, id, scrollTop) {
if(id)
{
......@@ -204,6 +210,7 @@ function appScroll(si, id, scrollTop) {
socket[si].sendObj(msg)
}
}
function GetAppletPosition() {
//获取网页组件位置节点信息
let nScrollTop = 0
......@@ -236,6 +243,7 @@ function GetAppletPosition() {
width.value = Math.round(react.width)
height.value = Math.round(react.height)
}
function handleVisiable(e) {
//浏览器页面切换侦听回调函数
if (e.target.visibilityState == 'hidden') {
......@@ -246,22 +254,26 @@ function handleVisiable(e) {
showApp()
}
}
function hasVerticalScrollbar(){
if(document.documentElement.clientHeight)
return document.body.scrollHeight > document.documentElement.clientHeight
return document.body.scrollHeight > window.innerHeight
}
function hasHorizontalScrollbar(){
if(document.documentElement.clientWidth)
return document.body.scrollWidth > document.documentElement.clientWidth
return document.body.scrollWidth > window.innerWidth
}
function pageResize(){
if(aid > 0)
SendScrollInfo(0,aid)
if(aid2 > 0)
SendScrollInfo(2,aid2)
}
function SendScrollInfo(si,id){
let nScrollTop = 0
let nScrollLeft = 0
......@@ -307,10 +319,12 @@ function SendScrollInfo(si,id){
console.log(msg)
socket[si].sendObj(msg)
}
function unloadHandler() {
//关闭所有websoket链接
close()
}
function close() {
//关闭网页组件实例
CloseAllApplet()
......@@ -329,6 +343,7 @@ function close() {
//关闭侦听滚动条
window.removeEventListener('unload', unloadHandler,false)
}
function GetOfficeInfo()
{
isConnService = true
......@@ -349,8 +364,8 @@ function GetOfficeInfo()
"para": {}
}
socket[0].sendObj(msg)
}
function StartOfficeApplet() {
//启动第一个办公网页组件
// Web节点中参数可自行配置，目前支持这些参数：
......@@ -384,6 +399,7 @@ function StartOfficeApplet() {
console.log(msg)
socket[0].sendObj(msg)
}
function openSecondApplet() {
if(aid)
{
......@@ -432,6 +448,7 @@ function openSecondApplet() {
ElMessage('请先启动第一个网页组件')
}
}
function CloseSecondApplet() {
if (StartSecond.value) {
isDisConnect = true
......@@ -453,6 +470,7 @@ function CloseSecondApplet() {
resize(0)
}
}
function CloseFirstApplet()
{
if (aid > 0)
......@@ -479,6 +497,7 @@ function CloseFirstApplet()
isDisConnect = false
}
}
function AppletFullEdit()
{
rid++ // 增加请求序号
......@@ -492,6 +511,7 @@ function AppletFullEdit()
else
socket[1].sendObj(msg)
}
function ReLoadFirst()
{
CloseFirstApplet()
......@@ -520,6 +540,7 @@ function ReLoadFirst()
}
socket[0].sendObj(Msg)
}
function CloseAllApplet()
{
/// 先关闭第二个实例，否则socket中保存的连接序号会不正常
......@@ -675,18 +696,19 @@ function openWebsocket(port,type) {
// 避免IE中点击重复播放及firefox断开连接提示等问题
if(!ReStartLoad && isConnService && !isDisConnect)
{
//连接不上，认为还没有安装办公网页组件 没有安装时提示安装
ElMessageBox.confirm('PageHi办公网页组件 尚未安装，是否马上下载？', '提示', {
// 连接不上，认为还没有安装PageHiOffice 没有安装时提示安装
ElMessageBox.confirm('PageHiOffice-佐罗软件Office网页组件 服务端口连接失败，可能是尚未安装，是否马上下载安装？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
window.open('http://local.zorrosoft.com/Files/PageHiOfficeIns.exe') // 建议改为zip等格式下载，解压后安装，EXE格式浏览器会提示是否保留
window.open('http://local.zorrosoft.com/Files/PageHiOfficeIns.exe') // 建议打包为zip等格式下载，解压后安装，EXE文件下载浏览器会提示是否保留
}).catch(() => {
})
}
}
}
function resize(position) {
//请求改变网页组件实例显示位置或大小，如不需要改变显示位置，不传X和Y
if(aid2 > 0 && aid2 == curID){
......@@ -730,7 +752,7 @@ function resize(position) {
"ID": aid,
"X": left.value,
"Y": top.value,
"Width": width,
"Width": width.value,
"Height": height.value
}
}
......@@ -751,6 +773,7 @@ function resize(position) {
}
}
}
function InsertContent()
{
// 请求插入指定的文字或链接
......@@ -768,6 +791,7 @@ function InsertContent()
else
socket[1].sendObj(msg)
}
function AddMark()
{
// 请求插入书签
......@@ -782,6 +806,7 @@ function AddMark()
else
socket[1].sendObj(msg)
}
function MarkRePlace()
{
// 请求替换书签内容
......@@ -796,6 +821,7 @@ function MarkRePlace()
else
socket[1].sendObj(msg)
}
function InsertDJSign()
{
// 请求电子签章 Type默认0 支持北京点聚签章系统
......@@ -810,6 +836,7 @@ function InsertDJSign()
else
socket[1].sendObj(msg)
}
function SaveFile()
{
// 请求保存文档
......@@ -824,6 +851,7 @@ function SaveFile()
else
socket[1].sendObj(msg)
}
function SaveAsFile()
{
rid++ // 增加请求序号
......@@ -843,6 +871,7 @@ function SaveAsFile()
else
socket[0].sendObj(msg)
}
function BeginSaveAsFile(LocalFilePath)
{
// 请求开始另存文档
......@@ -859,6 +888,7 @@ function BeginSaveAsFile(LocalFilePath)
else
socket[1].sendObj(msg)
}
function ExpportFile()
{
// 请求导出文档
......@@ -879,6 +909,7 @@ function ExpportFile()
else
socket[0].sendObj(msg)
}
function BeginExpportFile(LocalFilePath)
{
// 请求开始另存文档
......@@ -895,6 +926,7 @@ function BeginExpportFile(LocalFilePath)
else
socket[1].sendObj(msg)
}
function InsertImg()
{
// 请求当前光标位置插入图片 先让用户选择图片文件
......@@ -915,6 +947,7 @@ function InsertImg()
else
socket[0].sendObj(msg)
}
function BeginInsertImg(LocalFilePath)
{
// Save为1时自动保存文档
......@@ -933,6 +966,7 @@ function BeginInsertImg(LocalFilePath)
else
socket[1].sendObj(msg)
}
function GetFirstImg()
{
// 提取文档中页码序号Index的图片，先设置图片保存位置
......@@ -952,6 +986,7 @@ function GetFirstImg()
else
socket[0].sendObj(msg)
}
function BeginGetFirstImg(LocalFilePath)
{
// 提取文档中序号Index的Base64编码数据，如指定本地保存文件名File，则保存到本地文件中
......@@ -983,6 +1018,7 @@ function BeginGetFirstImg(LocalFilePath)
else
socket[1].sendObj(msg)
}
function ConvertFirstPage()
{
// 转换文档中序号为Index页码内容成图片，先设置转换图片存放位置
......@@ -1002,6 +1038,7 @@ function ConvertFirstPage()
else
socket[0].sendObj(msg)
}
function BeginConvertFirstPage(LocalFilePath)
{
// 转换文档中页码序号Index的Base64编码数据，如指定本地保存文件名File，则保存到本地文件中
......@@ -1033,6 +1070,7 @@ function BeginConvertFirstPage(LocalFilePath)
else
socket[1].sendObj(msg)
}
function PrintFile()
{
// 请求打印当前文档
......@@ -1050,6 +1088,7 @@ function PrintFile()
else
socket[1].sendObj(msg)
}
function EnableRevision()
{
// 请求留痕，就是修订模式
......@@ -1067,6 +1106,7 @@ function EnableRevision()
socket[1].sendObj(msg)
IsRevision.value = true
}
function DisableRevision()
{
// 关闭留痕，就是关闭修订模式
......@@ -1084,6 +1124,7 @@ function DisableRevision()
socket[1].sendObj(msg)
IsRevision.value = false
}
function ShowRevision()
{
// 显示留痕信息，就是显示修订内容
......@@ -1100,6 +1141,7 @@ function ShowRevision()
else
socket[1].sendObj(msg)
}
function AcceptRevision()
{
// 接受留痕，就是接受修订内容
......@@ -1116,6 +1158,7 @@ function AcceptRevision()
else
socket[1].sendObj(msg)
}
function changeOpen() {
//重新打开文档
rid++ // 增加请求序号
......@@ -1131,6 +1174,7 @@ function changeOpen() {
else
socket[1].sendObj(msg)
}
function showApp() {
//显示办公网页组件
if (aid > 0) {
......@@ -1159,6 +1203,7 @@ function showApp() {
socket[2].sendObj(msg)
}
}
function hideApp(code) {
//隐藏办公网页组件 Code设置4是自动隐藏，如需强制隐藏，设置为32
if (aid > 0)
......@@ -1189,6 +1234,7 @@ function hideApp(code) {
socket[2].sendObj(msg)
}
}
function CheckUpdate() {
//校验中间件版本是不是需要升级,如果额外指定PID参数，代表校验PID代表的网页组件，Wrl_Version功能多
rid++ // 增加请求序号
......@@ -1201,6 +1247,7 @@ function CheckUpdate() {
}
socket[0].sendObj(msg)
}
function SendUpdateJson() {
// 发送中间件的升级命令，实现自动升级，同时升级微软及金山办公等网页组件
// 注意：Wrl_Update中的请求参数如MD5 TK Size等，请根据文档“中间件制作升级包说明.pdf”中的打包工具生成，此处举例的升级包是在线公测版的，正式版需要自己制作
......@@ -1225,6 +1272,7 @@ function SendUpdateJson() {
}
socket[0].sendObj(msg)
}
</script>
<style scoped>
.mainContainer {
......
Demo/PlayerVue2/src/view/index.vue
浏览文件 @ 641f096e
......@@ -186,11 +186,14 @@
import GetDefaultConn from "../common/base.js"
//加载websoket类
import websocket from '../common/websocket'
export default {
components: {
},
data() {
data()
{
return {
aid: 0, // 第一个播放实例实例ID
aid2: 0, // 保存启动的第二个播放实例ID
......@@ -234,11 +237,13 @@
version: '2.2.12.3' //版本信息
}
},
computed: {
DebugLog() {
return this.result.join("\n")
}
},
mounted(){
//初始化配置
this.init()
......@@ -248,14 +253,18 @@
_this.pageResize()
}
},
destroyed(){
window.onresize = null
},
beforeDestroy() {
//关闭所有websocket链接以及浏览器监听
this.close()
},
methods: {
methods:
{
init() {
//监听浏览器切换标签页面
if(document.addEventListener)
......@@ -272,6 +281,7 @@
this.StartRtspPlayer()
},
windowScroll() {
// 滚动条距离页面顶部的距离
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
......@@ -280,6 +290,7 @@
if (this.aid2 > 0)
this.appScroll(2, this.aid2, scrollTop)
},
appScroll(si, id, scrollTop) {
if(id)
{
......@@ -301,6 +312,7 @@
this.socket[si].sendObj(msg)
}
},
getPlayerPosition() {
//获取播放器位置节点信息
let nScrollTop = 0
......@@ -330,6 +342,7 @@
this.left = Math.round(react.left) + nScrollLeft
this.top = Math.round(react.top) + nScrollTop
},
handleVisiable(e) {
//浏览器页面切换侦听回调函数
if (e.target.visibilityState == 'hidden') {
......@@ -340,22 +353,26 @@
this.showApp()
}
},
hasVerticalScrollbar(){
if(document.documentElement.clientHeight)
return document.body.scrollHeight > document.documentElement.clientHeight
return document.body.scrollHeight > window.innerHeight
},
hasHorizontalScrollbar(){
if(document.documentElement.clientWidth)
return document.body.scrollWidth > document.documentElement.clientWidth
return document.body.scrollWidth > window.innerWidth
},
pageResize(){
if(this.aid > 0)
this.SendScrollInfo(0,this.aid)
if(this.aid2 > 0)
this.SendScrollInfo(2,this.aid2)
},
SendScrollInfo(si,id){
let nScrollTop = 0
let nScrollLeft = 0
......@@ -401,10 +418,12 @@
console.log(msg)
this.socket[si].sendObj(msg)
},
unloadHandler() {
//关闭所有websoket链接
this.close()
},
close() {
//关闭播放器
this.CloseAllPlayer()
......@@ -423,6 +442,7 @@
//关闭侦听滚动条
window.removeEventListener('unload', this.unloadHandler,false)
},
StartRtspPlayer() {
this.isConnService = true
//启动第一个多引擎网页小程序 Open为播放源，播放源也可以放到Web节点中，参考RePlayFirst中实现，差异在于，Open中指定对所有分屏有效，而在Web节点中可指定更多播放参数
......@@ -461,6 +481,7 @@
}
this.socket[0].sendObj(msg)
},
openSecondPlayer() {
if(this.aid)
{
......@@ -508,6 +529,7 @@
this.$message.success('请先启动第一个播放器')
}
},
CloseSecondPlayer() {
if (this.StartSecond) {
this.isDisConnect = true
......@@ -529,6 +551,7 @@
this.resize(0)
}
},
CloseFirstPlayer()
{
if (this.aid > 0)
......@@ -555,6 +578,7 @@
this.isDisConnect = false
}
},
RePlayFirst()
{
this.CloseFirstPlayer()
......@@ -584,12 +608,14 @@
}
this.socket[0].sendObj(Msg)
},
CloseAllPlayer()
{
/// 先关闭第二个实例，否则socket连接序号会错
this.CloseSecondPlayer()
this.CloseFirstPlayer()
},
StopSecondPlayer()
{
if (this.StartSecond)
......@@ -616,6 +642,7 @@
this.socket[3].sendObj(msg)
}
},
StopFirstPlayer()
{
if (this.aid > 0)
......@@ -657,11 +684,13 @@
this.socket[1].sendObj(msg)
}
},
StopAllPlay()
{
this.StopSecondPlayer()
this.StopFirstPlayer()
},
openWebsocket(port,type) {
//打开websocket服务
let ws = GetDefaultConn(port,type)
......@@ -791,18 +820,19 @@
if(!this.ReStartPlay && this.isConnService && !this.isDisConnect)
{
//连接不上，认为还没有安装VLC网页播放程序 没有安装时提示安装
this.$confirm('RTSP多引擎网页播放器 尚未安装，是否马上下载？', '提示', {
this.$confirm('RTSP多引擎网页播放器 服务端口连接失败，可能尚未安装，是否马上下载安装？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
window.open('http://local.zorrosoft.com/Files/RtspWebPlayerIns.exe') // 建议改为zip等格式下载，解压后安装，EXE格式浏览器会提示是否保留
window.open('http://local.zorrosoft.com/Files/RtspWebPlayerIns.exe') // 建议打包为zip等格式下载，解压后安装，EXE文件下载浏览器会提示是否保留
}).catch(() => {
})
}
}
},
resize(position) {
//请求改变播放实例小程序显示位置或大小，如不需要改变显示位置，不传X和Y
if(this.aid2 > 0 && this.aid2 == this.curID){
......@@ -867,6 +897,7 @@
}
}
},
getCapture() {
//请求截图，固定请求ID处理，也可以是建立一个map记录每个rid对应的含义，请求返回里再处理
let msg = {
......@@ -888,6 +919,7 @@
else
this.socket[1].sendObj(msg)
},
setText() {
//发送字幕到指定的窗口ID
this.rid++ // 增加请求序号
......@@ -912,6 +944,7 @@
else
this.socket[1].sendObj(msg)
},
setType() {
//动态改变屏幕数量
this.rid++ // 增加请求序号
......@@ -928,6 +961,7 @@
else
this.socket[1].sendObj(msg)
},
NextFrame()
{
//请求显示下一帧 请求后播放进入暂停状态，可继续请求下一帧，或请求播放恢复正常播放状态
......@@ -946,6 +980,7 @@
else
this.socket[1].sendObj(msg)
},
PlayPause()
{
//请求播放进入暂停状态
......@@ -964,6 +999,7 @@
else
this.socket[1].sendObj(msg)
},
PlayContinue()
{
//请求播放继续，或请求播放恢复正常播放状态
......@@ -982,6 +1018,7 @@
else
this.socket[1].sendObj(msg)
},
PlayMute()
{
// 设置选中分屏窗口视频静音,1静音 0不静音
......@@ -1000,6 +1037,7 @@
else
this.socket[1].sendObj(msg)
},
PlaySpeed()
{
// 调整播放速度,仅限于文件或回放流，支持批量操作，当前演示针对选中分屏窗口设置2倍数播放
......@@ -1018,6 +1056,7 @@
else
this.socket[1].sendObj(msg)
},
PlayFullScreen()
{
// 设置选中分屏窗口全屏显示 全屏后按ESC 字幕F\、双击或点击工具栏全屏图标可退出全屏状态
......@@ -1035,6 +1074,7 @@
else
this.socket[1].sendObj(msg)
},
SetSelWnd() {
//设置选中分屏子窗口
this.rid++ // 增加请求序号
......@@ -1054,6 +1094,7 @@
else
this.socket[1].sendObj(msg)
},
AppletSnap() {
// 整个播放窗口抓图，包含所有分屏子窗口，发送到中间件侦听端口执行
this.rid++ // 增加请求序号
......@@ -1072,6 +1113,7 @@
else
this.socket[0].sendObj(msg)
},
FullApplet() {
// 整个播放窗口全屏，包含所有分屏子窗口，发送到中间件侦听端口执行
this.rid++ // 增加请求序号
......@@ -1089,6 +1131,7 @@
else
this.socket[0].sendObj(msg)
},
RecordToFile() {
//对指定的窗口ID进行录像 固定请求ID处理，也可以是建立一个map记录每个rid对应的含义，请求返回里再处理
if (this.isRecordFile) {
......@@ -1122,6 +1165,7 @@
this.socket[0].sendObj(msg)
}
},
BeginRecordFile(LocalFilePath)
{
let msg = {
......@@ -1141,6 +1185,7 @@
else
this.socket[1].sendObj(msg)
},
watermask() {
//对指定的窗口ID发送水印，只支持VLC引擎播放，其它引擎播放，可采用叠加透明网页的方式，参考FloatWebInfo的实现
this.rid++ // 增加请求序号
......@@ -1162,6 +1207,7 @@
else
this.socket[1].sendObj(msg)
},
changePlay() {
//动态改变指定的窗口ID的播放源，Player_ChangePlay本身支持同时改变多个分屏窗口播放源，Play支持传数组 ForceDestroy指定是否先销毁原来播放引擎 默认不销毁
this.rid++ // 增加请求序号
......@@ -1257,6 +1303,7 @@
else
this.socket[1].sendObj(msg)
},
FloatWebInfo() {
//对指定的窗口ID叠加网页内容显示
this.rid++ // 增加请求序号
......@@ -1274,6 +1321,7 @@
else
this.socket[1].sendObj(msg)
},
showApp() {
//显示VLC小程序
if (this.aid > 0) {
......@@ -1302,6 +1350,7 @@
this.socket[2].sendObj(msg)
}
},
hideApp(code) {
//隐藏VLC小程序 Code设置4是自动隐藏，如需强制隐藏，设置为32
if (this.aid > 0)
......@@ -1332,6 +1381,7 @@
this.socket[2].sendObj(msg)
}
},
CheckUpdate() {
//校验中间件版本是不是需要升级,如果额外指定PID参数，代表校验PID代表的小程序，Wrl_Version功能多
this.rid++ // 增加请求序号
......@@ -1344,6 +1394,7 @@
}
this.socket[0].sendObj(msg)
},
SendUpdateJson() {
// 发送中间件的升级命令，实现自动升级，同时升级海康及VLC网页播放等小程序
// 注意：Wrl_Update中的请求参数如MD5 TK Size等，请根据文档“中间件制作升级包说明.pdf”中的打包工具生成，此处举例的升级包是在线公测版的，正式版需要自己制作
......
Demo/PlayerVue3/src/App.vue
浏览文件 @ 641f096e
......@@ -182,7 +182,7 @@
//集成开发说明：所有交互都是通过JS建立websocket连接后，发送或接收JSON包进行，都是异步请求，发送和接收包都携带rid用来标识请求返回包对应是哪个请求的结果
//所有发送的msg中用到的长整形rid 可以自己指定 不同的发送请求定义唯一的rid 这样可以在回调用轻松判断
//针对一些特殊请求，可以根据自己的实际情况把rid固定，如启动网页播放器时指定固定rid获得启动网页播放器的实例ID
//首先建立第一个websocket连接到中间件服务端口启动RTSP网页播放器 然后获得启动RTSP网页播放器的侦听端口建立第二个websocket连接 主要用来进行控制保存文档、提取图片、切换打开文档等操作
//首先建立第一个websocket连接到中间件服务端口启动RTSP多引擎网页播放器，然后获得启动的网页播放器的侦听端口建立第二个websocket连接，主要用来进行控制播放、抓图、录像等操作
//释放网页播放器，直接关闭建立的第一个websocket连接即可
import GetDefaultConn from "./common/base.js"
//加载websoket类
......@@ -209,7 +209,7 @@ let SetPlayerEngine = ref('LibVLC')
let Transform = ref('none')
let recordid = 0 //录像时返回的录像进程PID
let isRecordFile = false //记录录像的状态
let danmu = ref({
let danmu = {
//需要发送的字幕配置信息
text: '您好呀，O(∩_∩)O哈哈~',
position: 'TOP',
......@@ -218,7 +218,7 @@ let danmu = ref({
size: 50,
x: 0,
y: 0
})
}
let StartSecond = ref(0) // 是否启动了第二个网页播放器实例
let ReStartLoad = ref(0) // 第一个网页播放器实例是否重新打开状态
let width = ref(960) // 网页播放器窗口显示宽度
......@@ -235,6 +235,7 @@ let result = reactive([]) //日志结果数组
const DebugLog = computed(() => {
return result.join("\n")
})
onMounted(()=>{
//初始化配置
init()
......@@ -243,12 +244,15 @@ onMounted(()=>{
pageResize()
}
})
onUnmounted(()=>{
//关闭所有websocket链接以及浏览器监听
close()
window.onresize = null
})
function init() {
function init()
{
//监听浏览器切换标签页面
if(document.addEventListener)
document.addEventListener('visibilitychange', handleVisiable,false)
......@@ -263,7 +267,9 @@ function init() {
//先获取本机VLC软件安装信息
GetPlayerInfo()
}
function windowScroll() {
function windowScroll()
{
// 滚动条距离页面顶部的距离
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
if(aid > 0)
......@@ -271,7 +277,9 @@ function windowScroll() {
if (aid2 > 0)
appScroll(2, aid2, scrollTop)
}
function appScroll(si, id, scrollTop) {
function appScroll(si, id, scrollTop)
{
if(id)
{
// 默认纵向滚动网页播放器实例，如需要横向滚动，Code设置为1，修改Left的值
......@@ -292,7 +300,9 @@ function appScroll(si, id, scrollTop) {
socket[si].sendObj(msg)
}
}
function GetAppletPosition() {
function GetAppletPosition()
{
//获取网页播放器位置节点信息
let nScrollTop = 0
let nScrollLeft = 0
......@@ -324,7 +334,9 @@ function GetAppletPosition() {
width.value = Math.round(react.width)
height.value = Math.round(react.height)
}
function handleVisiable(e) {
function handleVisiable(e)
{
//浏览器页面切换侦听回调函数
if (e.target.visibilityState == 'hidden') {
//切离该页面时执行 当前页自己实现标签切换或需要在RTSP网页播放器程序窗口区域临时显示内容时，设置32强制隐藏
......@@ -334,23 +346,31 @@ function handleVisiable(e) {
showApp()
}
}
function hasVerticalScrollbar(){
function hasVerticalScrollbar()
{
if(document.documentElement.clientHeight)
return document.body.scrollHeight > document.documentElement.clientHeight
return document.body.scrollHeight > window.innerHeight
}
function hasHorizontalScrollbar(){
function hasHorizontalScrollbar()
{
if(document.documentElement.clientWidth)
return document.body.scrollWidth > document.documentElement.clientWidth
return document.body.scrollWidth > window.innerWidth
}
function pageResize(){
function pageResize()
{
if(aid > 0)
SendScrollInfo(0,aid)
if(aid2 > 0)
SendScrollInfo(2,aid2)
}
function SendScrollInfo(si,id){
function SendScrollInfo(si,id)
{
let nScrollTop = 0
let nScrollLeft = 0
let BarCode = 0
......@@ -395,13 +415,17 @@ function SendScrollInfo(si,id){
console.log(msg)
socket[si].sendObj(msg)
}
function unloadHandler() {
function unloadHandler()
{
//关闭所有websoket链接
close()
}
function close() {
function close()
{
//关闭网页播放器实例
CloseAllApplet()
CloseAllPlayer()
isDisConnect = true
//关闭第一个websoket链接
socket[0].disconnect()
......@@ -417,6 +441,7 @@ function close() {
//关闭侦听滚动条
window.removeEventListener('unload', unloadHandler,false)
}
function GetPlayerInfo()
{
isConnService = true
......@@ -439,9 +464,10 @@ function GetPlayerInfo()
"para": {}
}
socket[0].sendObj(msg)
}
function StartPlayerApplet() {
function StartPlayerApplet()
{
//启动第一个多引擎网页播放器 Open为播放源，播放源也可以放到Web节点中，参考RePlayFirst中实现，差异在于，Open中指定对所有分屏有效，而在Web节点中可指定更多播放参数
let msg = {
"req": "Wrl_VideoWebPlayer",
......@@ -467,7 +493,9 @@ function StartPlayerApplet() {
console.log(msg)
socket[0].sendObj(msg)
}
function openSecondApplet() {
function openSecondPlayer()
{
if(aid)
{
//演示加载第二个RTSP网页播放器实例打开表格程序 先改变第一个网页播放器位置 Flag值需要在原来基础上+512以支持多实例加载
......@@ -515,7 +543,9 @@ function openSecondApplet() {
ElMessage('请先启动第一个网页播放器')
}
}
function CloseSecondApplet() {
function CloseSecondPlayer()
{
if (StartSecond.value) {
isDisConnect = true
/// 每个网页播放器实例占用2个连接，一个到中间件、一个到网页播放器，分别断开连接并释放
......@@ -536,7 +566,8 @@ function CloseSecondApplet() {
resize(0)
}
}
function CloseFirstApplet()
function CloseFirstPlayer()
{
if (aid > 0)
{
......@@ -554,7 +585,7 @@ function CloseFirstApplet()
socket[1].disconnect()
socket[0].sendObj(msg)
aid = 0
ReStartLoad = 0
ReStartLoad.value = 0
if(StartSecond.value)
socket.splice(1,1)
else
......@@ -562,44 +593,47 @@ function CloseFirstApplet()
isDisConnect = false
}
}
function RePlayFirst()
{
CloseFirstApplet()
ReStartLoad = 1
CloseFirstPlayer()
ReStartLoad.value = 1
//重新启动播，Web节点配置播放源，设置分屏风格4，播放引擎从VLC改为FFPlayer
ShowType = 4
let Msg = {
"req": "Wrl_VideoWebPlayer",
"rid": run1,
"rid": RunFirst,
"para": {
"Type": "0",
"Title": "RTSP多引擎网页播放器",
"Version": 0,
"Flag": 578,
"Left": left,
"Top": top,
"Width": width,
"Height": height,
"IframeX": IframeX,
"IframeY": IframeY,
"BarW": 0,
"BarH": 0,
"ScrollTop": 0,
"Web": JSON.parse(WebCfg2.value),
"ShowType": ShowType
"Type": "0",
"Title": "RTSP多引擎网页播放器",
"Version": 0,
"Flag": 578,
"Left": left.value,
"Top": top.value,
"Width": width.value,
"Height": height.value,
"IframeX": IframeX,
"IframeY": IframeY,
"BarW": 0,
"BarH": 0,
"ScrollTop": 0,
"Web": JSON.parse(WebCfg2.value),
"ShowType": ShowType
}
}
socket[0].sendObj(Msg)
}
function CloseAllApplet()
function CloseAllPlayer()
{
/// 先关闭第二个实例，否则socket中保存的连接序号会不正常
CloseSecondApplet()
CloseFirstApplet()
CloseSecondPlayer()
CloseFirstPlayer()
}
function StopSecondPlayer()
{
if (StartSecond)
if (StartSecond.value)
{
rid++ // 增加序号
let msg = {
......@@ -623,6 +657,7 @@ function StopSecondPlayer()
socket[3].sendObj(msg)
}
}
function StopFirstPlayer()
{
if (aid > 0)
......@@ -632,7 +667,7 @@ function StopFirstPlayer()
/// ID是分屏窗口序号，从1开始 序号原则是从左向右开始编号，然后从上到下开始顺序编号，如遇右侧多层排列窗口时，直到右侧窗口序号排序完成
/// Type可以是这些值：Pause,Play,Stop,StopAsync,Next,Prev,Clear,TogglePause 分别对应暂停播放 播放 停止播放 异步停止播放 下一个播放源 上一个播放源 清理播放列表 切换暂停状态
let msg = {}
if(ReStartPlay)
if(ReStartLoad.value)
{
msg = {
"req": "Player_Control",
......@@ -664,12 +699,15 @@ function StopFirstPlayer()
socket[1].sendObj(msg)
}
}
function StopAllPlay()
{
StopSecondPlayer()
StopFirstPlayer()
}
function openWebsocket(port,type) {
function openWebsocket(port,type)
{
//打开websocket服务
let ws = GetDefaultConn(port,type)
const socketClient = new websocket(ws, {
......@@ -677,15 +715,15 @@ function openWebsocket(port,type) {
})
socketClient.connect()
if(1 == ReStartLoad && StartSecond.value)
if(1 == ReStartLoad.value && StartSecond.value)
{
ReStartLoad = 2
ReStartLoad.value = 2
socket.splice(1,0,socketClient) // 重新加载时已经启动第二个实例，采用插入方式，避免WS下标错误，确保第一个实例的WS连接下标是0和1，第二个实例是3和4
}
else
{
if(1 == ReStartLoad)
ReStartLoad = 2
if(1 == ReStartLoad.value)
ReStartLoad.value = 2
socket.push(socketClient)
}
socketClient.onMessage = (msg) =>
......@@ -793,7 +831,7 @@ function openWebsocket(port,type) {
type: 'warning'
}).then(() => {
/// 先提前关闭网页播放器
CloseAllApplet()
CloseAllPlayer()
SendUpdateJson()
}).catch(() => {
showApp()
......@@ -811,10 +849,10 @@ function openWebsocket(port,type) {
}
socketClient.onError = (msg) => {
// 避免IE中点击重复播放及firefox断开连接提示等问题
if(!ReStartLoad && isConnService && !isDisConnect)
if(!ReStartLoad.value && isConnService && !isDisConnect)
{
//连接不上，认为还没有安装 PageHiPlayer-RTSP多引擎网页播放器 没有安装时提示安装
ElMessageBox.confirm('RTSP多引擎网页播放器 尚未安装，是否马上下载安装？', '提示', {
ElMessageBox.confirm('PageHiPlayer-RTSP多引擎网页播放器 服务端口连接失败，可能是尚未安装，是否马上下载安装？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
......@@ -825,6 +863,7 @@ function openWebsocket(port,type) {
}
}
}
function resize(position) {
//请求改变网页播放器实例显示位置或大小，如不需要改变显示位置，不传X和Y
if(aid2 > 0 && aid2 == curID){
......@@ -868,7 +907,7 @@ function resize(position) {
"ID": aid,
"X": left.value,
"Y": top.value,
"Width": width,
"Width": width.value,
"Height": height.value
}
}
......@@ -889,6 +928,7 @@ function resize(position) {
}
}
}
function getCapture()
{
//请求截图，固定请求ID处理，也可以是建立一个map记录每个rid对应的含义，请求返回里再处理
......@@ -910,6 +950,7 @@ function getCapture()
else
socket[1].sendObj(msg)
}
function setText()
{
//发送字幕到指定的窗口ID
......@@ -935,6 +976,7 @@ function setText()
else
socket[1].sendObj(msg)
}
function setType()
{
//动态改变屏幕数量
......@@ -951,6 +993,7 @@ function setType()
else
socket[1].sendObj(msg)
}
function NextFrame()
{
//请求显示下一帧 请求后播放进入暂停状态，可继续请求下一帧，或请求播放恢复正常播放状态
......@@ -969,6 +1012,7 @@ function NextFrame()
else
socket[1].sendObj(msg)
}
function PlayPause()
{
//请求播放进入暂停状态
......@@ -987,6 +1031,7 @@ function PlayPause()
else
socket[1].sendObj(msg)
}
function PlayContinue()
{
//请求播放继续，或请求播放恢复正常播放状态
......@@ -1005,6 +1050,7 @@ function PlayContinue()
else
socket[1].sendObj(msg)
}
function PlayMute()
{
// 设置选中分屏窗口视频静音,1静音 0不静音
......@@ -1023,6 +1069,7 @@ function PlayMute()
else
socket[1].sendObj(msg)
}
function PlaySpeed()
{
// 调整播放速度,仅限于文件或回放流，支持批量操作，当前演示针对选中分屏窗口设置2倍数播放
......@@ -1040,6 +1087,7 @@ function PlaySpeed()
else
socket[1].sendObj(msg)
}
function PlayFullScreen()
{
// 设置选中分屏窗口全屏显示 全屏后按ESC 字幕F\、双击或点击工具栏全屏图标可退出全屏状态
......@@ -1057,6 +1105,7 @@ function PlayFullScreen()
else
socket[1].sendObj(msg)
}
function SetSelWnd() {
//设置选中分屏子窗口
rid++ // 增加请求序号
......@@ -1076,6 +1125,7 @@ function SetSelWnd() {
else
socket[1].sendObj(msg)
}
function AppletSnap()
{
// 整个播放窗口抓图，包含所有分屏子窗口，发送到中间件侦听端口执行
......@@ -1095,6 +1145,7 @@ function AppletSnap()
else
socket[0].sendObj(msg)
}
function FullApplet()
{
// 整个播放窗口全屏，包含所有分屏子窗口，发送到中间件侦听端口执行
......@@ -1113,6 +1164,7 @@ function FullApplet()
else
socket[0].sendObj(msg)
}
function RecordToFile()
{
//对指定的窗口ID进行录像 固定请求ID处理，也可以是建立一个map记录每个rid对应的含义，请求返回里再处理
......@@ -1147,6 +1199,7 @@ function RecordToFile()
socket[0].sendObj(msg)
}
}
function BeginRecordFile(LocalFilePath)
{
let msg = {
......@@ -1166,6 +1219,7 @@ function BeginRecordFile(LocalFilePath)
else
socket[1].sendObj(msg)
}
function watermask()
{
//对指定的窗口ID发送水印，只支持VLC引擎播放，其它引擎播放，可采用叠加透明网页的方式，参考FloatWebInfo的实现
......@@ -1188,6 +1242,7 @@ function watermask()
else
socket[1].sendObj(msg)
}
function changePlay()
{
//动态改变指定的窗口ID的播放源，Player_ChangePlay本身支持同时改变多个分屏窗口播放源，Play支持传数组 ForceDestroy指定是否先销毁原来播放引擎 默认不销毁
......@@ -1283,6 +1338,7 @@ function changePlay()
else
socket[1].sendObj(msg)
}
function FloatWebInfo()
{
//对指定的窗口ID叠加网页内容显示
......@@ -1448,7 +1504,7 @@ function SendUpdateJson() {
.video-container {
position: relative;
margin-top: 8px;
height: 480px;
height: 320px;
border: #ddd 1px dashed;
display: flex;
display: -ms-flexbox;
......
Demo/VlcVue2/.env.development 0 → 100644
浏览文件 @ 641f096e
VUE_APP_API_URL = ''
\ No newline at end of file
Demo/VlcVue2/.env.production 0 → 100644
浏览文件 @ 641f096e
VUE_APP_API_URL = ''
\ No newline at end of file
Demo/VlcVue2/babel.config.js 0 → 100644
浏览文件 @ 641f096e
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
'import',
{ libraryName: 'vant', libraryDirectory: 'es', style: true },
'vant'
]
]
};
Demo/VlcVue2/package-lock.json 0 → 100644
浏览文件 @ 641f096e
此差异已折叠。
Demo/VlcVue2/package-lock_Local.json 0 → 100644
浏览文件 @ 641f096e
此差异已折叠。
Demo/VlcVue2/package.json 0 → 100644
浏览文件 @ 641f096e
{
"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/VlcVue2/public/index.html 0 → 100644
浏览文件 @ 641f096e
<!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/VlcVue2/public/vlcframe.html 0 → 100644
浏览文件 @ 641f096e
<!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/VlcVue2/public/vlcwebplayer.html 0 → 100644
浏览文件 @ 641f096e
<!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/VlcVue2/src/App.vue 0 → 100644
浏览文件 @ 641f096e
<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/VlcVue2/src/common/base.js 0 → 100644
浏览文件 @ 641f096e
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/VlcVue2/src/common/websocket.js 0 → 100644
浏览文件 @ 641f096e
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/VlcVue2/src/main.js 0 → 100644
浏览文件 @ 641f096e
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/VlcVue2/src/router.js 0 → 100644
浏览文件 @ 641f096e
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/VlcVue2/src/view/index.vue 0 → 100644
浏览文件 @ 641f096e
此差异已折叠。
Demo/VlcVue2/vue.config.js 0 → 100644
浏览文件 @ 641f096e
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/VlcVue3/index.html 0 → 100644
浏览文件 @ 641f096e
<!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/VlcVue3/package-lock.json 0 → 100644
浏览文件 @ 641f096e
此差异已折叠。
Demo/VlcVue3/package.json 0 → 100644
浏览文件 @ 641f096e
{
"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/VlcVue3/src/App.vue 0 → 100644
浏览文件 @ 641f096e
此差异已折叠。
Demo/VlcVue3/src/common/base.js 0 → 100644
浏览文件 @ 641f096e
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/VlcVue3/src/common/websocket.js 0 → 100644
浏览文件 @ 641f096e
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/VlcVue3/src/main.js 0 → 100644
浏览文件 @ 641f096e
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/VlcVue3/vite.config.js 0 → 100644
浏览文件 @ 641f096e
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
Demo/Vue打包说明.txt 0 → 100644
浏览文件 @ 641f096e
1.打开控制台 cmd
2.cd到VUE源码工程文件夹子目录OfficeVue2或OfficeVue3 运行 npm i 安装依赖
3.VUE3项目跳过，VUE2使用NODEJS 大于等于17版本时执行：set NODE_OPTIONS=--openssl-legacy-provider https://blog.csdn.net/zjjxxh/article/details/127173968
4.打包 npm run build
5.本地调试运行 npm run serve 或 npm run dev vue3
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或