集成rtc播放器

panlinlin
1 parent 2b1e5697
Showing 6 changed files with 145 additions and 19 deletions
src/main/java/com/genersoft/iot/vmp/common/StreamInfo.java
src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMHttpHookListener.java
src/main/java/com/genersoft/iot/vmp/service/impl/MediaServiceImpl.java
web_src/index.html
web_src/src/components/dialog/devicePlayer.vue
web_src/src/components/dialog/rtcPlayer.vue
@@ -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;
+    }
 }
@@ -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");
@@ -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;
     }
  
@@ -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 -->
@@ -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)
+<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>
 \ No newline at end of file