永康网站设计,建设网站那个公司好,垂直门户网站都有什么,wordpress 主题 网店文章目录
WebRTC-Streamer概述Docker部署WebRTC-StreamerVue使用WebRTC-Streamer一些问题
WebRTC-Streamer概述
WebRTC-Streamer是一个基于WebRTC技术的流媒体传输工具#xff0c;它可以通过Web浏览器实现实时音视频流的传输和播放。它提供了一种简单而强大的方式#xff…文章目录
WebRTC-Streamer概述Docker部署WebRTC-StreamerVue使用WebRTC-Streamer一些问题
WebRTC-Streamer概述
WebRTC-Streamer是一个基于WebRTC技术的流媒体传输工具它可以通过Web浏览器实现实时音视频流的传输和播放。它提供了一种简单而强大的方式允许用户在不需要插件或额外软件的情况下进行实时通信和流媒体传输。
WebRTC-Streamer的主要功能包括
实时音视频传输使用WebRTC技术可以在浏览器中通过实时传输音频和视频流来进行实时通信比如语音通话、视频聊天等。网络摄像头和麦克风支持支持从用户计算机上的摄像头和麦克风捕获音视频流并将其传输到目标设备。流媒体播放可以接收和播放通过WebRTC传输的音视频流让用户可以在浏览器中实时查看和听取流媒体内容。简单易用的API提供了一套简单易用的API让开发者能够方便地集成WebRTC-Streamer到自己的Web应用程序中。
WebRTC-Streamer可以在不同平台和设备上运行只要浏览器支持WebRTC技术即可。它是一个开源项目你可以在GitHub上找到它的源代码和更多的信息。如果你有特定的问题或需求欢迎进一步提问。
Docker部署WebRTC-Streamer 安装Docker 拉取WebRTC-Streamer镜像 sudo docker pull mpromonet/webrtc-streamer 创建容器 docker run -p 8000:8000 --name webrtc-streamer -it mpromonet/webrtc-streamer
-p 8000:8000 是指定端口映射将容器内部的 8000 端口映射到主机的 8000 端口这样你就可以通过主机的 8000 端口访问 WebRTC-Streamer。--name webrtc-streamer 是为容器指定一个名称方便后续管理和操作。-it 是以交互模式运行容器可以通过终端进行交互。mpromonet/webrtc-streamer 是容器镜像的名称。这个镜像是从 Docker Hub 上获取的它包含了 WebRTC-Streamer 的运行环境和配置。
使用浏览器访问 http://localhost:8000/本机或者服务器ip:8000 Vue使用WebRTC-Streamer
首先需要在webrtcstreamer.js文件的最后一行添加
export default WebRtcStreamer;Vue代码
templatediv classvideoDemo shadow refvideoDemovideo idvideo stylewidth: 100%;height: calc(100% - 50px); autoplay loop controls/video/div
/templatescript setup langtsimport { onMounted, onUnmounted, ref } from vueimport WebRtcStreamer from ../../utils/webrtcstreamer.jsvar webRtcServer : any null;onMounted(() {//连接后端的IP地址和端口webRtcServer new WebRtcStreamer(video, http://192.168.0.105:8000);//向后端发送rtsp地址 // webRtcServer.connect(rtsp://admin:a12345678192.168.0.101:554/Streaming/Channels/101);webRtcServer.connect(rtsp://admin:a12345678192.168.0.104:554/Streaming/Channels/101);})onUnmounted(() {webRtcServer.disconnect();})
/scriptstyle.videoDemo {font-size: 50px;width: 100%;height: 100%;text-align: center;background-color: white;/* margin: 5px; */border-radius: 10px;overflow: hidden;}
/styleonMounted()函数会在组件挂载到DOM树上后立即被调用可以用来执行一些需要在组件挂载后才能进行的操作例如获取数据、初始化一些变量、注册事件等。onMounted函数是一个异步函数因此可以使用async/await语法或者返回一个Promise对象。
在组件挂载后连接获取视频流并在video标签中显示。
onUnmounted()函数会在组件从DOM树上卸载之前调用可以用来执行一些清理操作例如取消事件监听器、清除定时器等。与onMounted函数一样onUnmounted函数也是一个异步函数可以使用async/await语法或者返回一个Promise对象。
在组件卸载前断开视频流的连接。
http://192.168.0.105:8000是WebRTC-Streamer部署的地址rtsp://admin:a12345678192.168.0.104:554/Streaming/Channels/101 是摄像头的地址。
一些问题
外部主机无法无法使用WebRTC-Streamer
使用下面的语句创建容器
docker run -d --networkhost --name webrtc-streamer mpromonet/webrtc-streamer--networkhost将容器加入主机网络中使容器内部的端口与主机端口一致。注使用-p暴露端口会出现问题外部主机无法使用WebRTC-Streamer
访问端口无法打开网页8000端口也没有占用
不知道什么问题重装Docker解决了问题。
