Ubuntu vue显示rtsp方法rtsp转换WebRTC

浮光掠影00

已于 2023-04-19 16:30:09 修改

阅读量259

点赞数

文章标签： vue.js webrtc javascript

于 2023-04-19 12:46:38 首次发布

本文链接：https://blog.csdn.net/qq_45156819/article/details/130219155

版权

该文介绍了如何下载和运行RTSPtoWeb工程，这是一个将RTSP流转换为Web可用的工具。通过Go语言编译并运行项目后，可以在本地8083端口访问。文章还展示了在Vue.js应用中使用WebRTC技术播放RTSP流的代码示例，支持单窗口和多窗口显示。

摘要由CSDN通过智能技术生成

下载RTSPtoWeb工程

下载地址https://github.com/deepch/RTSPtoWeb/

查看go.mod文件
含有推荐使用的go语言版本，我的是go1.19

module github.com/deepch/RTSPtoWeb
go 1.19

安装go语言

参考
https://blog.csdn.net/xiaoyujiale/article/details/125497945

运行RTSPtoWeb工程

 go build
./RTSPtoWeb

打开RTSPtoWeb网页

http://localhost:8083/

网页中设置rtsp流转发
进行测试

推流完成后可在工程内查看配置文件

config.json
id_camera2 为uuid 可以自定义修改

"streams": {
    "id_camera2": {
      "channels": {
        "0": {
          "url": "rtsp://admin:Aa000000@192.168.8.223:554/Streaming/Channels/102 "
        }
      },
      "name": "camera2"
    },
    "id_camera1": {
      "channels": {
        "0": {
          "url": "rtsp://admin:Aa000000@192.168.8.222:554/Streaming/Channels/102 "
        }
      },
      "name": "camera1"
    }
  }

VUE单窗口显示

webRTC流地址：http://localhost:8083/stream/‘uuid‘/channel/‘channel‘/webrtc?uuid=‘uuid‘&channel=‘channel’

<template>
    <video id="webrtc-video" autoplay muted playsinline controls
        style="max-width: 100%; max-height: 100%;"></video>
</template>

<script >
    export default {
        name: "local_test",
        data(){
                return{
                  
                }
         },
         created(){
        },
        watch : {

        },
        mounted() {
          
          var videoEl = document.querySelector('#webrtc-video')
          var webrtcUrl = 'http://localhost:8083/stream/id_camera1/channel/0/webrtc?uuid=id_camera1&channel=0'
          console.log("webrtcUrl")
          this.startPlay(videoEl, webrtcUrl)
        },
        methods: {
          startPlay (videoEl, url) {
            const webrtc = new RTCPeerConnection({
              iceServers: [{
                urls: ['stun:stun.l.google.com:19302']
              }],
              sdpSemantics: 'unified-plan'
            })
            webrtc.ontrack = function (event) {
              console.log(event.streams.length + ' track is delivered')
              videoEl.srcObject = event.streams[0]
              videoEl.play()
            }
            webrtc.addTransceiver('video', { direction: 'sendrecv' })
            webrtc.onnegotiationneeded = async function handleNegotiationNeeded () {
              const offer = await webrtc.createOffer()

              await webrtc.setLocalDescription(offer)

              fetch(url, {
                method: 'POST',
                body: new URLSearchParams({ data: btoa(webrtc.localDescription.sdp) })
              })
                .then(response => response.text())
                .then(data => {
                  try {
                    webrtc.setRemoteDescription(
                      new RTCSessionDescription({ type: 'answer', sdp: atob(data) })
                    )
                  } catch (e) {
                    console.warn(e)
                  }
                })
            }

            const webrtcSendChannel = webrtc.createDataChannel('rtsptowebSendChannel')
            webrtcSendChannel.onopen = (event) => {
              console.log(`${webrtcSendChannel.label} has opened`)
              webrtcSendChannel.send('ping')
            }
            webrtcSendChannel.onclose = (_event) => {
              console.log(`${webrtcSendChannel.label} has closed`)
              startPlay(videoEl, url)
            }
            webrtcSendChannel.onmessage = event => console.log(event.data)
          }
        },
        filters: {
        }
      }
</script>

<style scoped></style>

VUE多窗口显示

<template>
    <div class="box">
      <div v-for="(item, index) in list" :key="index">
        <video :id="'video' + item.id" autoplay muted playsinline controls style="width: 400px; height: 300px"></video>
      </div>
  </div>
</template>

<script >
    export default {
        name: "video_webrtc",
        data(){
                return{
                  list: [
                  {
                      src: "http://localhost:8083/stream/id_camera1/channel/0/webrtc?uuid=id_camera1&channel=0",
                      id: 0,
                  },
                  {
                      src: "http://localhost:8083/stream/id_camera2/channel/0/webrtc?uuid=id_camera2&channel=0",
                      id: 1,
                  },
            ],
                }
         },
         created(){
        },
        watch : {

        },
        mounted() {
          this.list.forEach((item, index) => {
                var videoEl = document.querySelector("#video" + item.id)
                var webrtcUrl = item.src
                console.log("video" + item.id,item.src)
                this.startPlay(videoEl, webrtcUrl)
            });

        },
        methods: {
          startPlay (videoEl, url) {
            const webrtc = new RTCPeerConnection({
              iceServers: [{
                urls: ['stun:stun.l.google.com:19302']
              }],
              sdpSemantics: 'unified-plan'
            })
            webrtc.ontrack = function (event) {
              console.log(event.streams.length + ' track is delivered')
              videoEl.srcObject = event.streams[0]
              videoEl.play()
            }
            webrtc.addTransceiver('video', { direction: 'sendrecv' })
            webrtc.onnegotiationneeded = async function handleNegotiationNeeded () {
              const offer = await webrtc.createOffer()

              await webrtc.setLocalDescription(offer)

              fetch(url, {
                method: 'POST',
                body: new URLSearchParams({ data: btoa(webrtc.localDescription.sdp) })
              })
                .then(response => response.text())
                .then(data => {
                  try {
                    webrtc.setRemoteDescription(
                      new RTCSessionDescription({ type: 'answer', sdp: atob(data) })
                    )
                  } catch (e) {
                    console.warn(e)
                  }
                })
            }

            const webrtcSendChannel = webrtc.createDataChannel('rtsptowebSendChannel')
            webrtcSendChannel.onopen = (event) => {
              console.log(`${webrtcSendChannel.label} has opened`)
              webrtcSendChannel.send('ping')
            }
            webrtcSendChannel.onclose = (_event) => {
              console.log(`${webrtcSendChannel.label} has closed`)
              startPlay(videoEl, url)
            }
            webrtcSendChannel.onmessage = event => console.log(event.data)
          }
        },
        filters: {
        }
      }
</script>

<style scoped>
.box 
{
    width: 800px;
    height: 300px;
    display: flex;
    flex-direction: row;
}
</style>