商城网站html模板,甜品网站设计与实现毕业设计,淘宝客没有网站怎么做,建设银行资讯网站webrtc-streamer WebRTC (Web Real-Time Communications) 是一项实时通讯技术#xff0c;它允许网络应用或者站点#xff0c;在不借助中间媒介的情况下#xff0c;建立浏览器之间点对点#xff08;Peer-to-Peer#xff09;的连接#xff0c;实现视频流和#xff08;或它允许网络应用或者站点在不借助中间媒介的情况下建立浏览器之间点对点Peer-to-Peer的连接实现视频流和或音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下创建点对点Peer-to-Peer的数据分享和电话会议成为可能。 简单的说WebRTC 是一种 HTML5规范他无需在浏览器中安装任何插件可以在网页内进行实时通信工作的开源技术它直接在浏览器和设备之间添加实时媒体通信。rtspReal Time Streaming ProtocolRTSP是实时视频网络传输主流的实现方式是一种网络流媒体协议。低延时高清晰度的RTSP视频流传输是网络直播、在线会议系统等行业的核心技术。 webrtc-streamer是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的项目,它内置了一个小型的 HTTP server 来对 WebRTC需要的相关接口提供支持。
使用方法
1、下载webrtc-streamer
https://github.com/mpromonet/webrtc-streamer/releases2、运行
双击解压后的.exe文件运行默认抛出本机8000端口172.0.0.1:8000由于 webrtc 的核心库还不支持H265的视频编码所以要配置设备视频编码方式为H264 命令-o 默认情况video会进行编码、解码占用资源可能导致cpu拉满使用-o将取消编码解码 自定义端口创建.bat文件并双击执行文件内容如下 echo off
start .webrtc-streamer.exe -H 0.0.0.0:9998 -o
exit运行成功后可在浏览器中查询所有api //192.168.3.33:9998/api/help
http: [/api/addIceCandidate,/api/call,/api/createOffer,/api/getAudioDeviceList,/api/getAudioPlayoutList,/api/getIceCandidate,/api/getIceServers,/api/getMediaList,/api/getPeerConnectionList, // 判断当前的webrtc-streamer正在连接的通道/api/getStreamList,/api/getVideoDeviceList,/api/hangup,/api/help,/api/log,/api/setAnswer,/api/version,/api/whep
]3、引用开发包 将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public目录下 、在index.html文件里引入这两个js文件 head!-- rtsp --script src/data/webrtcstreamer.js charsetutf-8/scriptscript src/data/adapter.min.js charsetutf-8/script
/head4、页面中使用
templatediv classev-playerCommonDragWindow v-modelinnerShow :width600 :height400 :resizetrue :positionpositiontemplate v-slot:title{{ title }}/templatetemplate #defaultvideo :idvideo-${equipId} autoplay width100% height98%/video/template/CommonDragWindow/div
/templatescript setupimport CommonDragWindow from ./CommonDragWindow.vueimport { getConfigList } from /api/common.jsimport { ref, onMounted, watchEffect, watch, nextTick } from vueconst show defineModel({ type: Boolean, default: false })const props defineProps({title: {type: String,default: 监控视频},equipId: {type: [Number, String]}})const innerShow ref(false)const position ref({top: 500,left: 20})let webRtcServer nullwatchEffect(() {innerShow.value show.value})watch(() innerShow.value,async (val) {if (val) {const rtspStr rtsp://132.239.12.145:554/axis-media/media.ampif (rtspStr) {await nextTick() // 待dom加载完毕let videoDocument document.getElementById(video)webRtcServer new WebRtcStreamer(videoDocument, http://${window.appConfig.localhost}:8000)webRtcServer.connect(rtspStr, null, rtptransporttcptimeout60)}} else {webRtcServer?.disconnect()webRtcServer null}show.value val})onMounted(() {})
/scriptstyle scoped langscss.ev-player {:deep(video) {width: 100%;height: calc(100% - 5px);}}
/style
