Docker部署WebRTC-Streamer

 

文章目录

  • WebRTC-Streamer概述
  • Docker部署WebRTC-Streamer
  • Vue使用WebRTC-Streamer
  • 一些问题

 
 

WebRTC-Streamer概述

WebRTC-Streamer是一个基于WebRTC技术的流媒体传输工具,它可以通过Web浏览器实现实时音视频流的传输和播放。它提供了一种简单而强大的方式,允许用户在不需要插件或额外软件的情况下进行实时通信和流媒体传输。

WebRTC-Streamer的主要功能包括:

  1. 实时音视频传输:使用WebRTC技术,可以在浏览器中通过实时传输音频和视频流来进行实时通信,比如语音通话、视频聊天等。
  2. 网络摄像头和麦克风支持:支持从用户计算机上的摄像头和麦克风捕获音视频流,并将其传输到目标设备。
  3. 流媒体播放:可以接收和播放通过WebRTC传输的音视频流,让用户可以在浏览器中实时查看和听取流媒体内容。
  4. 简单易用的API:提供了一套简单易用的API,让开发者能够方便地集成WebRTC-Streamer到自己的Web应用程序中。

WebRTC-Streamer可以在不同平台和设备上运行,只要浏览器支持WebRTC技术即可。它是一个开源项目,你可以在GitHub上找到它的源代码和更多的信息。如果你有特定的问题或需求,欢迎进一步提问。

Docker部署WebRTC-Streamer

  1. 安装Docker

  2. 拉取WebRTC-Streamer镜像

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 的运行环境和配置。
  1. 使用浏览器访问 http://localhost:8000/(本机)或者<服务器ip>:8000

网页效果

Vue使用WebRTC-Streamer

首先需要在webrtcstreamer.js文件的最后一行添加:

export default WebRtcStreamer;

Vue代码:

