1. webrtc-streamer (https://github.com/mpromonet/webrtc-streamer)
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
|
2. 使用插件
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
body { margin: 0; padding: 0; } :root { --sk-size: 50px; --sk-color: #fff; }
const livePlayerApp = { data() { return { themeType: "dark", layoutRule: { cellCount: 1, rules: [{ row: 0, col: 0, mergeSpan: 0 }] }, actualStyle: {}, containerStyle: { width: "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");
|
qq:505645074



