Vue + RTP 视频实时监控

一、环境

// Vue: 2.6.10
// kurento-utils: 6.15.0

// 安装kurento-utils
npm install kurento-utils

二、代码

    1、JS封装

// Time:   2021/11/17 11:16
// Author: Dily
// Remark:
import kurentoUtils from 'kurento-utils'

let websocket = null
let webRtcPeer = null
let video = null // DOM元素
let videourl = ''  // 视频流获取地址
let wssUrl = ''    // 连接后台websocket

// 初始化
function initVideo(video_dom, wsUrl, videoUrl) {
  websocket = new WebSocket(wsUrl)
  wssUrl = wsUrl
  videourl = videoUrl
  video = video_dom
}

// 获取数据并播放
function playVideo(isAudio, isVideo) {
  websocket.onopen = () => getVideo(isAudio, isVideo)
  websocket.onerror = () => initVideo(video, wssUrl, videourl)
  websocket.onmessage = onMessage
}

// 关闭websocket
function destroyVideo() {
  if (websocket) websocket.close()
}

// 使用RTP获取视频流
function getVideo(isAudio, isVideo) {
  // Video and audio by default
  const userMediaConstraints = {
    audio: isAudio,
    video: isVideo
  }

  const options = {
    remoteVideo: video,
    mediaConstraints: userMediaConstraints,
    onicecandidate: onIceCandidate
  }
  webRtcPeer = new kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly(options, error => {
    error ? console.error(error) : ''
    webRtcPeer.generateOffer(onOffer)
  })
}

// candidate对象
function onIceCandidate(candidate) {
  const message = {
    id: 'onIceCandidate',
    candidate: candidate
  }
  sendMessage(message)
}

// 开始请求数据
function onOffer(error, offerSdp) {
  error ? console.error('Error generating the offer :' + error) : ''
  const message = {
    id: 'start',
    sdpOffer: offerSdp,
    videoUrl: videourl
  }
  sendMessage(message)
}

// 发送后台数据
function sendMessage(message) {
  const jsonMessage = JSON.stringify(message)
  websocket.send(jsonMessage)
}

// 接收数据
function onMessage(message) {
  const parsedMessage = JSON.parse(message.data)
  switch (parsedMessage.id) {
    case 'startResponse':
      startResponse(parsedMessage)
      break
    case 'error':
      console.error('Error message from server: ' + parsedMessage.message)
      break
    case 'playEnd':
      console.log('playEnd')
      break
    case 'videoInfo':
      showVideoData(parsedMessage)
      break
    case 'iceCandidate':
      webRtcPeer.addIceCandidate(parsedMessage.candidate, error => error ? console.error(error) : '')
      break
    case 'position':
      document.getElementById('videoPosition').value = parsedMessage.position
      break
    default:
      console.error('Unrecognized message: ' + parsedMessage.message)
  }
}

// 接收视频流信息
function startResponse(message) {
  webRtcPeer.processAnswer(message.sdpAnswer, error => error ? console.error(error) : '')
}

// 设置Seek
function showVideoData(parsedMessage) {
  document.getElementById('initSeek') ? document.getElementById('initSeek').value = parsedMessage.initSeekable : ''
  document.getElementById('endSeek') ? document.getElementById('endSeek').value = parsedMessage.endSeekable : ''
  document.getElementById('durations') ? document.getElementById('duration').value = parsedMessage.videoDuration : ''
}

export {
  initVideo,
  playVideo,
  destroyVideo
}

 2、页面

<template>
  <div class="dashboard-container">
        <video id="video" autoplay width="640px" height="480px" controls onseeking />
  </div>
</template>
<script type="module">
import { destroyVideo, initVideo, playVideo } from '@/utils/video-rtc'

export default {
  name: 'Resource',
  data() {
    return {
      // HTTP环境
      wsUrl: 'ws://' + window.location.hostname + ':8082/kurento/player',
      // HTTPS环境
      // wsUrl: 'wss://' + window.location.hostname + ':8082/kurento/player',
      // 这里写自己的视频流地址，不同相机格式不同，这里是海康相机
      videoUrl: 'rtsp://用户名:密码@海康相机地址/:554/Streaming/Channels/101'
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.destroy()
  },
  methods: {
    init() {
      this.video = document.getElementById('video')
      initVideo(this.video, this.wsUrl, this.videoUrl)
      playVideo(true, true)
    },
    destroy() {
      destroyVideo()
    }
  }
}

</script>
<style>
video {
  border-radius: 10px;
  width: 500px;
  height: 100%;
  border: 2px solid #124968;
}
</style>

三、后台代码
WebSocket RTP 视频实时监控https://blog.csdn.net/qq_42151956/article/details/121403771