<template><div class="videoDemo shadow" ref="videoDemo"><video id="video" style="width: 100%;height: calc(100% - 50px);" autoplay loop controls></video></div>
</template><script setup lang="ts">import { onMounted, onUnmounted, ref } from 'vue'import WebRtcStreamer from '../../utils/webrtcstreamer.js'var webRtcServer : any = null;onMounted(() => {//连接后端的IP地址和端口webRtcServer = new WebRtcStreamer("video", "http://192.168.0.105:8000");//向后端发送rtsp地址     // webRtcServer.connect("rtsp://admin:a12345678@192.168.0.101:554/Streaming/Channels/101");webRtcServer.connect("rtsp://admin:a12345678@192.168.0.104:554/Streaming/Channels/101");})onUnmounted(() => {webRtcServer.disconnect();})
</script><style>.videoDemo {font-size: 50px;width: 100%;height: 100%;text-align: center;background-color: white;/* margin: 5px; */border-radius: 10px;overflow: hidden;}
</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 是摄像头的地址。

一些问题

  1. 外部主机无法无法使用WebRTC-Streamer

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

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

--network=host:将容器加入主机网络中,使容器内部的端口与主机端口一致。(注:使用-p暴露端口会出现问题,外部主机无法使用WebRTC-Streamer)

  1. 访问端口无法打开网页,8000端口也没有占用

不知道什么问题,重装Docker解决了问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/815489.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Appium的使用:混合APP切换上下文

网上别的文章说要把移动端的webview设置成调试模式,才能看到下图信息。 但我这里是直接在Android Studio新建了一个空白活动,然后放的webview控件,写的webview代码,直接部署到模拟器上,在确定adb可以连接到模拟器后,在桌面浏览器输入chrome://inspect/#devices后就可以看…

需要使用rabbitmq的延迟队列的业务场景有哪些

RabbitMQ的延迟队列在多种业务场景中都能发挥重要作用。以下是一些常见的需要使用RabbitMQ延迟队列的业务场景&#xff1a; 1、订单超时处理 场景描述&#xff1a; 在电商系统中&#xff0c;用户下单后需要在一定时间内完成支付&#xff0c;否则订单应自动取消。 延迟队列应…

枚举类的使用场景

思考一下这寄个问题&#xff0c;我们将围绕这三个问题来开始学习&#xff1a; 什么是枚举 怎么定义枚举 枚举的使用场景 1 什么是枚举 Java 枚举&#xff08;Enum&#xff09;是一种特殊的数据类型&#xff0c;它是一组预定义的常量&#xff0c;每个常量都有一个名称和一…

分布式存储系统Megastore

文章目录 说明设计目标及方案选择数据的分区和复制 数据模型照片共享服务数据模型实例Megastore索引Bigtable中存储情况 事务及并发控制Megastore提供的三种读Megastore的写操作完整的事务周期 Megastore基本架构快速读与快速写 核心技术之复制复制的日志数据读取数据写入协调者…

小米温度计接入HA后,手机米家app里温度计就看不到温度数值了

环境&#xff1a; 小米温度计 HA OS Core 2023.12.1 Supervisor 2024.04.0 Operating System 11.1 问题描述&#xff1a; 小米温度计接入HA后&#xff0c;手机米家app里和HA里面温度计就看不到温度数值了 解决方案&#xff1a; 1.前往米家APP&#xff0c;解绑温度计和本地…

全局代理导致JetBrains IDE CPU占用高,jdk.internal.net.http.common

GoLand版本&#xff1a;2022.3.4 解决办法&#xff1a; 使用SOCKS代理代替HTTP代理 禁用Space和Code With Me插件 禁用 TLS V1.3&#xff0c;参考&#xff1a;https://stackoverflow.com/questions/54485755/java-11-httpclient-leads-to-endless-ssl-loop 参考 https://…

【Java】隐式锁(synchronized):如何解决餐厅等座的并发难题

当你走进一家熙熙攘攘的餐厅&#xff0c;准备享受一顿美味的晚餐时&#xff0c;你是否曾想过&#xff0c;这里正上演着一场场微观的线程战争&#xff1f;在这个场景中&#xff0c;每一张桌子都代表着珍贵的共享资源&#xff0c;而每一位顾客&#xff08;线程&#xff09;都在争…

vue快速入门(二十三)侦听器的简单写法与完整写法

注释很详细&#xff0c;直接上代码 上一篇 新增内容 侦听器简单写法侦听对象或属性侦听器完整写法侦听对象&#xff08;可选深度侦听&#xff09; 源码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name…

五子棋:不会下五子棋也没关系,会用Java写五子棋就行

关注公号“微澜网络”获取完整源代码&#xff01; 效果展示&#xff1a; 目录 效果展示&#xff1a; 导语&#xff1a; 游戏介绍&#xff1a; 程序设计&#xff1a; 1.游戏规则和功能&#xff1a; 2.用户界面设计&#xff1a; 3.程序架构设计&#xff1a; 4.可扩展性和灵…

LC 70.爬楼梯

70.爬楼梯 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 示例 1&#xff1a; 输入&#xff1a; n 2 输出&#xff1a; 2 解释&#xff1a; 有两种方法可以爬到楼顶。 1 阶 1 阶2 阶 示例 2…

linux 常用的命令汇总

Linux 系统中有许多强大的命令&#xff0c;下面是一些常用和好用的命令汇总&#xff1a; 文件和目录操作 ls: 列出目录内容。cd: 更改当前目录。mkdir: 创建新目录。rmdir: 删除空目录。rm: 删除文件或目录。cp: 复制文件或目录。mv: 移动或重命名文件或目录。touch: 创建空文…

64B/66B编码

一、前言 8B/10B编码主要作用的优化直流平衡&#xff0c;从8bit中插2个bit进去&#xff0c;这样的话最终效果能够使长0或者长1的位数不超过5位&#xff0c;达到很好的效果。但是由于8B/10B编码的带宽利用率非常低&#xff0c;10G的带宽只有8G在传输有效数据&#xff0c;2G的带…

使用Git将文件夹上传到Github以及使用Git LFS上传大文件

使用Git将文件夹上传到Github以及使用Git LFS上传大文件

【高录用-快速见刊】2024年数字化经济与金融创新国际学术会议(ICDEFI 2024)

会议简介 2024年数字经济与金融创新国际学术会议即将召开。此次会议旨在汇集全球数字经济与金融创新领域的专家学者&#xff0c;共同探讨数字经济的发展趋势以及金融创新的路径。与会者将分享前沿研究成果&#xff0c;讨论数字技术在金融领域的应用与创新&#xff0c;并推动数…

一篇文章了解php7和php8新特性

PHP7新特性 ?? 运算符 php7以前用三目判断变量是否存在或是否为空 $a isset($_GET[a]) ? $_GET[a] : 1;php7新增null 合并运算符??快捷判断 $a $_GET[a] ?? 1;函数返回值类型声明 用:返回值类型的形式定义函数的返回值类型 <?phpdeclare(strict_types1); fun…

算法刷题记录 Day46

算法刷题记录 Day46 Date: 2024.04.13 lc 53. 最大子数组和 class Solution { public:int maxSubArray(vector<int>& nums) {// dp[i]表示以nums[i]结尾的连续子数组的最大和&#xff1b;// dp[i] max(nums[i], dp[i-1]nums[i]);若之前的最大和小于0&#xff0c;…

Unity DOTS1.0(4) Baking 和 Baker

Baking 概念&#xff1a; 把Editor中的GameObject数据转换成entities数据写入到Entity Scens里面,这个过程我们叫做BakingBaking是一种不可逆的操作&#xff0c;把低效代价昂贵的但是灵活的GameObjects转换成性能高效的Entities与Components。 作用&#xff1a; 在传统的模…

MyBatis批量插入的五种方式

MyBatis批量插入的五种方式: 一、准备工作 1、导入pom.xml依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- MySQL驱动依赖 --…

【蓝桥杯日常】

美丽的2 #include <iostream> using namespace std; int main() {int cnt0; int tmp;for(int i1;i<2020;i){tmpi;//避免改变i的值while(tmp){if(tmp%102){cnt;break;//有2就跳出循环} tmp/10;}}cout<<cnt;return 0; }基础不牢地动山摇是我这样的。这个题花费的…

韩顺平 | 零基础快速学Python(15) 错误和异常

概述 Python有两种不同的错误&#xff1a;语法错误和异常。 语法错误SyntaxError/句法错误/解析错误&#xff1a;执行前编译器检测到的错误。语法错误也是一种异常&#xff0c;SyntaxError继承Exception。 异常Exception&#xff1a;执行时检测到的错误。 需求&#xff1a;出…