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 = wsUrlvideourl = videoUrlvideo = 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 defaultconst 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)breakcase 'error':console.error('Error message from server: ' + parsedMessage.message)breakcase 'playEnd':console.log('playEnd')breakcase 'videoInfo':showVideoData(parsedMessage)breakcase 'iceCandidate':webRtcPeer.addIceCandidate(parsedMessage.candidate, error => error ? console.error(error) : '')breakcase 'position':document.getElementById('videoPosition').value = parsedMessage.positionbreakdefault: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

Vue + RTP 视频实时监控相关推荐

SpringBoot WebSocket RTP 视频实时监控
一.环境 1.安装 // docker安装kurento docker pull kurento/kurento-media-server:latest// 配置端口, 占用50个端口, ...
在vue中使用海康插件实现视频实时监控(海康插件)
在vue中使用海康插件实现视频实时监控(海康插件) 首先下载并安装海康插件 webcontrol.exe 然后直接就写代码把,所有方法都是海康他们直接封装好的demo 初始化之后,后台把密钥和一些 ...
海康摄像头视频实时监控
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 海康摄像 ...
【解决方案】基于EasyGBS搭建的移动终端视频实时监控国家安全局无线视频指挥系统技术方案
一.方案背景国家安全局是人民政府的一个组成部门,主管全市安全工作.在省委.省政府.市委.市政府和国家安全部的领导下,负责和管理地区防范.打击危害国家安全行为的工作,开展隐蔽战线的对敌斗争,保卫国家安 ...
树莓派搭建网络视频实时监控系统
前言在GitHub上发现一个好玩的项目,不用安装其它任何依赖包,只要运行一个Python脚本就可以在局域网构建一个视频监控系统.果断试了一下,确实挺好玩的,现在分享给大家. 搭建方法 1. 硬件准备 ...
flv实现视频实时监控
html代码: <div class="controls"><!--<button οnclick="flv_load()">加载 ...
基于android手机实时监控ipcam视频之一：RTSP
我以前做过一个这样的项目,基于android实现手机实时监控ipcam,ipcam厂商提供控件,该控件安装以后,在IE上面输入ipcam的ip地址,就可以实时查看ipcam的图像,这实时视频是通过HT ...
前端实现播放实时监控视频笔记(hls http-flv)
前言最近被安排做一个数据可视化的项目,其中包括视频直播(实时监控)功能,于是只懂用 <video> 播放视频文件的我开始学习关于直播.实时播放等知识,在此做下笔记,并转发一些参考性文章. ...
实时监控后台数据 vue_实时数据监控，快速掌握B站爆款视频热度走向
飞瓜数据B站版的数据监控功能提供对B站UP主监控功能,实时掌握UP主视频热度走向和投放效果. 通过监控输入B站视频链接,设定24/48时长开始对其监控.监控开始后在监控报告中查看对应视频的数据曲线变化 ...

Vue + RTP 视频实时监控

Vue + RTP 视频实时监控相关推荐

最新文章

热门文章