vue项目播放海康,大华等rtsp视频流-webrtc

1.下载webrtc

网盘链接：https://pan.baidu.com/s/1QmUbL2lR2DVqezGq8PDhuw 
提取码：lygw

下载后直接运行

 

 后台开着就行

2.前端代码

在index.html引入  webrtc/html/lib下的两个文件（我把这两个文件copy了一份放在了public）

<script type="text/javascript" src="/webrtc/adapter.min.js"></script>
  <script type="text/javascript" src="/webrtc/webrtcstreamer.js"></script>

然后就是页面代码

<!--
  Description: 监控视频
  Author: 李亚光
  Date: 2023-05-18
 -->
<script lang="ts" setup name="EditPerson">
const webRtcServer = ref(null)
onMounted(() => {
   webRtcServer.value = new WebRtcStreamer('video', 'http://127.0.0.1:8000') //这里ip和端口不用修改
   webRtcServer.value.connect(
      'rtsp://admin:1234qwer@192.168.11.301', //替换成自己的地址
    )
})
onBeforeUnmount(() => {
  webRtcServer.value.disconnect()
})
</script>

<template>
    <div className="home">
      <video id="video" autoPlay width="800" height="400" style="margin-left: -20px;" />
    </div>
</template>

<style lang="scss" scoped>
.demo-video {
  max-width: 880px;
  max-height: 660px;
}
</style>

需注意视频输出格式需要H264