视频webrtc播放器（ZLMRTCClient库使用）

原创

已于 2025-04-09 11:14:31 修改 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#音视频 #webrtc

于 2025-03-21 14:12:10 首次发布

1.引言

在播放实时视频流时，目前很多浏览器已禁止frame，rtmp视频流就是依赖他进行播放，所以使用webrtc播放视频，与zlm配套使用。

2.ZLMRTCClient.js库开源地址

zlmrtcclient.js库

3.引入ZLMRTCClient.js库

将ZLMRTCClient.js文件，存放到你项目自定义js文件位置，我这边放在assets/js下面或者放置在public下面；

可在所需的页面文件下引入，也可以在index.html文件中引入文件；

4.封装视频组件

<template>
      <video
        ref="webrtcVideo"
        muted
        :controls="controls"
      />
</template>
<script>
import ZLMRTCClient from "@/assets/js/ZLMRTCClient.js";
export default {
  props:{
    url:String,
  },
  data() {
    return {
        controls:true
        rtcPlay:''
    }
  },
  
  mounted() {
     this.initVideo();
  },
  methods:{