fajiao
/
wvp-GB28181-pro
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'wvp-28181-2.0' of https://github.com/mk1990/wvp-GB28181-pro into wvp-28181-2.0

pull/491/head
mk1990 3 years ago
parent
e6790d88fc 6fbac144d6
commit
491286095c
5 changed files with 369 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/main/java/com/genersoft/iot/vmp/gb28181/transmit/event/request/impl/RegisterRequestProcessor.java
  2. 6
      web_src/src/components/channelList.vue
  3. 208
      web_src/src/components/dialog/devicePlayer.vue
  4. 222
      web_src/static/js/ZLMRTCClient.js
  5. 1
      web_src/static/js/ZLMRTCClient.js.map

2
src/main/java/com/genersoft/iot/vmp/gb28181/transmit/event/request/impl/RegisterRequestProcessor.java
View File

@ -94,7 +94,7 @@ public class RegisterRequestProcessor extends SIPRequestProcessorParent implemen
String deviceId = uri.getUser(); String deviceId = uri.getUser();
AuthorizationHeader authHead = (AuthorizationHeader) request.getHeader(AuthorizationHeader.NAME); AuthorizationHeader authHead = (AuthorizationHeader) request.getHeader(AuthorizationHeader.NAME);
if (authHead == null) { if (authHead == null && !StringUtils.isEmpty(sipConfig.getPassword())) {
logger.info("[注册请求] 未携带授权头 回复401: {}", requestAddress); logger.info("[注册请求] 未携带授权头 回复401: {}", requestAddress);
response = getMessageFactory().createResponse(Response.UNAUTHORIZED, request); response = getMessageFactory().createResponse(Response.UNAUTHORIZED, request);
new DigestServerAuthenticationHelper().generateChallenge(getHeaderFactory(), response, sipConfig.getDomain()); new DigestServerAuthenticationHelper().generateChallenge(getHeaderFactory(), response, sipConfig.getDomain());

6
web_src/src/components/channelList.vue
View File

@ -220,6 +220,7 @@ export default {
method: 'get', method: 'get',
url: '/api/play/start/' + deviceId + '/' + channelId url: '/api/play/start/' + deviceId + '/' + channelId
}).then(function (res) { }).then(function (res) {
console.log(res)
that.isLoging = false; that.isLoging = false;
if (res.data.code === 0) { if (res.data.code === 0) {
@ -237,10 +238,13 @@ export default {
that.initData(); that.initData();
}, 1000) }, 1000)
}else{
that.$message.error(res.data.msg);
} }
}).catch(function (e) { }).catch(function (e) {
console.error(e)
that.isLoging = false; that.isLoging = false;
that.$message.error("请求超时"); // that.$message.error("请求超时");
}); });
}, },
queryRecords: function (itemData) { queryRecords: function (itemData) {

208
web_src/src/components/dialog/devicePlayer.vue
View File

@ -4,10 +4,22 @@
<el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" @close="close()"> <el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" @close="close()">
<!-- <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :message="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer> --> <!-- <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :message="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer> -->
<div style="width: 100%; height: 100%"> <div style="width: 100%; height: 100%">
<player ref="videoPlayer" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></player> <el-tabs type="card" :stretch="true" v-model="activePlayer" @tab-click="changePlayer" v-if="Object.keys(this.player).length > 1">
<el-tab-pane label="Jessibuca" name="jessibuca">
<jessibucaPlayer v-if="activePlayer === 'jessibuca'" ref="jessibuca" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></jessibucaPlayer>
</el-tab-pane>
<el-tab-pane label="WebRTC" name="webRTC">
<rtc-player v-if="activePlayer === 'webRTC'" ref="webRTC" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></rtc-player>
</el-tab-pane>
<el-tab-pane label="h265web">h265web敬请期待</el-tab-pane>
<el-tab-pane label="wsPlayer">wsPlayer 敬请期待</el-tab-pane>
</el-tabs>
<jessibucaPlayer v-if="Object.keys(this.player).length == 1 && this.player.jessibuca" ref="jessibuca" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></jessibucaPlayer>
<rtc-player v-if="Object.keys(this.player).length == 1 && this.player.webRTC" ref="jessibuca" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></rtc-player>
</div> </div>
<div id="shared" style="text-align: right; margin-top: 1rem;"> <div id="shared" style="text-align: right; margin-top: 1rem;">
<el-tabs v-model="tabActiveName" @tab-click="tabHandleClick"> <el-tabs v-model="tabActiveName" @tab-click="tabHandleClick" >
<el-tab-pane label="实时视频" name="media"> <el-tab-pane label="实时视频" name="media">
<div style="margin-bottom: 0.5rem;"> <div style="margin-bottom: 0.5rem;">
<!-- <el-button type="primary" size="small" @click="playRecord(true, '')">播放</el-button>--> <!-- <el-button type="primary" size="small" @click="playRecord(true, '')">播放</el-button>-->
@ -33,10 +45,100 @@
<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;"> <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
<span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址：</span> <span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址：</span>
<el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" > <el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" >
<template slot="append"> <el-button slot="append" icon="el-icon-document-copy" title="点击拷贝" v-clipboard="getPlayerShared.sharedRtmp" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>
<i class="cpoy-btn el-icon-document-copy" title="点击拷贝" v-clipboard="getPlayerShared.sharedRtmp" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></i> <el-dropdown slot="prepend" v-if="streamInfo" trigger="click" @command="copyUrl">
</template> <el-button >
更多地址<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown" >
<el-dropdown-item :command="streamInfo.flv">
<el-tag >FLV:</el-tag>
<span>{{ streamInfo.flv }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.https_flv">
<el-tag >FLV(https):</el-tag>
<span>{{ streamInfo.https_flv }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.ws_flv">
<el-tag >FLV(ws):</el-tag>
<span >{{ streamInfo.ws_flv }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.wss_flv">
<el-tag >FLV(wss):</el-tag>
<span>{{ streamInfo.wss_flv }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.fmp4">
<el-tag >FMP4:</el-tag>
<span>{{ streamInfo.fmp4 }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.https_fmp4">
<el-tag >FMP4(https):</el-tag>
<span>{{ streamInfo.https_fmp4 }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.ws_fmp4">
<el-tag >FMP4(ws):</el-tag>
<span>{{ streamInfo.ws_fmp4 }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.wss_fmp4">
<el-tag >FMP4(wss):</el-tag>
<span>{{ streamInfo.wss_fmp4 }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.hls">
<el-tag>HLS:</el-tag>
<span>{{ streamInfo.hls }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.https_hls">
<el-tag >HLS(https):</el-tag>
<span>{{ streamInfo.https_hls }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.ws_hls">
<el-tag >HLS(ws):</el-tag>
<span>{{ streamInfo.ws_hls }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.wss_hls">
<el-tag >HLS(wss):</el-tag>
<span>{{ streamInfo.wss_hls }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.ts">
<el-tag>TS:</el-tag>
<span>{{ streamInfo.ts }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.https_ts">
<el-tag>TS(https):</el-tag>
<span>{{ streamInfo.https_ts }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.ws_ts">
<el-tag>TS(ws):</el-tag>
<span>{{ streamInfo.ws_ts }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.wss_ts">
<el-tag>TS(wss):</el-tag>
<span>{{ streamInfo.wss_ts }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.rtc">
<el-tag >RTC:</el-tag>
<span>{{ streamInfo.rtc }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.rtmp">
<el-tag >RTMP:</el-tag>
<span>{{ streamInfo.rtmp }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.rtmps">
<el-tag >RTMPS:</el-tag>
<span>{{ streamInfo.rtmps }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.rtsp">
<el-tag >RTSP:</el-tag>
<span>{{ streamInfo.rtsp }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.rtsps">
<el-tag >RTSPS:</el-tag>
<span>{{ streamInfo.rtsps }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-input> </el-input>
</div> </div>
</el-tab-pane> </el-tab-pane>
<!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}--> <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
@ -117,27 +219,27 @@
<div class="control-panel"> <div class="control-panel">
<el-button-group> <el-button-group>
<el-tag style="position :absolute; left: 0rem; top: 0rem; width: 5rem; text-align: center" size="medium" type="info">预置位编号</el-tag> <el-tag style="position :absolute; left: 0rem; top: 0rem; width: 5rem; text-align: center" size="medium">预置位编号</el-tag>
<el-input-number style="position: absolute; left: 5rem; top: 0rem; width: 6rem" size="mini" v-model="presetPos" controls-position="right" :precision="0" :step="1" :min="1" :max="255"></el-input-number> <el-input-number style="position: absolute; left: 5rem; top: 0rem; width: 6rem" size="mini" v-model="presetPos" controls-position="right" :precision="0" :step="1" :min="1" :max="255"></el-input-number>
<el-button style="position: absolute; left: 11rem; top: 0rem; width: 5rem" size="mini" icon="el-icon-add-location" @click="presetPosition(129, presetPos)">设置</el-button> <el-button style="position: absolute; left: 11rem; top: 0rem; width: 5rem" size="mini" icon="el-icon-add-location" @click="presetPosition(129, presetPos)">设置</el-button>
<el-button style="position: absolute; left: 27rem; top: 0rem; width: 5rem" size="mini" type="primary" icon="el-icon-place" @click="presetPosition(130, presetPos)">调用</el-button> <el-button style="position: absolute; left: 27rem; top: 0rem; width: 5rem" size="mini" type="primary" icon="el-icon-place" @click="presetPosition(130, presetPos)">调用</el-button>
<el-button style="position: absolute; left: 16rem; top: 0rem; width: 5rem" size="mini" icon="el-icon-delete-location" @click="presetPosition(131, presetPos)">删除</el-button> <el-button style="position: absolute; left: 16rem; top: 0rem; width: 5rem" size="mini" icon="el-icon-delete-location" @click="presetPosition(131, presetPos)">删除</el-button>
<el-tag style="position :absolute; left: 0rem; top: 2.5rem; width: 5rem; text-align: center" size="medium" type="info">巡航速度</el-tag> <el-tag style="position :absolute; left: 0rem; top: 2.5rem; width: 5rem; text-align: center" size="medium">巡航速度</el-tag>
<el-input-number style="position: absolute; left: 5rem; top: 2.5rem; width: 6rem" size="mini" v-model="cruisingSpeed" controls-position="right" :precision="0" :min="1" :max="4095"></el-input-number> <el-input-number style="position: absolute; left: 5rem; top: 2.5rem; width: 6rem" size="mini" v-model="cruisingSpeed" controls-position="right" :precision="0" :min="1" :max="4095"></el-input-number>
<el-button style="position: absolute; left: 11rem; top: 2.5rem; width: 5rem" size="mini" icon="el-icon-loading" @click="setSpeedOrTime(134, cruisingGroup, cruisingSpeed)">设置</el-button> <el-button style="position: absolute; left: 11rem; top: 2.5rem; width: 5rem" size="mini" icon="el-icon-loading" @click="setSpeedOrTime(134, cruisingGroup, cruisingSpeed)">设置</el-button>
<el-tag style="position :absolute; left: 16rem; top: 2.5rem; width: 5rem; text-align: center" size="medium" type="info">停留时间</el-tag> <el-tag style="position :absolute; left: 16rem; top: 2.5rem; width: 5rem; text-align: center" size="medium">停留时间</el-tag>
<el-input-number style="position: absolute; left: 21rem; top: 2.5rem; width: 6rem" size="mini" v-model="cruisingTime" controls-position="right" :precision="0" :min="1" :max="4095"></el-input-number> <el-input-number style="position: absolute; left: 21rem; top: 2.5rem; width: 6rem" size="mini" v-model="cruisingTime" controls-position="right" :precision="0" :min="1" :max="4095"></el-input-number>
<el-button style="position: absolute; left: 27rem; top: 2.5rem; width: 5rem" size="mini" icon="el-icon-timer" @click="setSpeedOrTime(135, cruisingGroup, cruisingTime)">设置</el-button> <el-button style="position: absolute; left: 27rem; top: 2.5rem; width: 5rem" size="mini" icon="el-icon-timer" @click="setSpeedOrTime(135, cruisingGroup, cruisingTime)">设置</el-button>
<el-tag style="position :absolute; left: 0rem; top: 4.5rem; width: 5rem; text-align: center" size="medium" type="info">巡航组编号</el-tag> <el-tag style="position :absolute; left: 0rem; top: 4.5rem; width: 5rem; text-align: center" size="medium">巡航组编号</el-tag>
<el-input-number style="position: absolute; left: 5rem; top: 4.5rem; width: 6rem" size="mini" v-model="cruisingGroup" controls-position="right" :precision="0" :min="0" :max="255"></el-input-number> <el-input-number style="position: absolute; left: 5rem; top: 4.5rem; width: 6rem" size="mini" v-model="cruisingGroup" controls-position="right" :precision="0" :min="0" :max="255"></el-input-number>
<el-button style="position: absolute; left: 11rem; top: 4.5rem; width: 5rem" size="mini" icon="el-icon-add-location" @click="setCommand(132, cruisingGroup, presetPos)">添加点</el-button> <el-button style="position: absolute; left: 11rem; top: 4.5rem; width: 5rem" size="mini" icon="el-icon-add-location" @click="setCommand(132, cruisingGroup, presetPos)">添加点</el-button>
<el-button style="position: absolute; left: 16rem; top: 4.5rem; width: 5rem" size="mini" icon="el-icon-delete-location" @click="setCommand(133, cruisingGroup, presetPos)">删除点</el-button> <el-button style="position: absolute; left: 16rem; top: 4.5rem; width: 5rem" size="mini" icon="el-icon-delete-location" @click="setCommand(133, cruisingGroup, presetPos)">删除点</el-button>
<el-button style="position: absolute; left: 21rem; top: 4.5rem; width: 5rem" size="mini" icon="el-icon-delete" @click="setCommand(133, cruisingGroup, 0)">删除组</el-button> <el-button style="position: absolute; left: 21rem; top: 4.5rem; width: 5rem" size="mini" icon="el-icon-delete" @click="setCommand(133, cruisingGroup, 0)">删除组</el-button>
<el-button style="position: absolute; left: 27rem; top: 5rem; width: 5rem" size="mini" type="primary" icon="el-icon-video-camera-solid" @click="setCommand(136, cruisingGroup, 0)">巡航</el-button> <el-button style="position: absolute; left: 27rem; top: 5rem; width: 5rem" size="mini" type="primary" icon="el-icon-video-camera-solid" @click="setCommand(136, cruisingGroup, 0)">巡航</el-button>
<el-tag style="position :absolute; left: 0rem; top: 7rem; width: 5rem; text-align: center" size="medium" type="info">扫描速度</el-tag> <el-tag style="position :absolute; left: 0rem; top: 7rem; width: 5rem; text-align: center" size="medium">扫描速度</el-tag>
<el-input-number style="position: absolute; left: 5rem; top: 7rem; width: 6rem" size="mini" v-model="scanSpeed" controls-position="right" :precision="0" :min="1" :max="4095"></el-input-number> <el-input-number style="position: absolute; left: 5rem; top: 7rem; width: 6rem" size="mini" v-model="scanSpeed" controls-position="right" :precision="0" :min="1" :max="4095"></el-input-number>
<el-button style="position: absolute; left: 11rem; top: 7rem; width: 5rem" size="mini" icon="el-icon-loading" @click="setSpeedOrTime(138, scanGroup, scanSpeed)">设置</el-button> <el-button style="position: absolute; left: 11rem; top: 7rem; width: 5rem" size="mini" icon="el-icon-loading" @click="setSpeedOrTime(138, scanGroup, scanSpeed)">设置</el-button>
<el-tag style="position :absolute; left: 0rem; top: 9rem; width: 5rem; text-align: center" size="medium" type="info">扫描组编号</el-tag> <el-tag style="position :absolute; left: 0rem; top: 9rem; width: 5rem; text-align: center" size="medium">扫描组编号</el-tag>
<el-input-number style="position: absolute; left: 5rem; top: 9rem; width: 6rem" size="mini" v-model="scanGroup" controls-position="right" :precision="0" :step="1" :min="0" :max="255"></el-input-number> <el-input-number style="position: absolute; left: 5rem; top: 9rem; width: 6rem" size="mini" v-model="scanGroup" controls-position="right" :precision="0" :step="1" :min="0" :max="255"></el-input-number>
<el-button style="position: absolute; left: 11rem; top: 9rem; width: 5rem" size="mini" icon="el-icon-d-arrow-left" @click="setCommand(137, scanGroup, 1)">左边界</el-button> <el-button style="position: absolute; left: 11rem; top: 9rem; width: 5rem" size="mini" icon="el-icon-d-arrow-left" @click="setCommand(137, scanGroup, 1)">左边界</el-button>
<el-button style="position: absolute; left: 16rem; top: 9rem; width: 5rem" size="mini" icon="el-icon-d-arrow-right" @click="setCommand(137, scanGroup, 2)">右边界</el-button> <el-button style="position: absolute; left: 16rem; top: 9rem; width: 5rem" size="mini" icon="el-icon-d-arrow-right" @click="setCommand(137, scanGroup, 2)">右边界</el-button>
@ -174,6 +276,7 @@
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</el-dialog> </el-dialog>
@ -182,16 +285,16 @@
</template> </template>
<script> <script>
// import player from '../dialog/rtcPlayer.vue' import rtcPlayer from '../dialog/rtcPlayer.vue'
// import LivePlayer from '@liveqing/liveplayer' // import LivePlayer from '@liveqing/liveplayer'
// import player from '../dialog/easyPlayer.vue' // import player from '../dialog/easyPlayer.vue'
import player from '../common/jessibuca.vue' import jessibucaPlayer from '../common/jessibuca.vue'
import recordDownload from '../dialog/recordDownload.vue' import recordDownload from '../dialog/recordDownload.vue'
export default { export default {
name: 'devicePlayer', name: 'devicePlayer',
props: {}, props: {},
components: { components: {
player,recordDownload, jessibucaPlayer, rtcPlayer, recordDownload,
}, },
computed: { computed: {
getPlayerShared: function () { getPlayerShared: function () {
@ -202,11 +305,22 @@ export default {
}; };
} }
}, },
created() {}, created() {
console.log(this.player)
if (Object.keys(this.player).length === 1) {
this.activePlayer = Object.keys(this.player)[0]
}
},
data() { data() {
return { return {
video: 'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4', video: 'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4',
videoUrl: '', videoUrl: '',
activePlayer: "jessibuca",
// 如何你只是用一种播放器，直接注释掉不用的部分即可
player: {
jessibuca : ["ws_flv", "wss_flv"],
webRTC: ["rtc", "rtc"],
},
videoHistory: { videoHistory: {
date: '', date: '',
searchHistoryResult: [] //媒体流历史记录搜索结果 searchHistoryResult: [] //媒体流历史记录搜索结果
@ -244,6 +358,7 @@ export default {
seekTime: 0, seekTime: 0,
recordStartTime: 0, recordStartTime: 0,
showTimeText: "00:00:00", showTimeText: "00:00:00",
streamInfo: null,
}; };
}, },
methods: { methods: {
@ -272,6 +387,12 @@ export default {
}).catch(function (e) {}); }).catch(function (e) {});
} }
}, },
changePlayer: function (tab) {
console.log(this.player[tab.name][0])
this.activePlayer = tab.name;
this.videoUrl = this.streamInfo[this.player[tab.name][0]]
console.log(this.videoUrl)
},
openDialog: function (tab, deviceId, channelId, param) { openDialog: function (tab, deviceId, channelId, param) {
this.tabActiveName = tab; this.tabActiveName = tab;
this.channelId = channelId; this.channelId = channelId;
@ -280,8 +401,8 @@ export default {
this.mediaServerId = ""; this.mediaServerId = "";
this.app = ""; this.app = "";
this.videoUrl = "" this.videoUrl = ""
if (!!this.$refs.videoPlayer) { if (!!this.$refs[this.activePlayer]) {
this.$refs.videoPlayer.pause(); this.$refs[this.activePlayer].pause();
} }
switch (tab) { switch (tab) {
case "media": case "media":
@ -306,41 +427,29 @@ export default {
console.log(val) console.log(val)
}, },
play: function (streamInfo, hasAudio) { play: function (streamInfo, hasAudio) {
this.streamInfo = streamInfo;
this.hasAudio = hasAudio; this.hasAudio = hasAudio;
this.isLoging = false; this.isLoging = false;
// this.videoUrl = streamInfo.rtc; // this.videoUrl = streamInfo.rtc;
this.videoUrl = this.getUrlByStreamInfo(streamInfo); this.videoUrl = this.getUrlByStreamInfo();
this.streamId = streamInfo.stream; this.streamId = streamInfo.stream;
this.app = streamInfo.app; this.app = streamInfo.app;
this.mediaServerId = streamInfo.mediaServerId; this.mediaServerId = streamInfo.mediaServerId;
this.playFromStreamInfo(false, streamInfo) this.playFromStreamInfo(false, streamInfo)
}, },
getUrlByStreamInfo(streamInfo){ getUrlByStreamInfo(){
let baseZlmApi = process.env.NODE_ENV === 'development'?`${location.host}/debug/zlm`:`${location.host}/zlm`
// return `${baseZlmApi}/${streamInfo.app}/${streamInfo.streamId}.flv`;
// return `http://${baseZlmApi}/${streamInfo.app}/${streamInfo.streamId}.flv`;
if (location.protocol === "https:") { if (location.protocol === "https:") {
if (streamInfo.wss_flv === null) { this.videoUrl = this.streamInfo[this.player[this.activePlayer][1]]
console.error("媒体服务器未配置ssl端口, 使用http端口")
// this.$message({
// showClose: true,
// message: '媒体服务器未配置ssl端口, ',
// type: 'error'
// });
return streamInfo.ws_flv
}else {
return streamInfo.wss_flv;
}
}else { }else {
return streamInfo.ws_flv; this.videoUrl = this.streamInfo[this.player[this.activePlayer][0]]
} }
return this.videoUrl;
}, },
coverPlay: function () { coverPlay: function () {
var that = this; var that = this;
this.coverPlaying = true; this.coverPlaying = true;
this.$refs.videoPlayer.pause() this.$refs[this.activePlayer].pause()
that.$axios({ that.$axios({
method: 'post', method: 'post',
url: '/api/gb_record/convert/' + that.streamId url: '/api/gb_record/convert/' + that.streamId
@ -372,7 +481,7 @@ export default {
}, },
convertStopClick: function() { convertStopClick: function() {
this.convertStop(()=>{ this.convertStop(()=>{
this.$refs.videoPlayer.play(this.videoUrl) this.$refs[this.activePlayer].play(this.videoUrl)
}); });
}, },
convertStop: function(callback) { convertStop: function(callback) {
@ -397,12 +506,12 @@ export default {
playFromStreamInfo: function (realHasAudio, streamInfo) { playFromStreamInfo: function (realHasAudio, streamInfo) {
this.showVideoDialog = true; this.showVideoDialog = true;
this.hasaudio = realHasAudio && this.hasaudio; this.hasaudio = realHasAudio && this.hasaudio;
this.$refs.videoPlayer.play(this.getUrlByStreamInfo(streamInfo)) this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo))
}, },
close: function () { close: function () {
console.log('关闭视频'); console.log('关闭视频');
if (!!this.$refs.videoPlayer){ if (!!this.$refs[this.activePlayer]){
this.$refs.videoPlayer.pause(); this.$refs[this.activePlayer].pause();
} }
this.videoUrl = ''; this.videoUrl = '';
this.coverPlaying = false; this.coverPlaying = false;
@ -507,7 +616,7 @@ export default {
} }
}, },
stopPlayRecord: function (callback) { stopPlayRecord: function (callback) {
this.$refs.videoPlayer.pause(); this.$refs[this.activePlayer].pause();
this.videoUrl = ''; this.videoUrl = '';
this.$axios({ this.$axios({
method: 'get', method: 'get',
@ -553,7 +662,7 @@ export default {
} }
}, },
stopDownloadRecord: function (callback) { stopDownloadRecord: function (callback) {
this.$refs.videoPlayer.pause(); this.$refs[this.activePlayer].pause();
this.videoUrl = ''; this.videoUrl = '';
this.$axios({ this.$axios({
method: 'get', method: 'get',
@ -646,13 +755,21 @@ export default {
console.log(resultArray) console.log(resultArray)
return resultArray; return resultArray;
}, },
copyUrl: function (dropdownItem){
console.log(dropdownItem)
this.$copyText(dropdownItem).then((e)=> {
this.$message.success("成功拷贝到粘贴板");
}, (e)=> {
})
},
gbPlay(){ gbPlay(){
console.log('前端控制：播放'); console.log('前端控制：播放');
this.$axios({ this.$axios({
method: 'get', method: 'get',
url: '/api/playback/resume/' + this.streamId url: '/api/playback/resume/' + this.streamId
}).then((res)=> { }).then((res)=> {
this.$refs.videoPlayer.play(this.videoUrl) this.$refs[this.activePlayer].play(this.videoUrl)
}); });
}, },
gbPause(){ gbPause(){
@ -683,10 +800,11 @@ export default {
url: `/api/playback/seek/${this.streamId }/` + Math.floor(this.seekTime * val / 100000) url: `/api/playback/seek/${this.streamId }/` + Math.floor(this.seekTime * val / 100000)
}).then( (res)=> { }).then( (res)=> {
setTimeout(()=>{ setTimeout(()=>{
this.$refs.videoPlayer.play(this.videoUrl) this.$refs[this.activePlayer].play(this.videoUrl)
}, 600) }, 600)
}); });
} },
} }
}; };

222
web_src/static/js/ZLMRTCClient.js
View File

@ -6,11 +6,17 @@ var ZLMRTCClient = (function (exports) {
WEBRTC_ICE_CANDIDATE_ERROR: 'WEBRTC_ICE_CANDIDATE_ERROR', WEBRTC_ICE_CANDIDATE_ERROR: 'WEBRTC_ICE_CANDIDATE_ERROR',
WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED: 'WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED', WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED: 'WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED',
WEBRTC_ON_REMOTE_STREAMS: 'WEBRTC_ON_REMOTE_STREAMS', WEBRTC_ON_REMOTE_STREAMS: 'WEBRTC_ON_REMOTE_STREAMS',
WEBRTC_ON_LOCAL_STREAM: 'WEBRTC_ON_LOCAL_STREAM' WEBRTC_ON_LOCAL_STREAM: 'WEBRTC_ON_LOCAL_STREAM',
WEBRTC_ON_CONNECTION_STATE_CHANGE: 'WEBRTC_ON_CONNECTION_STATE_CHANGE',
WEBRTC_ON_DATA_CHANNEL_OPEN: 'WEBRTC_ON_DATA_CHANNEL_OPEN',
WEBRTC_ON_DATA_CHANNEL_CLOSE: 'WEBRTC_ON_DATA_CHANNEL_CLOSE',
WEBRTC_ON_DATA_CHANNEL_ERR: 'WEBRTC_ON_DATA_CHANNEL_ERR',
WEBRTC_ON_DATA_CHANNEL_MSG: 'WEBRTC_ON_DATA_CHANNEL_MSG',
CAPTURE_STREAM_FAILED: 'CAPTURE_STREAM_FAILED'
}; };
const VERSION = '1.0.1'; const VERSION = '1.0.1';
const BUILD_DATE = 'Mon Apr 05 2021 10:22:48 GMT+0800 (中国标准时间)'; const BUILD_DATE = 'Thu Mar 24 2022 17:42:57 GMT+0800 (China Standard Time)';
// Copyright (C) <2018> Intel Corporation // Copyright (C) <2018> Intel Corporation
// //
@ -7284,11 +7290,16 @@ var ZLMRTCClient = (function (exports) {
debug: false, debug: false,
// if output debug log // if output debug log
zlmsdpUrl: '', zlmsdpUrl: '',
simulecast: false, simulcast: false,
useCamera: true, useCamera: true,
audioEnable: true, audioEnable: true,
videoEnable: true, videoEnable: true,
recvOnly: false recvOnly: false,
resolution: {
w: 0,
h: 0
},
usedatachannel: false
}; };
this.options = Object.assign({}, defaults, options); this.options = Object.assign({}, defaults, options);
@ -7299,7 +7310,12 @@ var ZLMRTCClient = (function (exports) {
this.e = { this.e = {
onicecandidate: this._onIceCandidate.bind(this), onicecandidate: this._onIceCandidate.bind(this),
ontrack: this._onTrack.bind(this), ontrack: this._onTrack.bind(this),
onicecandidateerror: this._onIceCandidateError.bind(this) onicecandidateerror: this._onIceCandidateError.bind(this),
onconnectionstatechange: this._onconnectionstatechange.bind(this),
ondatachannelopen: this._onDataChannelOpen.bind(this),
ondatachannelmsg: this._onDataChannelMsg.bind(this),
ondatachannelerr: this._onDataChannelErr.bind(this),
ondatachannelclose: this._onDataChannelClose.bind(this)
}; };
this._remoteStream = null; this._remoteStream = null;
this._localStream = null; this._localStream = null;
@ -7307,6 +7323,17 @@ var ZLMRTCClient = (function (exports) {
this.pc.onicecandidate = this.e.onicecandidate; this.pc.onicecandidate = this.e.onicecandidate;
this.pc.onicecandidateerror = this.e.onicecandidateerror; this.pc.onicecandidateerror = this.e.onicecandidateerror;
this.pc.ontrack = this.e.ontrack; this.pc.ontrack = this.e.ontrack;
this.pc.onconnectionstatechange = this.e.onconnectionstatechange;
this.datachannel = null;
if (this.options.usedatachannel) {
this.datachannel = this.pc.createDataChannel('chat');
this.datachannel.onclose = this.e.ondatachannelclose;
this.datachannel.onerror = this.e.ondatachannelerr;
this.datachannel.onmessage = this.e.ondatachannelmsg;
this.datachannel.onopen = this.e.ondatachannelopen;
}
if (!this.options.recvOnly && (this.options.audioEnable || this.options.videoEnable)) this.start();else this.receive(); if (!this.options.recvOnly && (this.options.audioEnable || this.options.videoEnable)) this.start();else this.receive();
} }
@ -7347,7 +7374,7 @@ var ZLMRTCClient = (function (exports) {
anwser.type = 'answer'; anwser.type = 'answer';
log(this.TAG, 'answer:', ret.sdp); log(this.TAG, 'answer:', ret.sdp);
this.pc.setRemoteDescription(anwser).then(() => { this.pc.setRemoteDescription(anwser).then(() => {
log(this.TAG, 'set remote success'); log(this.TAG, 'set remote sucess');
}).catch(e => { }).catch(e => {
error(this.TAG, e); error(this.TAG, e);
}); });
@ -7377,6 +7404,10 @@ var ZLMRTCClient = (function (exports) {
} }
} }
if (this.options.resolution.w != 0 && this.options.resolution.h != 0 && typeof videoConstraints == 'object') {
videoConstraints.resolution = new Resolution(this.options.resolution.w, this.options.resolution.h);
}
MediaStreamFactory.createMediaStream(new StreamConstraints(audioConstraints, videoConstraints)).then(stream => { MediaStreamFactory.createMediaStream(new StreamConstraints(audioConstraints, videoConstraints)).then(stream => {
this._localStream = stream; this._localStream = stream;
this.dispatch(Events$1.WEBRTC_ON_LOCAL_STREAM, stream); this.dispatch(Events$1.WEBRTC_ON_LOCAL_STREAM, stream);
@ -7389,33 +7420,40 @@ var ZLMRTCClient = (function (exports) {
sendEncodings: [] sendEncodings: []
}; };
if (this.options.simulecast && stream.getVideoTracks().length > 0) { if (this.options.simulcast && stream.getVideoTracks().length > 0) {
VideoTransceiverInit.sendEncodings = [{ VideoTransceiverInit.sendEncodings = [{
rid: 'q', rid: 'h',
active: true, active: true,
scaleResolutionDownBy: 4.0 maxBitrate: 1000000
}, { }, {
rid: 'h', rid: 'm',
active: true, active: true,
scaleResolutionDownBy: 2.0 maxBitrate: 500000,
scaleResolutionDownBy: 2
}, { }, {
rid: 'f', rid: 'l',
active: true active: true,
maxBitrate: 200000,
scaleResolutionDownBy: 4
}]; }];
} }
if (stream.getAudioTracks().length > 0) { if (this.options.audioEnable) {
this.pc.addTransceiver(stream.getAudioTracks()[0], AudioTransceiverInit); if (stream.getAudioTracks().length > 0) {
} else { this.pc.addTransceiver(stream.getAudioTracks()[0], AudioTransceiverInit);
AudioTransceiverInit.direction = 'recvonly'; } else {
this.pc.addTransceiver('audio', AudioTransceiverInit); AudioTransceiverInit.direction = 'recvonly';
this.pc.addTransceiver('audio', AudioTransceiverInit);
}
} }
if (stream.getVideoTracks().length > 0) { if (this.options.videoEnable) {
this.pc.addTransceiver(stream.getVideoTracks()[0], VideoTransceiverInit); if (stream.getVideoTracks().length > 0) {
} else { this.pc.addTransceiver(stream.getVideoTracks()[0], VideoTransceiverInit);
VideoTransceiverInit.direction = 'recvonly'; } else {
this.pc.addTransceiver('video', VideoTransceiverInit); VideoTransceiverInit.direction = 'recvonly';
this.pc.addTransceiver('video', VideoTransceiverInit);
}
} }
/* /*
stream.getTracks().forEach((track,idx)=>{ stream.getTracks().forEach((track,idx)=>{
@ -7450,7 +7488,7 @@ var ZLMRTCClient = (function (exports) {
anwser.type = 'answer'; anwser.type = 'answer';
log(this.TAG, 'answer:', ret.sdp); log(this.TAG, 'answer:', ret.sdp);
this.pc.setRemoteDescription(anwser).then(() => { this.pc.setRemoteDescription(anwser).then(() => {
log(this.TAG, 'set remote success'); log(this.TAG, 'set remote sucess');
}).catch(e => { }).catch(e => {
error(this.TAG, e); error(this.TAG, e);
}); });
@ -7460,7 +7498,7 @@ var ZLMRTCClient = (function (exports) {
error(this.TAG, e); error(this.TAG, e);
}); });
}).catch(e => { }).catch(e => {
error(this.TAG, e); this.dispatch(Events$1.CAPTURE_STREAM_FAILED); //debug.error(this.TAG,e);
}); //const offerOptions = {}; }); //const offerOptions = {};
/* /*
@ -7495,7 +7533,48 @@ var ZLMRTCClient = (function (exports) {
this.dispatch(Events$1.WEBRTC_ICE_CANDIDATE_ERROR, event); this.dispatch(Events$1.WEBRTC_ICE_CANDIDATE_ERROR, event);
} }
_onconnectionstatechange(event) {
this.dispatch(Events$1.WEBRTC_ON_CONNECTION_STATE_CHANGE, this.pc.connectionState);
}
_onDataChannelOpen(event) {
log(this.TAG, 'ondatachannel open:', event);
this.dispatch(Events$1.WEBRTC_ON_DATA_CHANNEL_OPEN, event);
}
_onDataChannelMsg(event) {
log(this.TAG, 'ondatachannel msg:', event);
this.dispatch(Events$1.WEBRTC_ON_DATA_CHANNEL_MSG, event);
}
_onDataChannelErr(event) {
log(this.TAG, 'ondatachannel err:', event);
this.dispatch(Events$1.WEBRTC_ON_DATA_CHANNEL_ERR, event);
}
_onDataChannelClose(event) {
log(this.TAG, 'ondatachannel close:', event);
this.dispatch(Events$1.WEBRTC_ON_DATA_CHANNEL_CLOSE, event);
}
sendMsg(data) {
if (this.datachannel != null) {
this.datachannel.send(data);
} else {
error(this.TAG, 'data channel is null');
}
}
closeDataChannel() {
if (this.datachannel) {
this.datachannel.close();
this.datachannel = null;
}
}
close() { close() {
this.closeDataChannel();
if (this.pc) { if (this.pc) {
this.pc.close(); this.pc.close();
this.pc = null; this.pc = null;
@ -7528,15 +7607,108 @@ var ZLMRTCClient = (function (exports) {
} }
const quickScan = [{
'label': '4K(UHD)',
'width': 3840,
'height': 2160
}, {
'label': '1080p(FHD)',
'width': 1920,
'height': 1080
}, {
'label': 'UXGA',
'width': 1600,
'height': 1200,
'ratio': '4:3'
}, {
'label': '720p(HD)',
'width': 1280,
'height': 720
}, {
'label': 'SVGA',
'width': 800,
'height': 600
}, {
'label': 'VGA',
'width': 640,
'height': 480
}, {
'label': '360p(nHD)',
'width': 640,
'height': 360
}, {
'label': 'CIF',
'width': 352,
'height': 288
}, {
'label': 'QVGA',
'width': 320,
'height': 240
}, {
'label': 'QCIF',
'width': 176,
'height': 144
}, {
'label': 'QQVGA',
'width': 160,
'height': 120
}];
function GetSupportCameraResolutions$1() {
return new Promise(function (resolve, reject) {
let resolutions = [];
let ok = 0;
let err = 0;
for (let i = 0; i < quickScan.length; ++i) {
let videoConstraints = new VideoTrackConstraints(VideoSourceInfo.CAMERA);
videoConstraints.resolution = new Resolution(quickScan[i].width, quickScan[i].height);
MediaStreamFactory.createMediaStream(new StreamConstraints(false, videoConstraints)).then(stream => {
resolutions.push(quickScan[i]);
ok++;
if (ok + err == quickScan.length) {
resolve(resolutions);
}
}).catch(e => {
err++;
if (ok + err == quickScan.length) {
resolve(resolutions);
}
});
}
});
}
function GetAllScanResolution$1() {
return quickScan;
}
function isSupportResolution$1(w, h) {
return new Promise(function (resolve, reject) {
let videoConstraints = new VideoTrackConstraints(VideoSourceInfo.CAMERA);
videoConstraints.resolution = new Resolution(w, h);
MediaStreamFactory.createMediaStream(new StreamConstraints(false, videoConstraints)).then(stream => {
resolve();
}).catch(e => {
reject(e);
});
});
}
console.log('build date:', BUILD_DATE); console.log('build date:', BUILD_DATE);
console.log('version:', VERSION); console.log('version:', VERSION);
const Events = Events$1; const Events = Events$1;
const Media = media; const Media = media;
const Endpoint = RTCEndpoint; const Endpoint = RTCEndpoint;
const GetSupportCameraResolutions = GetSupportCameraResolutions$1;
const GetAllScanResolution = GetAllScanResolution$1;
const isSupportResolution = isSupportResolution$1;
exports.Endpoint = Endpoint; exports.Endpoint = Endpoint;
exports.Events = Events; exports.Events = Events;
exports.GetAllScanResolution = GetAllScanResolution;
exports.GetSupportCameraResolutions = GetSupportCameraResolutions;
exports.Media = Media; exports.Media = Media;
exports.isSupportResolution = isSupportResolution;
Object.defineProperty(exports, '__esModule', { value: true }); Object.defineProperty(exports, '__esModule', { value: true });

1
web_src/static/js/ZLMRTCClient.js.map
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save