前端vue实现WebRTC播放rtsp流，呈现在前端页面

最新推荐文章于 2024-12-24 18:05:47 发布

想当秃头了

最新推荐文章于 2024-12-24 18:05:47 发布

阅读量1.4k

点赞数 10

文章标签：前端 vue.js webrtc 视频 javascript

本文链接：https://blog.csdn.net/m0_68997480/article/details/138917653

版权

我的项目需求是连接客户提供的相机，得到相机的监控画面，呈现在前端页面中。

1.先创建请求

import axios from 'axios'

const whepClient = axios.create({
    baseURL: 'http://192.xxx.xxx.xxx:xxx',
    headers: {
        'Content-type': 'application/sdp',
    },
})

export default whepClient

2.创建video元素

      <div class="video2">
        <video  ref="videoPlayer2" src="" style="width:100%;max-height:100%;  object-fit: cover;" 
        autoplay muted  controls="controls"></video>
  
      </div>

3.编写实现方法

    async playStream() {
      this.pc = new RTCPeerConnection();
      // 添加一个接收器的视频传输
      this.pc.addTransceiver('video', { direction: 'recvonly' })
      // 创建一个offer消息
      const offer = a