Commit 038d360dd4f2dd3c06f5d97dc66ed13fd78de212
Merge remote-tracking branch 'origin/rtc' into commercial
# Conflicts: # web_src/src/components/dialog/devicePlayer.vue
Showing
1 changed file
with
72 additions
and
220 deletions
web_src/src/components/dialog/devicePlayer.vue
| @@ -3,23 +3,9 @@ | @@ -3,23 +3,9 @@ | ||
| 3 | 3 | ||
| 4 | <el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" @close="close()"> | 4 | <el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" @close="close()"> |
| 5 | <!-- <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :message="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer> --> | 5 | <!-- <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :message="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer> --> |
| 6 | - <div style="width: 100%; height: 100%"> | ||
| 7 | - <el-tabs type="card" :stretch="true" v-model="activePlayer" @tab-click="changePlayer" v-if="Object.keys(this.player).length > 1"> | ||
| 8 | - <el-tab-pane label="Jessibuca" name="jessibuca"> | ||
| 9 | - <jessibucaPlayer v-if="activePlayer === 'jessibuca'" ref="jessibuca" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></jessibucaPlayer> | ||
| 10 | - </el-tab-pane> | ||
| 11 | - <el-tab-pane label="WebRTC" name="webRTC"> | ||
| 12 | - <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> | ||
| 13 | - </el-tab-pane> | ||
| 14 | - <el-tab-pane label="h265web">h265web敬请期待</el-tab-pane> | ||
| 15 | - <el-tab-pane label="wsPlayer">wsPlayer 敬请期待</el-tab-pane> | ||
| 16 | - </el-tabs> | ||
| 17 | - <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> | ||
| 18 | - <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> | ||
| 19 | - | ||
| 20 | - </div> | 6 | + <player ref="videoPlayer" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" :height="false" :hasAudio="hasAudio" fluent autoplay live ></player> |
| 21 | <div id="shared" style="text-align: right; margin-top: 1rem;"> | 7 | <div id="shared" style="text-align: right; margin-top: 1rem;"> |
| 22 | - <el-tabs v-model="tabActiveName" @tab-click="tabHandleClick" > | 8 | + <el-tabs v-model="tabActiveName" @tab-click="tabHandleClick"> |
| 23 | <el-tab-pane label="实时视频" name="media"> | 9 | <el-tab-pane label="实时视频" name="media"> |
| 24 | <div style="margin-bottom: 0.5rem;"> | 10 | <div style="margin-bottom: 0.5rem;"> |
| 25 | <!-- <el-button type="primary" size="small" @click="playRecord(true, '')">播放</el-button>--> | 11 | <!-- <el-button type="primary" size="small" @click="playRecord(true, '')">播放</el-button>--> |
| @@ -45,100 +31,10 @@ | @@ -45,100 +31,10 @@ | ||
| 45 | <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;"> | 31 | <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;"> |
| 46 | <span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址:</span> | 32 | <span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址:</span> |
| 47 | <el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" > | 33 | <el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" > |
| 48 | - <el-button slot="append" icon="el-icon-document-copy" title="点击拷贝" v-clipboard="getPlayerShared.sharedRtmp" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button> | ||
| 49 | - <el-dropdown slot="prepend" v-if="streamInfo" trigger="click" @command="copyUrl"> | ||
| 50 | - <el-button > | ||
| 51 | - 更多地址<i class="el-icon-arrow-down el-icon--right"></i> | ||
| 52 | - </el-button> | ||
| 53 | - <el-dropdown-menu slot="dropdown" > | ||
| 54 | - <el-dropdown-item :command="streamInfo.flv"> | ||
| 55 | - <el-tag >FLV:</el-tag> | ||
| 56 | - <span>{{ streamInfo.flv }}</span> | ||
| 57 | - </el-dropdown-item> | ||
| 58 | - <el-dropdown-item :command="streamInfo.https_flv"> | ||
| 59 | - <el-tag >FLV(https):</el-tag> | ||
| 60 | - <span>{{ streamInfo.https_flv }}</span> | ||
| 61 | - </el-dropdown-item> | ||
| 62 | - <el-dropdown-item :command="streamInfo.ws_flv"> | ||
| 63 | - <el-tag >FLV(ws):</el-tag> | ||
| 64 | - <span >{{ streamInfo.ws_flv }}</span> | ||
| 65 | - </el-dropdown-item> | ||
| 66 | - <el-dropdown-item :command="streamInfo.wss_flv"> | ||
| 67 | - <el-tag >FLV(wss):</el-tag> | ||
| 68 | - <span>{{ streamInfo.wss_flv }}</span> | ||
| 69 | - </el-dropdown-item> | ||
| 70 | - <el-dropdown-item :command="streamInfo.fmp4"> | ||
| 71 | - <el-tag >FMP4:</el-tag> | ||
| 72 | - <span>{{ streamInfo.fmp4 }}</span> | ||
| 73 | - </el-dropdown-item> | ||
| 74 | - <el-dropdown-item :command="streamInfo.https_fmp4"> | ||
| 75 | - <el-tag >FMP4(https):</el-tag> | ||
| 76 | - <span>{{ streamInfo.https_fmp4 }}</span> | ||
| 77 | - </el-dropdown-item> | ||
| 78 | - <el-dropdown-item :command="streamInfo.ws_fmp4"> | ||
| 79 | - <el-tag >FMP4(ws):</el-tag> | ||
| 80 | - <span>{{ streamInfo.ws_fmp4 }}</span> | ||
| 81 | - </el-dropdown-item> | ||
| 82 | - <el-dropdown-item :command="streamInfo.wss_fmp4"> | ||
| 83 | - <el-tag >FMP4(wss):</el-tag> | ||
| 84 | - <span>{{ streamInfo.wss_fmp4 }}</span> | ||
| 85 | - </el-dropdown-item> | ||
| 86 | - <el-dropdown-item :command="streamInfo.hls"> | ||
| 87 | - <el-tag>HLS:</el-tag> | ||
| 88 | - <span>{{ streamInfo.hls }}</span> | ||
| 89 | - </el-dropdown-item> | ||
| 90 | - <el-dropdown-item :command="streamInfo.https_hls"> | ||
| 91 | - <el-tag >HLS(https):</el-tag> | ||
| 92 | - <span>{{ streamInfo.https_hls }}</span> | ||
| 93 | - </el-dropdown-item> | ||
| 94 | - <el-dropdown-item :command="streamInfo.ws_hls"> | ||
| 95 | - <el-tag >HLS(ws):</el-tag> | ||
| 96 | - <span>{{ streamInfo.ws_hls }}</span> | ||
| 97 | - </el-dropdown-item> | ||
| 98 | - <el-dropdown-item :command="streamInfo.wss_hls"> | ||
| 99 | - <el-tag >HLS(wss):</el-tag> | ||
| 100 | - <span>{{ streamInfo.wss_hls }}</span> | ||
| 101 | - </el-dropdown-item> | ||
| 102 | - <el-dropdown-item :command="streamInfo.ts"> | ||
| 103 | - <el-tag>TS:</el-tag> | ||
| 104 | - <span>{{ streamInfo.ts }}</span> | ||
| 105 | - </el-dropdown-item> | ||
| 106 | - <el-dropdown-item :command="streamInfo.https_ts"> | ||
| 107 | - <el-tag>TS(https):</el-tag> | ||
| 108 | - <span>{{ streamInfo.https_ts }}</span> | ||
| 109 | - </el-dropdown-item> | ||
| 110 | - <el-dropdown-item :command="streamInfo.ws_ts"> | ||
| 111 | - <el-tag>TS(ws):</el-tag> | ||
| 112 | - <span>{{ streamInfo.ws_ts }}</span> | ||
| 113 | - </el-dropdown-item> | ||
| 114 | - <el-dropdown-item :command="streamInfo.wss_ts"> | ||
| 115 | - <el-tag>TS(wss):</el-tag> | ||
| 116 | - <span>{{ streamInfo.wss_ts }}</span> | ||
| 117 | - </el-dropdown-item> | ||
| 118 | - <el-dropdown-item :command="streamInfo.rtc"> | ||
| 119 | - <el-tag >RTC:</el-tag> | ||
| 120 | - <span>{{ streamInfo.rtc }}</span> | ||
| 121 | - </el-dropdown-item> | ||
| 122 | - <el-dropdown-item :command="streamInfo.rtmp"> | ||
| 123 | - <el-tag >RTMP:</el-tag> | ||
| 124 | - <span>{{ streamInfo.rtmp }}</span> | ||
| 125 | - </el-dropdown-item> | ||
| 126 | - <el-dropdown-item :command="streamInfo.rtmps"> | ||
| 127 | - <el-tag >RTMPS:</el-tag> | ||
| 128 | - <span>{{ streamInfo.rtmps }}</span> | ||
| 129 | - </el-dropdown-item> | ||
| 130 | - <el-dropdown-item :command="streamInfo.rtsp"> | ||
| 131 | - <el-tag >RTSP:</el-tag> | ||
| 132 | - <span>{{ streamInfo.rtsp }}</span> | ||
| 133 | - </el-dropdown-item> | ||
| 134 | - <el-dropdown-item :command="streamInfo.rtsps"> | ||
| 135 | - <el-tag >RTSPS:</el-tag> | ||
| 136 | - <span>{{ streamInfo.rtsps }}</span> | ||
| 137 | - </el-dropdown-item> | ||
| 138 | - </el-dropdown-menu> | ||
| 139 | - </el-dropdown> | 34 | + <template slot="append"> |
| 35 | + <i class="cpoy-btn el-icon-document-copy" title="点击拷贝" v-clipboard="getPlayerShared.sharedRtmp" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></i> | ||
| 36 | + </template> | ||
| 140 | </el-input> | 37 | </el-input> |
| 141 | - | ||
| 142 | </div> | 38 | </div> |
| 143 | </el-tab-pane> | 39 | </el-tab-pane> |
| 144 | <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}--> | 40 | <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}--> |
| @@ -219,27 +115,27 @@ | @@ -219,27 +115,27 @@ | ||
| 219 | 115 | ||
| 220 | <div class="control-panel"> | 116 | <div class="control-panel"> |
| 221 | <el-button-group> | 117 | <el-button-group> |
| 222 | - <el-tag style="position :absolute; left: 0rem; top: 0rem; width: 5rem; text-align: center" size="medium">预置位编号</el-tag> | 118 | + <el-tag style="position :absolute; left: 0rem; top: 0rem; width: 5rem; text-align: center" size="medium" type="info">预置位编号</el-tag> |
| 223 | <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> | 119 | <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> |
| 224 | <el-button style="position: absolute; left: 11rem; top: 0rem; width: 5rem" size="mini" icon="el-icon-add-location" @click="presetPosition(129, presetPos)">设置</el-button> | 120 | <el-button style="position: absolute; left: 11rem; top: 0rem; width: 5rem" size="mini" icon="el-icon-add-location" @click="presetPosition(129, presetPos)">设置</el-button> |
| 225 | <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> | 121 | <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> |
| 226 | <el-button style="position: absolute; left: 16rem; top: 0rem; width: 5rem" size="mini" icon="el-icon-delete-location" @click="presetPosition(131, presetPos)">删除</el-button> | 122 | <el-button style="position: absolute; left: 16rem; top: 0rem; width: 5rem" size="mini" icon="el-icon-delete-location" @click="presetPosition(131, presetPos)">删除</el-button> |
| 227 | - <el-tag style="position :absolute; left: 0rem; top: 2.5rem; width: 5rem; text-align: center" size="medium">巡航速度</el-tag> | 123 | + <el-tag style="position :absolute; left: 0rem; top: 2.5rem; width: 5rem; text-align: center" size="medium" type="info">巡航速度</el-tag> |
| 228 | <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> | 124 | <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> |
| 229 | <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> | 125 | <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> |
| 230 | - <el-tag style="position :absolute; left: 16rem; top: 2.5rem; width: 5rem; text-align: center" size="medium">停留时间</el-tag> | 126 | + <el-tag style="position :absolute; left: 16rem; top: 2.5rem; width: 5rem; text-align: center" size="medium" type="info">停留时间</el-tag> |
| 231 | <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> | 127 | <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> |
| 232 | <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> | 128 | <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> |
| 233 | - <el-tag style="position :absolute; left: 0rem; top: 4.5rem; width: 5rem; text-align: center" size="medium">巡航组编号</el-tag> | 129 | + <el-tag style="position :absolute; left: 0rem; top: 4.5rem; width: 5rem; text-align: center" size="medium" type="info">巡航组编号</el-tag> |
| 234 | <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> | 130 | <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> |
| 235 | <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> | 131 | <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> |
| 236 | <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> | 132 | <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> |
| 237 | <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> | 133 | <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> |
| 238 | <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> | 134 | <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> |
| 239 | - <el-tag style="position :absolute; left: 0rem; top: 7rem; width: 5rem; text-align: center" size="medium">扫描速度</el-tag> | 135 | + <el-tag style="position :absolute; left: 0rem; top: 7rem; width: 5rem; text-align: center" size="medium" type="info">扫描速度</el-tag> |
| 240 | <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> | 136 | <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> |
| 241 | <el-button style="position: absolute; left: 11rem; top: 7rem; width: 5rem" size="mini" icon="el-icon-loading" @click="setSpeedOrTime(138, scanGroup, scanSpeed)">设置</el-button> | 137 | <el-button style="position: absolute; left: 11rem; top: 7rem; width: 5rem" size="mini" icon="el-icon-loading" @click="setSpeedOrTime(138, scanGroup, scanSpeed)">设置</el-button> |
| 242 | - <el-tag style="position :absolute; left: 0rem; top: 9rem; width: 5rem; text-align: center" size="medium">扫描组编号</el-tag> | 138 | + <el-tag style="position :absolute; left: 0rem; top: 9rem; width: 5rem; text-align: center" size="medium" type="info">扫描组编号</el-tag> |
| 243 | <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> | 139 | <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> |
| 244 | <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> | 140 | <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> |
| 245 | <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> | 141 | <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> |
| @@ -276,28 +172,26 @@ | @@ -276,28 +172,26 @@ | ||
| 276 | </div> | 172 | </div> |
| 277 | 173 | ||
| 278 | </el-tab-pane> | 174 | </el-tab-pane> |
| 279 | - | ||
| 280 | </el-tabs> | 175 | </el-tabs> |
| 281 | </div> | 176 | </div> |
| 282 | </el-dialog> | 177 | </el-dialog> |
| 283 | - <recordDownload ref="recordDownload"></recordDownload> | ||
| 284 | </div> | 178 | </div> |
| 285 | </template> | 179 | </template> |
| 286 | 180 | ||
| 287 | <script> | 181 | <script> |
| 288 | -import rtcPlayer from '../dialog/rtcPlayer.vue' | 182 | +import player from '../dialog/rtcPlayer.vue' |
| 289 | // import LivePlayer from '@liveqing/liveplayer' | 183 | // import LivePlayer from '@liveqing/liveplayer' |
| 290 | // import player from '../dialog/easyPlayer.vue' | 184 | // import player from '../dialog/easyPlayer.vue' |
| 291 | -import jessibucaPlayer from '../common/jessibuca.vue' | ||
| 292 | -import recordDownload from '../dialog/recordDownload.vue' | 185 | +// import player from '../dialog/jessibuca.vue' |
| 293 | export default { | 186 | export default { |
| 294 | name: 'devicePlayer', | 187 | name: 'devicePlayer', |
| 295 | props: {}, | 188 | props: {}, |
| 296 | components: { | 189 | components: { |
| 297 | - jessibucaPlayer, rtcPlayer, recordDownload, | 190 | + player, |
| 298 | }, | 191 | }, |
| 299 | computed: { | 192 | computed: { |
| 300 | getPlayerShared: function () { | 193 | getPlayerShared: function () { |
| 194 | + | ||
| 301 | return { | 195 | return { |
| 302 | sharedUrl: window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl), | 196 | sharedUrl: window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl), |
| 303 | sharedIframe: '<iframe src="' + window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl) + '"></iframe>', | 197 | sharedIframe: '<iframe src="' + window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl) + '"></iframe>', |
| @@ -305,22 +199,11 @@ export default { | @@ -305,22 +199,11 @@ export default { | ||
| 305 | }; | 199 | }; |
| 306 | } | 200 | } |
| 307 | }, | 201 | }, |
| 308 | - created() { | ||
| 309 | - console.log(this.player) | ||
| 310 | - if (Object.keys(this.player).length === 1) { | ||
| 311 | - this.activePlayer = Object.keys(this.player)[0] | ||
| 312 | - } | ||
| 313 | - }, | 202 | + created() {}, |
| 314 | data() { | 203 | data() { |
| 315 | return { | 204 | return { |
| 316 | video: 'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4', | 205 | video: 'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4', |
| 317 | videoUrl: '', | 206 | videoUrl: '', |
| 318 | - activePlayer: "jessibuca", | ||
| 319 | - // 如何你只是用一种播放器,直接注释掉不用的部分即可 | ||
| 320 | - player: { | ||
| 321 | - jessibuca : ["ws_flv", "wss_flv"], | ||
| 322 | - webRTC: ["rtc", "rtc"], | ||
| 323 | - }, | ||
| 324 | videoHistory: { | 207 | videoHistory: { |
| 325 | date: '', | 208 | date: '', |
| 326 | searchHistoryResult: [] //媒体流历史记录搜索结果 | 209 | searchHistoryResult: [] //媒体流历史记录搜索结果 |
| @@ -358,7 +241,6 @@ export default { | @@ -358,7 +241,6 @@ export default { | ||
| 358 | seekTime: 0, | 241 | seekTime: 0, |
| 359 | recordStartTime: 0, | 242 | recordStartTime: 0, |
| 360 | showTimeText: "00:00:00", | 243 | showTimeText: "00:00:00", |
| 361 | - streamInfo: null, | ||
| 362 | }; | 244 | }; |
| 363 | }, | 245 | }, |
| 364 | methods: { | 246 | methods: { |
| @@ -368,7 +250,7 @@ export default { | @@ -368,7 +250,7 @@ export default { | ||
| 368 | that.tracks = []; | 250 | that.tracks = []; |
| 369 | that.tracksLoading = true; | 251 | that.tracksLoading = true; |
| 370 | that.tracksNotLoaded = false; | 252 | that.tracksNotLoaded = false; |
| 371 | - if (tab.name === "codec") { | 253 | + if (tab.name == "codec") { |
| 372 | this.$axios({ | 254 | this.$axios({ |
| 373 | method: 'get', | 255 | method: 'get', |
| 374 | url: '/zlm/' +this.mediaServerId+ '/index/api/getMediaInfo?vhost=__defaultVhost__&schema=rtmp&app='+ this.app +'&stream='+ this.streamId | 256 | url: '/zlm/' +this.mediaServerId+ '/index/api/getMediaInfo?vhost=__defaultVhost__&schema=rtmp&app='+ this.app +'&stream='+ this.streamId |
| @@ -387,12 +269,6 @@ export default { | @@ -387,12 +269,6 @@ export default { | ||
| 387 | }).catch(function (e) {}); | 269 | }).catch(function (e) {}); |
| 388 | } | 270 | } |
| 389 | }, | 271 | }, |
| 390 | - changePlayer: function (tab) { | ||
| 391 | - console.log(this.player[tab.name][0]) | ||
| 392 | - this.activePlayer = tab.name; | ||
| 393 | - this.videoUrl = this.streamInfo[this.player[tab.name][0]] | ||
| 394 | - console.log(this.videoUrl) | ||
| 395 | - }, | ||
| 396 | openDialog: function (tab, deviceId, channelId, param) { | 272 | openDialog: function (tab, deviceId, channelId, param) { |
| 397 | this.tabActiveName = tab; | 273 | this.tabActiveName = tab; |
| 398 | this.channelId = channelId; | 274 | this.channelId = channelId; |
| @@ -401,8 +277,8 @@ export default { | @@ -401,8 +277,8 @@ export default { | ||
| 401 | this.mediaServerId = ""; | 277 | this.mediaServerId = ""; |
| 402 | this.app = ""; | 278 | this.app = ""; |
| 403 | this.videoUrl = "" | 279 | this.videoUrl = "" |
| 404 | - if (!!this.$refs[this.activePlayer]) { | ||
| 405 | - this.$refs[this.activePlayer].pause(); | 280 | + if (!!this.$refs.videoPlayer) { |
| 281 | + this.$refs.videoPlayer.pause(); | ||
| 406 | } | 282 | } |
| 407 | switch (tab) { | 283 | switch (tab) { |
| 408 | case "media": | 284 | case "media": |
| @@ -427,32 +303,44 @@ export default { | @@ -427,32 +303,44 @@ export default { | ||
| 427 | console.log(val) | 303 | console.log(val) |
| 428 | }, | 304 | }, |
| 429 | play: function (streamInfo, hasAudio) { | 305 | play: function (streamInfo, hasAudio) { |
| 430 | - this.streamInfo = streamInfo; | ||
| 431 | this.hasAudio = hasAudio; | 306 | this.hasAudio = hasAudio; |
| 432 | this.isLoging = false; | 307 | this.isLoging = false; |
| 433 | - // this.videoUrl = streamInfo.rtc; | ||
| 434 | - this.videoUrl = this.getUrlByStreamInfo(); | ||
| 435 | - this.streamId = streamInfo.stream; | 308 | + this.videoUrl = streamInfo.rtc; |
| 309 | + // this.videoUrl = this.getUrlByStreamInfo(streamInfo); | ||
| 310 | + this.streamId = streamInfo.streamId; | ||
| 436 | this.app = streamInfo.app; | 311 | this.app = streamInfo.app; |
| 437 | this.mediaServerId = streamInfo.mediaServerId; | 312 | this.mediaServerId = streamInfo.mediaServerId; |
| 438 | this.playFromStreamInfo(false, streamInfo) | 313 | this.playFromStreamInfo(false, streamInfo) |
| 439 | }, | 314 | }, |
| 440 | - getUrlByStreamInfo(){ | 315 | + getUrlByStreamInfo(streamInfo){ |
| 316 | + let baseZlmApi = process.env.NODE_ENV === 'development'?`${location.host}/debug/zlm`:`${location.host}/zlm` | ||
| 317 | + // return `${baseZlmApi}/${streamInfo.app}/${streamInfo.streamId}.flv`; | ||
| 318 | + // return `http://${baseZlmApi}/${streamInfo.app}/${streamInfo.streamId}.flv`; | ||
| 441 | if (location.protocol === "https:") { | 319 | if (location.protocol === "https:") { |
| 442 | - this.videoUrl = this.streamInfo[this.player[this.activePlayer][1]] | 320 | + if (streamInfo.wss_flv === null) { |
| 321 | + console.error("媒体服务器未配置ssl端口, 使用http端口") | ||
| 322 | + // this.$message({ | ||
| 323 | + // showClose: true, | ||
| 324 | + // message: '媒体服务器未配置ssl端口, ', | ||
| 325 | + // type: 'error' | ||
| 326 | + // }); | ||
| 327 | + return streamInfo.ws_flv | ||
| 328 | + }else { | ||
| 329 | + return streamInfo.wss_flv; | ||
| 330 | + } | ||
| 331 | + | ||
| 443 | }else { | 332 | }else { |
| 444 | - this.videoUrl = this.streamInfo[this.player[this.activePlayer][0]] | 333 | + return streamInfo.ws_flv; |
| 445 | } | 334 | } |
| 446 | - return this.videoUrl; | ||
| 447 | 335 | ||
| 448 | }, | 336 | }, |
| 449 | coverPlay: function () { | 337 | coverPlay: function () { |
| 450 | var that = this; | 338 | var that = this; |
| 451 | this.coverPlaying = true; | 339 | this.coverPlaying = true; |
| 452 | - this.$refs[this.activePlayer].pause() | 340 | + this.$refs.videoPlayer.pause() |
| 453 | that.$axios({ | 341 | that.$axios({ |
| 454 | method: 'post', | 342 | method: 'post', |
| 455 | - url: '/api/gb_record/convert/' + that.streamId | 343 | + url: '/api/play/convert/' + that.streamId |
| 456 | }).then(function (res) { | 344 | }).then(function (res) { |
| 457 | if (res.data.code == 0) { | 345 | if (res.data.code == 0) { |
| 458 | that.convertKey = res.data.key; | 346 | that.convertKey = res.data.key; |
| @@ -481,7 +369,7 @@ export default { | @@ -481,7 +369,7 @@ export default { | ||
| 481 | }, | 369 | }, |
| 482 | convertStopClick: function() { | 370 | convertStopClick: function() { |
| 483 | this.convertStop(()=>{ | 371 | this.convertStop(()=>{ |
| 484 | - this.$refs[this.activePlayer].play(this.videoUrl) | 372 | + this.$refs.videoPlayer.play(this.videoUrl) |
| 485 | }); | 373 | }); |
| 486 | }, | 374 | }, |
| 487 | convertStop: function(callback) { | 375 | convertStop: function(callback) { |
| @@ -506,12 +394,12 @@ export default { | @@ -506,12 +394,12 @@ export default { | ||
| 506 | playFromStreamInfo: function (realHasAudio, streamInfo) { | 394 | playFromStreamInfo: function (realHasAudio, streamInfo) { |
| 507 | this.showVideoDialog = true; | 395 | this.showVideoDialog = true; |
| 508 | this.hasaudio = realHasAudio && this.hasaudio; | 396 | this.hasaudio = realHasAudio && this.hasaudio; |
| 509 | - this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo)) | 397 | + this.$refs.videoPlayer.play(this.getUrlByStreamInfo(streamInfo)) |
| 510 | }, | 398 | }, |
| 511 | close: function () { | 399 | close: function () { |
| 512 | console.log('关闭视频'); | 400 | console.log('关闭视频'); |
| 513 | - if (!!this.$refs[this.activePlayer]){ | ||
| 514 | - this.$refs[this.activePlayer].pause(); | 401 | + if (!!this.$refs.videoPlayer){ |
| 402 | + this.$refs.videoPlayer.pause(); | ||
| 515 | } | 403 | } |
| 516 | this.videoUrl = ''; | 404 | this.videoUrl = ''; |
| 517 | this.coverPlaying = false; | 405 | this.coverPlaying = false; |
| @@ -562,19 +450,9 @@ export default { | @@ -562,19 +450,9 @@ export default { | ||
| 562 | method: 'get', | 450 | method: 'get', |
| 563 | url: '/api/gb_record/query/' + this.deviceId + '/' + this.channelId + '?startTime=' + startTime + '&endTime=' + endTime | 451 | url: '/api/gb_record/query/' + this.deviceId + '/' + this.channelId + '?startTime=' + startTime + '&endTime=' + endTime |
| 564 | }).then(function (res) { | 452 | }).then(function (res) { |
| 565 | - console.log(res) | ||
| 566 | - if(res.data.code === 0) { | ||
| 567 | - // 处理时间信息 | ||
| 568 | - that.videoHistory.searchHistoryResult = res.data.data.recordList; | ||
| 569 | - that.recordsLoading = false; | ||
| 570 | - }else { | ||
| 571 | - this.$message({ | ||
| 572 | - showClose: true, | ||
| 573 | - message: res.data.msg, | ||
| 574 | - type: "error", | ||
| 575 | - }); | ||
| 576 | - } | ||
| 577 | - | 453 | + // 处理时间信息 |
| 454 | + that.videoHistory.searchHistoryResult = res.data.recordList; | ||
| 455 | + that.recordsLoading = false; | ||
| 578 | }).catch(function (e) { | 456 | }).catch(function (e) { |
| 579 | console.log(e.message); | 457 | console.log(e.message); |
| 580 | // that.videoHistory.searchHistoryResult = falsificationData.recordData; | 458 | // that.videoHistory.searchHistoryResult = falsificationData.recordData; |
| @@ -596,8 +474,8 @@ export default { | @@ -596,8 +474,8 @@ export default { | ||
| 596 | console.log(this.seekTime) | 474 | console.log(this.seekTime) |
| 597 | if (that.streamId != "") { | 475 | if (that.streamId != "") { |
| 598 | that.stopPlayRecord(function () { | 476 | that.stopPlayRecord(function () { |
| 599 | - that.streamId = ""; | ||
| 600 | - that.playRecord(row); | 477 | + that.streamId = "", |
| 478 | + that.playRecord(row); | ||
| 601 | }) | 479 | }) |
| 602 | } else { | 480 | } else { |
| 603 | this.$axios({ | 481 | this.$axios({ |
| @@ -607,20 +485,19 @@ export default { | @@ -607,20 +485,19 @@ export default { | ||
| 607 | }).then(function (res) { | 485 | }).then(function (res) { |
| 608 | var streamInfo = res.data; | 486 | var streamInfo = res.data; |
| 609 | that.app = streamInfo.app; | 487 | that.app = streamInfo.app; |
| 610 | - that.streamId = streamInfo.stream; | 488 | + that.streamId = streamInfo.streamId; |
| 611 | that.mediaServerId = streamInfo.mediaServerId; | 489 | that.mediaServerId = streamInfo.mediaServerId; |
| 612 | - that.ssrc = streamInfo.ssrc; | ||
| 613 | that.videoUrl = that.getUrlByStreamInfo(streamInfo); | 490 | that.videoUrl = that.getUrlByStreamInfo(streamInfo); |
| 614 | that.recordPlay = true; | 491 | that.recordPlay = true; |
| 615 | }); | 492 | }); |
| 616 | } | 493 | } |
| 617 | }, | 494 | }, |
| 618 | stopPlayRecord: function (callback) { | 495 | stopPlayRecord: function (callback) { |
| 619 | - this.$refs[this.activePlayer].pause(); | 496 | + this.$refs.videoPlayer.pause(); |
| 620 | this.videoUrl = ''; | 497 | this.videoUrl = ''; |
| 621 | this.$axios({ | 498 | this.$axios({ |
| 622 | method: 'get', | 499 | method: 'get', |
| 623 | - url: '/api/playback/stop/' + this.deviceId + "/" + this.channelId + "/" + this.streamId | 500 | + url: '/api/playback/stop/' + this.deviceId + "/" + this.channelId |
| 624 | }).then(function (res) { | 501 | }).then(function (res) { |
| 625 | if (callback) callback() | 502 | if (callback) callback() |
| 626 | }); | 503 | }); |
| @@ -628,47 +505,33 @@ export default { | @@ -628,47 +505,33 @@ export default { | ||
| 628 | downloadRecord: function (row) { | 505 | downloadRecord: function (row) { |
| 629 | let that = this; | 506 | let that = this; |
| 630 | if (that.streamId != "") { | 507 | if (that.streamId != "") { |
| 631 | - that.stopDownloadRecord(function (res) { | ||
| 632 | - if (res.code == 0) { | ||
| 633 | - that.streamId = ""; | ||
| 634 | - that.downloadRecord(row); | ||
| 635 | - }else { | ||
| 636 | - this.$message({ | ||
| 637 | - showClose: true, | ||
| 638 | - message: res.data.msg, | ||
| 639 | - type: "error", | ||
| 640 | - }); | ||
| 641 | - } | ||
| 642 | - | 508 | + that.stopDownloadRecord(function () { |
| 509 | + that.streamId = "", | ||
| 510 | + that.downloadRecord(row); | ||
| 643 | }) | 511 | }) |
| 644 | } else { | 512 | } else { |
| 645 | this.$axios({ | 513 | this.$axios({ |
| 646 | method: 'get', | 514 | method: 'get', |
| 647 | - url: '/api/gb_record/download/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' + | 515 | + url: '/api/download/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' + |
| 648 | row.endTime + '&downloadSpeed=4' | 516 | row.endTime + '&downloadSpeed=4' |
| 649 | }).then(function (res) { | 517 | }).then(function (res) { |
| 650 | - if (res.data.code == 0) { | ||
| 651 | - let streamInfo = res.data.data; | ||
| 652 | - that.recordPlay = false; | ||
| 653 | - that.$refs.recordDownload.openDialog(that.deviceId, that.channelId, streamInfo.app, streamInfo.stream, streamInfo.mediaServerId); | ||
| 654 | - }else { | ||
| 655 | - that.$message({ | ||
| 656 | - showClose: true, | ||
| 657 | - message: res.data.msg, | ||
| 658 | - type: "error", | ||
| 659 | - }); | ||
| 660 | - } | 518 | + var streamInfo = res.data; |
| 519 | + that.app = streamInfo.app; | ||
| 520 | + that.streamId = streamInfo.streamId; | ||
| 521 | + that.mediaServerId = streamInfo.mediaServerId; | ||
| 522 | + that.videoUrl = that.getUrlByStreamInfo(streamInfo); | ||
| 523 | + that.recordPlay = true; | ||
| 661 | }); | 524 | }); |
| 662 | } | 525 | } |
| 663 | }, | 526 | }, |
| 664 | stopDownloadRecord: function (callback) { | 527 | stopDownloadRecord: function (callback) { |
| 665 | - this.$refs[this.activePlayer].pause(); | 528 | + this.$refs.videoPlayer.pause(); |
| 666 | this.videoUrl = ''; | 529 | this.videoUrl = ''; |
| 667 | this.$axios({ | 530 | this.$axios({ |
| 668 | method: 'get', | 531 | method: 'get', |
| 669 | - url: '/api/gb_record/download/stop/' + this.deviceId + "/" + this.channelId+ "/" + this.streamId | ||
| 670 | - }).then((res)=> { | ||
| 671 | - if (callback) callback(res) | 532 | + url: '/api/download/stop/' + this.deviceId + "/" + this.channelId |
| 533 | + }).then(function (res) { | ||
| 534 | + if (callback) callback() | ||
| 672 | }); | 535 | }); |
| 673 | }, | 536 | }, |
| 674 | ptzCamera: function (command) { | 537 | ptzCamera: function (command) { |
| @@ -676,6 +539,8 @@ export default { | @@ -676,6 +539,8 @@ export default { | ||
| 676 | let that = this; | 539 | let that = this; |
| 677 | this.$axios({ | 540 | this.$axios({ |
| 678 | method: 'post', | 541 | method: 'post', |
| 542 | + // url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?leftRight=' + leftRight + '&upDown=' + upDown + | ||
| 543 | + // '&inOut=' + zoom + '&moveSpeed=50&zoomSpeed=50' | ||
| 679 | url: '/api/ptz/control/' + this.deviceId + '/' + this.channelId + '?command=' + command + '&horizonSpeed=' + this.controSpeed + '&verticalSpeed=' + this.controSpeed + '&zoomSpeed=' + this.controSpeed | 544 | url: '/api/ptz/control/' + this.deviceId + '/' + this.channelId + '?command=' + command + '&horizonSpeed=' + this.controSpeed + '&verticalSpeed=' + this.controSpeed + '&zoomSpeed=' + this.controSpeed |
| 680 | }).then(function (res) {}); | 545 | }).then(function (res) {}); |
| 681 | }, | 546 | }, |
| @@ -755,21 +620,13 @@ export default { | @@ -755,21 +620,13 @@ export default { | ||
| 755 | console.log(resultArray) | 620 | console.log(resultArray) |
| 756 | return resultArray; | 621 | return resultArray; |
| 757 | }, | 622 | }, |
| 758 | - copyUrl: function (dropdownItem){ | ||
| 759 | - console.log(dropdownItem) | ||
| 760 | - this.$copyText(dropdownItem).then((e)=> { | ||
| 761 | - this.$message.success("成功拷贝到粘贴板"); | ||
| 762 | - }, (e)=> { | ||
| 763 | - | ||
| 764 | - }) | ||
| 765 | - }, | ||
| 766 | gbPlay(){ | 623 | gbPlay(){ |
| 767 | console.log('前端控制:播放'); | 624 | console.log('前端控制:播放'); |
| 768 | this.$axios({ | 625 | this.$axios({ |
| 769 | method: 'get', | 626 | method: 'get', |
| 770 | url: '/api/playback/resume/' + this.streamId | 627 | url: '/api/playback/resume/' + this.streamId |
| 771 | }).then((res)=> { | 628 | }).then((res)=> { |
| 772 | - this.$refs[this.activePlayer].play(this.videoUrl) | 629 | + this.$refs.videoPlayer.play(this.videoUrl) |
| 773 | }); | 630 | }); |
| 774 | }, | 631 | }, |
| 775 | gbPause(){ | 632 | gbPause(){ |
| @@ -798,13 +655,8 @@ export default { | @@ -798,13 +655,8 @@ export default { | ||
| 798 | this.$axios({ | 655 | this.$axios({ |
| 799 | method: 'get', | 656 | method: 'get', |
| 800 | url: `/api/playback/seek/${this.streamId }/` + Math.floor(this.seekTime * val / 100000) | 657 | url: `/api/playback/seek/${this.streamId }/` + Math.floor(this.seekTime * val / 100000) |
| 801 | - }).then( (res)=> { | ||
| 802 | - setTimeout(()=>{ | ||
| 803 | - this.$refs[this.activePlayer].play(this.videoUrl) | ||
| 804 | - }, 600) | ||
| 805 | - }); | ||
| 806 | - }, | ||
| 807 | - | 658 | + }).then(function (res) {}); |
| 659 | + } | ||
| 808 | 660 | ||
| 809 | } | 661 | } |
| 810 | }; | 662 | }; |