集成rtc播放器

3 years ago · a4ab9a0a6c
7 changed files with 7691 additions and 19 deletions
--- a/src/main/java/com/genersoft/iot/vmp/common/StreamInfo.java
+++ b/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;
+    }
 }
--- a/src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMHttpHookListener.java
+++ b/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,9 +240,14 @@ 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 ) {
+			if ("rtp".equals(app) && regist != null ) {
 				StreamInfo streamInfo = redisCatchStorage.queryPlayByStreamId(streamId);
 				if (streamInfo!=null){
 					redisCatchStorage.stopPlay(streamInfo);
@ -251,14 +257,16 @@ public class ZLMHttpHookListener {
 					redisCatchStorage.stopPlayback(streamInfo);
 				}
 			}else {
-			if (!"rtp".equals(app) && "rtmp".equals(schema)){
-				if (regist) {
+				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");
--- a/src/main/java/com/genersoft/iot/vmp/service/impl/MediaServiceImpl.java
+++ b/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;
    }

--- a/web_src/index.html
+++ b/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 -->
--- a/web_src/src/components/dialog/devicePlayer.vue
+++ b/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)
--- a/web_src/src/components/dialog/rtcPlayer.vue
+++ b/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>
--- a/web_src/static/js/ZLMRTCClient.js
+++ b/web_src/static/js/ZLMRTCClient.js