ToB企服应用市场:ToB评测及商务社交产业平台

标题: Docker部署WebRTC-Streamer [打印本页]

---

作者: 忿忿的泥巴坨    时间: 2024-6-29 22:33
标题: Docker部署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镜像
  

1. sudo docker pull mpromonet/webrtc-streamer

复制代码

• 创建容器
  

1. 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文件的最后一行添加：

1. export default WebRtcStreamer;

复制代码

Vue代码：

1. <template>
2.         <div class="videoDemo shadow" ref="videoDemo">
3.                 <video id="video" style="width: 100%;height: calc(100% - 50px);" autoplay loop controls>
4.                 </video>
5.         </div>
6. </template>
8. <script setup lang="ts">
9.         import { onMounted, onUnmounted, ref } from 'vue'
10.         import WebRtcStreamer from '../../utils/webrtcstreamer.js'
11.        
12.         var webRtcServer : any = null;
13.        
14.         onMounted(() => {
15.                 //连接后端的IP地址和端口
16.                 webRtcServer = new WebRtcStreamer("video", "http://192.168.0.105:8000");
17.                 //向后端发送rtsp地址     
18.                 // webRtcServer.connect("rtsp://admin:a12345678@192.168.0.101:554/Streaming/Channels/101");
19.                 webRtcServer.connect("rtsp://admin:a12345678@192.168.0.104:554/Streaming/Channels/101");
20.         })
21.         onUnmounted(() => {
22.                 webRtcServer.disconnect();
23.         })
24. </script>
26. <style>
27.         .videoDemo {
28.                 font-size: 50px;
29.                 width: 100%;
30.                 height: 100%;
31.                 text-align: center;
32.                 background-color: white;；
33.                 /* margin: 5px; */
34.                 border-radius: 10px;
35.                 overflow: hidden;
36.         }
37. </style>

复制代码

onMounted()函数会在组件挂载到DOM树上后立即被调用，可以用来实行一些需要在组件挂载后才能进行的操作，比方获取数据、初始化一些变量、注册变乱等。onMounted函数是一个异步函数，因此可以使用async/await语法或者返回一个Promise对象。
在组件挂载后连接获取视频流，并在video标签中表现。
onUnmounted()函数会在组件从DOM树上卸载之前调用，可以用来实行一些清理操作，比方取消变乱监听器、扫除定时器等。与onMounted函数一样，onUnmounted函数也是一个异步函数，可以使用async/await语法或者返回一个Promise对象。
在组件卸载前，断开视频流的连接。
http://192.168.0.105:8000是WebRTC-Streamer部署的地址，rtsp://admin:a12345678@192.168.0.104:554/Streaming/Channels/101 是摄像头的地址。
一些题目

• 外部主机无法无法使用WebRTC-Streamer
  

使用下面的语句创建容器：

1. docker run -d --network=host --name webrtc-streamer mpromonet/webrtc-streamer

复制代码

--network=host：将容器加入主机网络中，使容器内部的端口与主机端口同等。（注：使用-p暴露端口会出现题目，外部主机无法使用WebRTC-Streamer）

• 访问端口无法打开网页，8000端口也没有占用
  

不知道什么题目，重装Docker办理了题目。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4