wvp-pro.git - Gitblit

parent: 2b1e5697 | 补丁 | 提交 | show whitespace

panlinlin

2021-04-11 a4ab9a0a6cd22b11b52200b66c0417d9379e3960

集成rtc播放器

5个文件已修改

2个文件已添加

	src/main/java/com/genersoft/iot/vmp/common/StreamInfo.java	9 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMHttpHookListener.java	16 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/java/com/genersoft/iot/vmp/service/impl/MediaServiceImpl.java	2 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	web_src/index.html	3 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	web_src/src/components/dialog/devicePlayer.vue	4 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	web_src/src/components/dialog/rtcPlayer.vue	106 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	web_src/static/js/ZLMRTCClient.js	7546 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 src/main/java/com/genersoft/iot/vmp/common/StreamInfo.java

@@ -18,6 +18,7 @@
    private String ws_ts;
    private String rtmp;
    private String rtsp;
    private String rtc;
    private JSONArray tracks;

    public String getApp() {
@@ -139,4 +140,12 @@
    public void setStreamId(String streamId) {
        this.streamId = streamId;
    }

    public String getRtc() {
        return rtc;
    }

    public void setRtc(String rtc) {
        this.rtc = rtc;
    }
}

 src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMHttpHookListener.java

@@ -4,6 +4,7 @@
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 @@
        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 @@
                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");


 src/main/java/com/genersoft/iot/vmp/service/impl/MediaServiceImpl.java

@@ -42,6 +42,8 @@
        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;
    }


 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 -->

 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 @@

            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)

 web_src/src/components/dialog/rtcPlayer.vue

New file
@@ -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>

 web_src/static/js/ZLMRTCClient.js

New file
Diff too large

			@@ -18,6 +18,7 @@
			private String ws_ts;
			private String rtmp;
			private String rtsp;
			private String rtc;
			private JSONArray tracks;

			public String getApp() {
			@@ -139,4 +140,12 @@
			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.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 @@
			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 @@
			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");

			@@ -42,6 +42,8 @@
			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 @@

			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)

New file
			@@ -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>