Главная Обзор Помощь
Регистрация Вход
xujunwei
/
wvp-gb28181-pro
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

集成rtc播放器

panlinlin 4 лет назад
Родитель
2b1e56973e
Сommit
a4ab9a0a6c
7 измененных файлов с 7691 добавлено и 19 удалено
Разделённый вид Показать статистику Diff
  1. 9 0
      src/main/java/com/genersoft/iot/vmp/common/StreamInfo.java
  2. 24 16
      src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMHttpHookListener.java
  3. 2 0
      src/main/java/com/genersoft/iot/vmp/service/impl/MediaServiceImpl.java
  4. 2 1
      web_src/index.html
  5. 2 2
      web_src/src/components/dialog/devicePlayer.vue
  6. 106 0
      web_src/src/components/dialog/rtcPlayer.vue
  7. 7546 0
      web_src/static/js/ZLMRTCClient.js

+ 9 - 0
src/main/java/com/genersoft/iot/vmp/common/StreamInfo.java
Просмотреть файл 

@@ -18,6 +18,7 @@ public class StreamInfo {
 
     private String ws_ts;
 
     private String rtmp;
 
     private String rtsp;
 
+    private String rtc;
 
     private JSONArray tracks;
 
 
     public String getApp() {
 
@@ -139,4 +140,12 @@ public class StreamInfo {
 
     public void setStreamId(String streamId) {
 
         this.streamId = streamId;
 
     }
 
+
 
+    public String getRtc() {
 
+        return rtc;
 
+    }
 
+
 
+    public void setRtc(String rtc) {
 
+        this.rtc = rtc;
 
+    }
 
 }

+ 24 - 16
src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMHttpHookListener.java
Просмотреть файл 

@@ -4,6 +4,7 @@ import java.util.List;
 
 import java.util.UUID;

 

 import com.alibaba.fastjson.JSON;

+import com.alibaba.fastjson.JSONArray;

 import com.genersoft.iot.vmp.common.StreamInfo;

 import com.genersoft.iot.vmp.conf.MediaServerConfig;

 import com.genersoft.iot.vmp.gb28181.bean.Device;

@@ -239,26 +240,33 @@ public class ZLMHttpHookListener {
 
 		String app = json.getString("app");

 		String streamId = json.getString("stream");

 		String schema = json.getString("schema");

-		boolean regist = json.getBoolean("regist");

+		JSONArray tracks = json.getJSONArray("tracks");

+		String regist = json.getString("regist");

+		if (tracks != null) {

+			System.out.println("222222" + schema);

+		}

+		if ("rtmp".equals(schema)){

 

-		if ("rtp".equals(app) && !regist ) {

-			StreamInfo streamInfo = redisCatchStorage.queryPlayByStreamId(streamId);

-			if (streamInfo!=null){

-				redisCatchStorage.stopPlay(streamInfo);

-				storager.stopPlay(streamInfo.getDeviceID(), streamInfo.getChannelId());

-			}else{

-				streamInfo = redisCatchStorage.queryPlaybackByStreamId(streamId);

-				redisCatchStorage.stopPlayback(streamInfo);

-			}

-		}else {

-			if (!"rtp".equals(app) && "rtmp".equals(schema)){

-				if (regist) {

-					zlmMediaListManager.addMedia(app, streamId);

-				}else {

-					zlmMediaListManager.removeMedia(app, streamId);

+			if ("rtp".equals(app) && regist != null ) {

+				StreamInfo streamInfo = redisCatchStorage.queryPlayByStreamId(streamId);

+				if (streamInfo!=null){

+					redisCatchStorage.stopPlay(streamInfo);

+					storager.stopPlay(streamInfo.getDeviceID(), streamInfo.getChannelId());

+				}else{

+					streamInfo = redisCatchStorage.queryPlaybackByStreamId(streamId);

+					redisCatchStorage.stopPlayback(streamInfo);

+				}

+			}else {

+				if (!"rtp".equals(app) ){

+					if (regist == null) {

+						zlmMediaListManager.addMedia(app, streamId);

+					}else {

+						zlmMediaListManager.removeMedia(app, streamId);

+					}

 				}

 			}

 		}

+

 		JSONObject ret = new JSONObject();

 		ret.put("code", 0);

 		ret.put("msg", "success");

+ 2 - 0
src/main/java/com/genersoft/iot/vmp/service/impl/MediaServiceImpl.java
Просмотреть файл 

@@ -42,6 +42,8 @@ public class MediaServiceImpl implements IMediaService {
 
         streamInfoResult.setWs_fmp4(String.format("ws://%s:%s/%s/%s.live.mp4", mediaInfo.getWanIp(), mediaInfo.getHttpPort(), app,  stream));
 
         streamInfoResult.setTs(String.format("http://%s:%s/%s/%s.live.ts", mediaInfo.getWanIp(), mediaInfo.getHttpPort(), app,  stream));
 
         streamInfoResult.setWs_ts(String.format("ws://%s:%s/%s/%s.live.ts", mediaInfo.getWanIp(), mediaInfo.getHttpPort(), app,  stream));
 
+        streamInfoResult.setRtc(String.format("http://%s:%s/index/api/webrtc?app=%s&stream=%s&type=play", mediaInfo.getWanIp(), mediaInfo.getHttpPort(), app,  stream));
 
+
 
         return streamInfoResult;
 
     }

+ 2 - 1
web_src/index.html
Просмотреть файл 

@@ -6,7 +6,8 @@
 
     <title>国标28181</title>
 
   </head>
 
   <body>
 
-    <script type="text/javascript" src="./js/EasyWasmPlayer.js"></script>
 
+    <!-- <script type="text/javascript" src="./js/EasyWasmPlayer.js"></script> -->
 
+    <script type="text/javascript" src="/static/js/ZLMRTCClient.js"></script>
 
     <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=rk73w8dv1rkE4UdZsataG68VarhYQzrx&s=1"></script>
 
     <div id="app"></div>
 
     <!-- built files will be auto injected -->

+ 2 - 2
web_src/src/components/dialog/devicePlayer.vue
Просмотреть файл 

@@ -136,7 +136,7 @@
 
 </template>
 
 
 <script>
 
-import player from '../dialog/player.vue'
 
+import player from '../dialog/rtcPlayer.vue'
 
 export default {
 
     name: 'devicePlayer',
 
     props: {},
 
@@ -250,7 +250,7 @@ export default {
 
 
             this.hasaudio = hasAudio;
 
             this.isLoging = false;
 
-            this.videoUrl = streamInfo.ws_flv;
 
+            this.videoUrl = streamInfo.rtc;
 
             this.streamId = streamInfo.streamId;
 
             this.app = streamInfo.app;
 
             this.playFromStreamInfo(false, streamInfo)

+ 106 - 0
web_src/src/components/dialog/rtcPlayer.vue
Просмотреть файл 

@@ -0,0 +1,106 @@
 
+<template>
 
+    <div id="rtcPlayer">
 
+        <video id='webRtcPlayerBox' controls autoplay style="text-align:left;">
 
+            Your browser is too old which doesn't support HTML5 video.
 
+          </video>
 
+    </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+    name: 'rtcPlayer',
 
+    data() {
 
+        return {
 
+            webrtcPlayer: null
 
+        };
 
+    },
 
+    props: ['videoUrl', 'error', 'hasaudio'],
 
+    mounted () {
 
+       this.$nextTick(() =>{
 
+           console.log("初始化时的地址为: " + this.videoUrl)
 
+            this.play(this.videoUrl)
 
+        })
 
+    },
 
+    watch:{
 
+        videoUrl(newData, oldData){
 
+            this.pause();
 
+            this.play(newData);
 
+        },
 
+        immediate:true
 
+    },
 
+    methods: {
 
+        play: function (url) {
 
+            this.webrtcPlayer = new ZLMRTCClient.Endpoint({
 
+                element: document.getElementById('webRtcPlayerBox'),// video 标签
 
+                debug: true,// 是否打印日志
 
+                zlmsdpUrl: url,//流地址
 
+                simulecast: false,
 
+                useCamera: false,
 
+                audioEnable: false,
 
+                videoEnable: false,
 
+                recvOnly: true,
 
+            })
 
+            this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,(e)=>{// ICE 协商出错
 
+                console.error('ICE 协商出错')
 
+                this.eventcallbacK("ICE ERROR", "ICE 协商出错")
 
+            });
 
+
 
+            this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,(e)=>{//获取到了远端流，可以播放
 
+                console.error('播放成功',e.streams)
 
+                this.eventcallbacK("playing", "播放成功")
 
+            });
 
+
 
+            this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,(e)=>{// offer anwser 交换失败
 
+                console.error('offer anwser 交换失败',e)
 
+                this.eventcallbacK("OFFER ANSWER ERROR ", "offer anwser 交换失败")
 
+                if (e.code ==-400 && e.msg=="流不存在"){
 
+                    console.log("111111")
 
+                    setTimeout(()=>{
 
+                        this.webrtcPlayer.close();
 
+                        this.play(url)
 
+                    }, 100)
 
+                    
+                }
 
+            });
 
+
 
+            this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,(s)=>{// 获取到了本地流
 
+
 
+                // document.getElementById('selfVideo').srcObject=s;
 
+                this.eventcallbacK("LOCAL STREAM", "获取到了本地流")
 
+            });
 
+            
+        },
 
+        pause: function () {
 
+            if (this.webrtcPlayer != null) {
 
+                this.webrtcPlayer.close();
 
+                this.webrtcPlayer = null;
 
+            }
 
+            
+        },
 
+        eventcallbacK: function(type, message) {
 
+            console.log("player 事件回调")
 
+            console.log(type)
 
+            console.log(message)
 
+        }
 
+    },
 
+}
 
+</script>
 
+
 
+<style>
 
+    .LodingTitle {
 
+        min-width: 70px;
 
+    }
 
+    #rtcPlayer{
 
+        width: 100%;
 
+    }
 
+    #webRtcPlayerBox{
 
+        width: 100%;
 
+        max-height: 56vh;
 
+        background-color: #000;
 
+    }
 
+    /* 隐藏logo */
 
+    /* .iconqingxiLOGO {
 
+        display: none !important;
 
+    } */
 
+    
+</style>

Разница между файлами не показана из-за своего большого размера
+ 7546 - 0
web_src/static/js/ZLMRTCClient.js