集成rtc播放器
panlinlin
parent
2b1e56973e
commit
a4ab9a0a6c
|
|
@ -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,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");
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue