当前位置： 首页 > news >正文

webrtc学习笔记2

news 文章来源：https://blog.csdn.net/ddddd_y/article/details/141230282 2025/2/9 3:49:30

音视频采集和播放

打开摄像头并将画面显示到页面

1. 初始化button、video控件
2. 绑定“打开摄像头”响应事件onOpenCamera
3. 如果要打开摄像头则点击 “打开摄像头”按钮，以触发onOpenCamera事件的调用
4. 当触发onOpenCamera调用时
a. 设置约束条件，即是getUserMedia函数的入参
b. getUserMedia有两种情况，一种是正常打开摄像头，使用handleSuccess处理；一种是打开摄像头失败，使
用handleError处理
c. 当正常打开摄像头时，则将getUserMedia返回的stream对象赋值给video控件的srcObject即可将视频显示出
来

<!DOCTYPE html>
<html ><body ><video id="local-video" autoplay playsinline></video><button id="showVideo" >打开摄像头</button><p>通过getUserMedia()获取视频</p></body><script >const constraints = {audio: false,video: true};// 处理打开摄像头成功function handleSuccess(stream) {const video = document.querySelector("#local-video");video.srcObject = stream;}// 异常处理function handleError(error) {console.error("getUserMedia error: " + error);}function onOpenCamera(e) {navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);}document.querySelector("#showVideo").addEventListener("click", onOpenCamera);</script>
</html>

在这里插入图片描述

打开麦克风并在页面播放捕获的声音

1. 初始化button、audio控件
2. 绑定“打开麦克风”响应事件onOpenMicrophone
3. 如果要打开麦克风则点击 “打开麦克风”按钮，以触发onOpenMicrophone事件的调用
4. 当触发onOpenCamera调用时
a. 设置约束条件，即是getUserMedia函数的入参
b. getUserMedia有两种情况，一种是正常打开麦克风，使用handleSuccess处理；一种是打开麦克风失败，使
用handleError处理
c. 当正常打开麦克风时，则将getUserMedia返回的stream对象赋值给audio控件的srcObject即可将声音播放出
来

<!DOCTYPE html><html><body><audio id="local‐audio" autoplay controls>播放麦克风捕获的声音</audio><button id="playAudio">打开麦克风</button><p>通过getUserMedia()获取音频</p></body>  <script>const constraints={audio:true,video:false};//处理打开麦克风成功function handleSuccess(stream){const audio =document.querySelector("#local-audio");audio.srcObject=stream;}// 异常处理function handleError(error){console.error("getUserMedia error: " + error);}function onOpenMicro(e) {navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);}document.querySelector("#playAudio").addEventListener("click", onOpenMicrophone);</script>  </html>

在这里插入图片描述

打开摄像头和麦克风

主要区别是

const constraints = (window.constraints = {audio: true,video: true});

<!DOCTYPE html>
<html><body>//muted消除回声<video id="local‐video" autoplay playsinline muted></video><button id="showVideo">打开音视频</button><div id="errorMsg"></div><p>通过 <code>getUserMedia()</code> 获取音视频.</p><script>const constraints = (window.constraints = {audio: true,video: true});// 处理打开摄像头+麦克风成功function handleSuccess(stream) {const video = document.querySelector("#local‐video");video.srcObject = stream;}function handleError(error) {console.error("getUserMedia error: " + error);}async function onOpenAV(e) {navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);}document.querySelector("#showVideo").addEventListener("click",onOpenAV);</script></body>
</html>

在这里插入图片描述

相关文章：

webrtc学习笔记2

音视频采集和播放 打开摄像头并将画面显示到页面 1. 初始化button、video控件 2. 绑定“打开摄像头”响应事件onOpenCamera 3. 如果要打开摄像头则点击 “打开摄像头”按钮&#xff0c;以触发onOpenCamera事件的调用 4. 当触发onOpenCamera调用时 a. 设置约束条件&#xff0c…...

编程日记 2024/8/21 23:28:51

Simple RPC - 06 从零开始设计一个服务端（上）_注册中心的实现

文章目录 Pre核心内容服务端结构概述注册中心的实现1. 注册中心的架构2. 面向接口编程的设计3. 注册中心的接口设计4. SPI机制的应用 小结 Pre Simple RPC - 01 框架原理及总体架构初探 Simple RPC - 02 通用高性能序列化和反序列化设计与实现 Simple RPC - 03 借助Netty实现…...

编程日记 2024/8/21 23:26:49

【深度学习】基于Transformers的大模型推理框架

本文旨在介绍基于transformers的decoder-only语言模型的推理框架。与开源推理框架不同的是&#xff1a; 本框架没有利用额外的开源推理仓库&#xff0c;仅基于huggingface&#xff0c;transformers&#xff0c;pytorch等原生工具进行推理&#xff0c;适合新手学习大模型推理流…...

编程日记 2024/8/21 23:24:47

电脑监控怎样看回放视频？一键解锁电脑监控回放，守护安全不留死角！高效员工电脑监控，回放视频随时查！

你是否曾好奇那些键盘敲击背后的秘密&#xff1f;电脑监控不仅是守护企业安全的隐形盾牌&#xff0c;更是揭秘高效与合规的魔法镜&#xff01;一键解锁安企神监控回放&#xff0c;就像打开时间宝盒&#xff0c;让过去的工作瞬间跃然眼前。无论是精彩瞬间还是潜在风险&#xff0…...

编程日记 2024/8/21 23:23:46

【一起学Rust | 框架篇 | Tauri2.0框架】tauri中rust和前端的相互调用（rust调用前端）

文章目录 前言1. rust中调用前端2. 如何向前端发送事件3. 前端监听事件4. 执行js代码 前言 近期Tauri 2.0 rc版本发布&#xff0c;2.0版本迎来第一个稳定版本&#xff0c;同时官方文档也进行了更新。Tauri是一个使用Rust构建的框架&#xff0c;可以让你使用前端技术来构建桌面…...

编程日记 2024/8/21 23:22:45

deque容器

deque容器的基本概念 deque 是 C 标准库中的双端队列&#xff08;double-ended queue&#xff09;容器&#xff0c;提供了在两端进行插入和删除操作的功能。 deque与vector区别&#xff1a; vector对于头部的插入删除效率低&#xff0c;数据量越大效率越低。deque相对而言&am…...

编程日记 2024/8/21 23:20:43

Redis远程字典服务器（9）—— 类型补充

类型查询传送门&#xff1a;Understand Redis data types | Docs 一&#xff0c;stream类型 官方文档对于这个类型的解释是&#xff1a;streams是一个数据结构&#xff0c;它表现得像一个 “append-only log”&#xff0c;就是只能往后面添加&#xff0c;底层是字符串&#x…...

编程日记 2024/8/21 23:18:41

VMware虚拟机nat无法联通主机

VMware在nat模式下主机无法ping通虚拟机 原因&#xff1a; 虚拟机和对应的网卡不在一个网段 虚拟机开启了防火墙 解决方法: 首先判断虚拟机的网络ip是否和网卡在一个网段上 判断虚拟机使用的网卡 nat模式在VMware虚拟机中一般只有一个对应的网卡 如图笔者的nat网卡为VM…...

编程日记 2024/8/21 23:17:40

「字符串」详解AC自动机并实现对应的功能 / 手撕数据结构（C++）

目录 前置知识 概述 核心概念&#xff1a;fail指针 作用 构建 图示 Code 成员变量 创建销毁 添加词库 文本扫描 复杂度 Code 前置知识 在此前&#xff0c;你应该首先了解trie树&#xff08;字典树&#xff09;的概念&#xff1a; 「字符串」详解Trie&#xff0…...

编程日记 2024/8/21 23:16:39

freecad遭遇网络不同无法安装插件Addon Manager: Unexpected 0 response from server

16:31:18 Addon Manager: Unexpected 0 response from server 16:31:18 Failed to connect to GitHub. Check your connection and proxy settings. 打开freecad的插件管理器时候&#xff0c;有些地方&#xff0c;比如我在家里就不行&#xff0c;在公司就ok。 于是找到了解…...

编程日记 2024/8/21 23:15:38

Ruby模板引擎：构建动态视图的艺术

标题&#xff1a;Ruby模板引擎&#xff1a;构建动态视图的艺术 在Ruby on Rails的世界里&#xff0c;模板引擎是构建动态网页的基石。它们允许开发者将服务器端的逻辑嵌入到HTML中&#xff0c;实现数据的动态展示。本文将深入探讨Ruby中几种常用的模板引擎&#xff0c;包括ERB…...

编程日记 2024/8/21 23:14:37

HarmonyOS NEXT星河版零基础入门（3）

目录 1. 系统弹出框 2.interface转成class类 3.vp/fp 4. 写一个正方形 设置它的宽度 但不设定高度 不论屏幕怎么变实现他的宽高比 5.State 6.图片和资源 7.淘宝镜像 7.1windows 脚本禁用&#xff08;操作策略 允许npm包的命令可执行&#xff09; 8. es6&ArkTS中…...

编程日记 2024/8/21 23:13:36

第二十讲 python中的异常结构-try except-else-finally

目录 1.try... except 结构 2. try... 多个except结构 3. try...except...else结构 4. try...except...finally结构 5. return语句和异常处理问题 5.1 异常处理前的 return 5.2异常处理后的 return 5.3 finally 块中的 return 6.常见的异常 1.try... except 结构 try except 是…...

编程日记 2024/8/21 23:12:35

springer 投稿系统中返修注意点

初次提交 初次提交时&#xff0c; manuscript 提交的是 pdf 文件 返修后提交 在经过返修之后需要提交的是注意一下几点&#xff1a; 此时提交的Blined manuscript &#xff0c;虽然名字没变&#xff0c;但不能再提交pdf 文件&#xff0c; 而需要提交的是可编辑的源文件 .te…...

编程日记 2024/8/21 23:11:33

CSS:display和visiblity

隐藏元素- display:none和visibility:hidden display 属性设置一个元素应如何显示&#xff0c;visibility 属性指定一个元素应可见还是隐藏。 隐藏一个元素可以通过吧display属性设置为“none”&#xff0c;或者把visibility属性设置为“hidden”。但是这两种会产生不同的结果…...

编程日记 2024/8/21 23:10:32

43.x86游戏实战-XXX寻找吸怪坐标

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 工具下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1rEEJnt85npn7N38Ai0_F2Q?pwd6tw3 提…...

编程日记 2024/8/21 23:06:29

Redis地理位置相关应用

下面是一个结合 MySQL 数据库和 Redis 的地理位置服务示例&#xff0c;包含表结构、PHP 代码和 Redis 操作&#xff0c;用于处理基于地理位置的数据存储和查询。 1. 创建 MySQL 数据库表 首先&#xff0c;创建一个用于存储位置信息的 MySQL 表&#xff0c;如下所示&#xff1…...

编程日记 2024/8/21 23:04:27

优化WAN流量：如何通过调整系统设置降低企业网络成本

一、症状与问题背景 当电脑显示空闲状态时&#xff0c;如果满足以下条件&#xff0c;第二拨号链接可能会意外激活&#xff1a; 您正在使用基于 Microsoft Windows 的计算机&#xff0c;该计算机连接到远程网络并且是 Active Directory 域服务 (AD DS) 域的成员。 您通过二级…...

编程日记 2024/8/21 23:03:26

Java-HttpHeaders请求头或响应头

HttpHeaders 是 Spring Framework 中的一个类，用于封装 HTTP 头部信息。它提供了一种方便的 方式来设置 HTTP 请求头和处理 HTTP 响应头。下面分别介绍如何使用 HttpHeaders 来设置请求 头和处理响应头。 设置请求头 在发送 HTTP 请求时，可以通过 HttpHeaders 设置各种请…...

编程日记 2024/8/21 23:02:25

Elasticsearch高阶查询

Elasticsearch高阶查询 文章目录 Elasticsearch高阶查询相关性和相关性算分相关性 (Relevance)什么是TF-IDFBM25explain关键字Boosting如何通过Boost控制想要的文档排在前面&#xff1f; 布尔查询&#xff08;bool Query&#xff09;查询语法语法格式 单字符串多字段查询三种场…...

编程日记 2024/8/21 23:01:23

【流媒体】RTMPDump—RTMP_Connect函数（握手、网络连接）

目录 1. RTMP_Connect函数1.1 网络层连接&#xff08;RTMP_Connect0&#xff09;1.2 RTMP连接&#xff08;RTMP_Connect1&#xff09;1.2.1 握手&#xff08;HandShake&#xff09;1.2.2 RTMP的NetConnection&#xff08;SendConnectPacket&#xff09; 2.小结 RTMP协议相关&am…...

编程日记 2024/8/21 22:58:21

通过https方式访问内网IP

单位要做个用浏览器扫二维码的功能。我先在本地测试一直不成功&#xff0c;后来放到服务器上运行成功了。比较了一下&#xff0c;服务器上是https&#xff0c;但是本地没有证书。我问了一下信安的同事&#xff0c;要求二维码必须在本地扫描&#xff0c;不能上公网。所以只好在本…...

编程日记 2024/8/21 22:57:20

flutter 键盘弹出 都会重新Build

原因是调用MediaQuery.of(context)后&#xff0c;点击TextField组件时会导致调用build方法。 解决方法&#xff1a;在Scaffold组件的body嵌套Builder组件&#xff0c;然后设置一个BuildContext变量&#xff0c;将Builder组件中的context传递给BuildContext变量&#xff0c;然后…...

编程日记 2024/8/21 22:55:17

RedisDistributedLock 分布式锁

设计一个简单的 RedisDistributedLock 类&#xff0c;实现单例模式&#xff0c;并包含基本的锁定机制。这个类将使用 Redis 来管理锁&#xff0c;确保在分布式系统中资源的同步访问 import redis.clients.jedis.Jedis;public class RedisDistributedLock {private static Redi…...

编程日记 2024/8/21 22:51:13

Java之包装类

Java中的包装类&#xff08;Wrapper Classes&#xff09;是基本数据类型的对象包装类。Java为每个基本数据类型&#xff08;如int、char等&#xff09;提供了对应的包装类&#xff0c;使得基本类型可以被当作对象来处理。这些包装类位于java.lang包中。 包装类的用途 对象化&a…...

编程日记 2024/8/21 22:50:11

Linux - 权限

文章目录 一、用户二、文件 一、用户 1、Linux下有两种用户&#xff1a;超级用户&#xff08;root&#xff09;、普通用户。 超级用户&#xff1a;可以再linux系统下做任何事情&#xff0c;不受限制 。 普通用户&#xff1a;在linux下做有限的事情。 超级用户的命令提示符是“…...

编程日记 2024/8/21 22:49:10

免费图形化nginx管理工具nginxWebUI

nginxWebUI是一款图形化管理nginx配置得工具, 可以使用网页来快速配置nginx的各项功能, 包括http协议转发, tcp协议转发, 反向代理, 负载均衡, 静态html服务器, ssl证书自动申请、续签、配置等, 配置好后可一建生成nginx.conf文件, 同时可控制nginx使用此文件进行启动与重载, 完…...

编程日记 2024/8/21 22:48:08

编程上的挫折不可怕，可怕的是你畏惧了

如何克服编程学习中的挫折感 编程学习之路上&#xff0c;挫折感就像一道道难以逾越的高墙&#xff0c;让许多人望而却步。然而&#xff0c;真正的编程高手都曾在这条路上跌倒过、迷茫过&#xff0c;却最终找到了突破的方法。那么&#xff0c;我是如何在Bug的迷宫中找到出口的&…...

编程日记 2024/8/21 22:47:07

docker逃逸手法

docker逃逸手法 基本docker操作docker 命令dockerfilesDocker Compose漏洞利用容器漏洞 基本docker操作 docker 命令 # docker拉取 docker pull # 指定版本拉取 docker pull ubuntu:22.04# 显示镜像可执行的操作 docker image # 列出存储在本地系统上的所有图像 docker image…...

编程日记 2024/8/21 22:46:06

3 pytest Fixture

3 pytest Fixture 3.1 通过 conftest.py 共享 fixture3.2 使用 fixture 执行配置及销毁逻辑3.3 使用 --setup-show 回溯 fixture 的执行过程3.4 使用 fixture 传递测试数据3.5 使用多个 fixture3.6 指定 fixture 作用范围3.7 使用 usefixtures 指定 fixture3.8 为常用 fixture …...

编程日记 2024/8/21 22:44:04

做网站设计需要多久/理发美发培训学校

女孩倒在秋千上&#xff0c;男孩用力地推啊推啊。 　　 男孩篮球比赛&#xff0c;女孩叫破了嗓子&#xff0c;第二天依然出现在男孩面前说昨天你真逊。　　女孩说我要最漂亮的那朵&#xff0c;男孩奋不顾身地爬上树&#xff0c;然后遍体鳞伤地对女孩说给你。　　男孩的头上出…...

编程日记 2025/2/9 0:59:07

wordpress 手机 登陆/百度免费安装下载

mysql5.7 root账号的密码忘记&#xff0c;重置&#xff08;会删除数据&#xff0c;慎用&#xff01;&#xff09;此方法相当于重装。mysql需要在本机安装。 1、cmd命令行停掉mysql net stop mysql2、清除mysql安装目录下的data目录下的所有数据3、cmd执行&#xff1a; my…...

编程日记 2025/2/8 22:33:19

清远网站制作/网站搭建外贸

真的很想吐槽一下李航老师后面的附录&#xff0c;看的我是云头雾里&#xff0c;上网查了很多资料才搞懂。 这篇文章主要讲解牛顿法和拟牛顿法一些算法思路上的由来&#xff0c;作为附录的补充&#xff0c;具体算法细节可以参考那本书1.牛顿法首先你需要知道的是牛顿法本身是一个…...

编程日记 2025/2/8 18:18:54

江西论坛/百度关键词seo外包

全球领先的射频解决方案设计制造厂商SkyCross日前宣布其面向LTE 和 Wi-Fi的双频iMAT(隔离模式天线技术)和 4x4MIMO(多输入多输出)解决方案能使配备高通骁龙 820 智能设备处理器的性能最大化。SkyCross 先进的 iMAT天线及方案已于2014年面市&#xff0c;并被用于超过一百万部商用…...

编程日记 2025/2/8 17:47:32

什么是电子商务网站/教你如何快速建站

今天&#xff0c;上线一个客户网站之后&#xff08;使用的是广州新一代虚拟空间&#xff09;发现在读取上传的pdf文件的时候读取错误&#xff0c;通过直接在浏览器输入文件地址的时候发现文件地址被重定向了&#xff08;呵呵&#xff01;&#xff09;&#xff0c;结果就是pdf文…...

编程日记 2025/2/8 17:28:22

专做童车批发的网站/互联网销售怎么做

利用 curl 和 pycurl 需要 curl 和 libcurl 的版本高于 7.18.0&#xff0c;并且事先建立好可的代理&#xff0c;例如用 SSH 建立 SOCKS5 代理&#xff1a; [ nobody www ~] $ sshusername omehost.com -CN-f-D127.0.0.1:1080curl 使用方法 [ nobody www ~] $ curl http:// tw…...

编程日记 2025/2/8 17:02:02