1. webrtc-streamer （https://github.com/mpromonet/webrtc-streamer）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<video id='video' style='object-fit:fill' controls autoplay autobuffer muted preload='auto'></video>
<script type="text/javascript" src="./js/webrtcstreamer.js"></script>
<script type="text/javascript" src="./js/adapter.min.js"></script>
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script>
var webRtcServer = null;
//页面加载时加载视频画面
window.onload = function() {
//video：需要绑定的video控件ID
//192.168.1.226：启动webrtc-streamer的设备IP
webRtcServer = new WebRtcStreamer("video", "http://127.0.0.1:8000");
//需要查看的rtsp地址
webRtcServer.connect("rtsp://admin:thzn123456@192.168.0.13:554/h264/ch1/main/av_stream");
}
//页面退出时销毁
window.onbeforeunload = function() {
webRtcServer.disconnect();
}
</script>
</body>
</html>
2. 使用插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DCS播放器</title>
<script src="./lib/js/vue3.2.8.js" type="text/javascript"></script>
<script src="./lib/js/dcs-player-vue3.umd.min.js" type="text/javascript"></script>
<style>
body {
margin: 0;
padding: 0;
}
:root {
--sk-size: 50px;
--sk-color: #fff;
}
</style>
</head>
<body>
<div id="app">
<div :style="containerStyle">
<live-player ref="livePlayer" :layout-rule="layoutRule" :theme-type="themeType" @load="onLoadPlayer" @stream-status-change="onStreamStatusChange"></live-player>
</div>
</div>
<script>
const livePlayerApp = {
data() {
return {
themeType: "dark",
layoutRule: {
cellCount: 1,
rules: [{
row: 0,
col: 0,
mergeSpan: 0
}]
},
actualStyle: {},
containerStyle: {
"730px",
height: "586px",
margin: "5px 5px 5px 5px"
},
layerRealSize: {},
}
},
methods: {
// 初始化完成
onLoadPlayer() {
let playUrl = "rtsp://admin:thzn123456@192.168.0.13:554/h264/ch1/main/av_stream";
this.closeStream();
this.openStream(-2, {
name: "title-192.168.0.13",
mainUrl: playUrl,
viewType: 1,
ptzEnable: false
});
},
// 打开视频流
openStream(index, params) {
// index: -2:最后一个窗口 -1:当前选中窗口 >=0:指定窗口
try {
(this.player()).openStream(index, params);
} catch (e) {
console.log(e);
}
},
// 关闭视频流
closeStream() {
(this.player()).closeStreams()
},
player() {
return this.$refs.livePlayer;
}
}
};
let app = Vue.createApp(livePlayerApp);
registere(app);
app.mount("#app");
</script>
</body>
</html>