【无标题】vue webrtc 播放rtsp视频流

最新推荐文章于 2025-10-17 06:03:00 发布

原创

最新推荐文章于 2025-10-17 06:03:00 发布 · 1.9k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#webrtc

最近有个小活其中有涉及播放大华及海康摄像头视频流的需求，经调查发现可以使用webrtc来实现相关功能，记录一下，步骤如下：

１、下载webrtc　：Releases · mpromonet/webrtc-streamer · GitHub

winows下下载：webrtc-streamer-v0.8.5-dirty-Windows-AMD64-Release.tar.gz

２、js准备

　　将下载包中html/libs文件夹下webrtcstreamer.js、adapter.min.js文件复制到VUE项目public目录中

VUE代码如下：

    <div class="coTitle">视频</div>
    <video id='video' controls autoplay autobuffer muted preload='auto'
           style='width:90%; height: 290px; margin-left:5%;object-fit: fill;'>
    </video>

</script>
<script lang="js">
import {WebRtcStreamer} from './webrtcstreamer.js';
export default {

  name: 'index1',
  data() {
    return {
      webRtcServer: null
    }
  },
  mounted() {
    //video：需要绑定的vide