webrtc-streamer
-
WebRTC (Web Real-Time Communications) 是一項實時通訊技術，它允許網絡應用或者站點，在不借助中間媒介的情況下，建立瀏覽器之間點對點（Peer-to-Peer）的連接，實現視頻流和（或）音頻流或者其他任意數據的傳輸。WebRTC 包含的這些標準使用戶在無需安裝任何插件或者第三方的軟件的情況下，創建點對點（Peer-to-Peer）的數據分享和電話會議成為可能。
簡單的說：WebRTC 是一種 HTML5規范，他無需在瀏覽器中安裝任何插件可以在網頁內進行實時通信工作的開源技術，它直接在瀏覽器和設備之間添加實時媒體通信。 -
rtsp（Real Time Streaming Protocol，RTSP）是實時視頻網絡傳輸主流的實現方式，是一種網絡流媒體協議。低延時高清晰度的RTSP視頻流傳輸是網絡直播、在線會議系統等行業的核心技術。
-
webrtc-streamer是一個使用簡單機制通過 WebRTC 流式傳輸視頻捕獲設備和 RTSP 源的項目,它內置了一個小型的 HTTP server 來對 WebRTC需要的相關接口提供支持。
使用方法
1、下載webrtc-streamer
https://github.com/mpromonet/webrtc-streamer/releases
2、運行
雙擊解壓后的.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" charset="utf-8"></script><script src="/data/adapter.min.js" charset="utf-8"></script> </head>
4、頁面中使用
<template><div class="ev-player"><CommonDragWindow v-model="innerShow" :width="600" :height="400" :resize="true" :position="position"><template v-slot:title>{{ title }}</template><template #default><video :id="`video-${equipId}`" autoplay width="100%" height="98%"></video></template></CommonDragWindow></div>
</template><script setup>import CommonDragWindow from './CommonDragWindow.vue'import { getConfigList } from '@/api/common.js'import { ref, onMounted, watchEffect, watch, nextTick } from 'vue'const 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.amp'if (rtspStr) {await nextTick() // 待dom加載完畢let videoDocument = document.getElementById('video')webRtcServer = new WebRtcStreamer(videoDocument, `http://${window.appConfig.localhost}:8000`)webRtcServer.connect(rtspStr, null, `rtptransport=tcp&timeout=60`)}} else {webRtcServer?.disconnect()webRtcServer = null}show.value = val})onMounted(() => {})
</script><style scoped lang="scss">.ev-player {:deep(video) {width: 100%;height: calc(100% - 5px);}}
</style>
