webrtc学习笔记2

news2024/12/26 0:37:19

音视频采集和播放

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

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>

在这里插入图片描述

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

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

相关文章

虚幻UE5安装报错误代码:SU-PQR5

找到图标的快捷方式 “Epic Games Launcher”右键属性&#xff0c;在目标最后添加-SkipBuildPatchPrereq&#xff0c;如下图&#xff1a; 最后&#xff0c;见证奇迹成功打开软件&#xff0c;可以继续安装啦。 参考资料&#xff1a; 【图片】求教各位大佬--错误代码SU-PQR5【ep…

Linux网络编程—socket、bind

一、socket创建套接字 socket是用来创建网络通信或本地通信的套接字&#xff0c;跟文件有关&#xff1a;告诉系统&#xff0c;PCB&#xff08;进程控制块&#xff09;控制的数据应该向哪个套接字写入、或读取&#xff1b;这个套接字是在TCP/IP协议下运行的 #include <sys/t…

配置MySQL主从,配置MySQL主主 +keeplive高可用

在大数据-Hadoop体系中 配置MySQL主主keeplive高可用 注意&#xff1a;这个是我两年前的word文档&#xff0c;可以当作参考文档有个思路参考一下&#xff0c;但是里面可能有些地方有误 另外 :关于一些企业级实战技术可以参考这篇mysql 物理备份 MySQL 全量备份 增量备份 差异…

NFTScan 正式上线 AI Search 浏览器,实现 NFT 数据双重搜索功能

近日&#xff0c;NFT 数据基础设施服务商 NFTScan 正式对外发布了 AI Search 浏览器&#xff0c;这一创新工具旨在为 NFT 生态中的开发者和用户提供简洁高效的 NFT 数据搜索与查询服务。NFTScan 的这一举措不仅帮助用户更方便地访问相关的 NFT 数据&#xff0c;还大幅提升了数据…

STM32F407ZGT6无操作系统移植lwip2.1.3,,具备DHCP功能

1.工程添加网络库文件 (1).拷贝文件夹 解压en.stsw-stm32070.zip压缩包,把STM32F4x7_ETH_LwIP_V1.1.1\Libraries\STM32F4x7_ETH_Driver文件夹下的inc和src文件夹拷贝到 STM32F407\FWLIB\STM32F4x7_ETH_Driver文件夹目录下&#xff1a; (2).重命名头文件 进入STM32F407\FWLI…

【TM1638不能成功读回按键值】

8led8按键8数码管。主函数调用TM1638_ReadData2&#xff0c;打印了返回值&#xff0c;无论是否按键&#xff0c;都一直打印255&#xff0c;为什么全是1&#xff0c;看来读数据函数有问题啊。 u8 TM1638_ReadData2(void) {uint8_t i;uint8_t temp0x00;TM1638_DIOModeInput();/…

前端读取response.headers异常:Cannot read properties of undefined (reading ‘split‘)

[TOC](前端读取response.headers异常:Cannot read properties of undefined (reading ‘split’) ) 前端读取response.headers异常 Cannot read properties of undefined (reading ‘split’) TypeError: Cannot read properties of undefined (reading ‘split’) 报错解释&a…

如何修改计算机ip地址?几招教你轻松改

在日常使用计算机的过程中&#xff0c;有时我们需要修改计算机的IP地址&#xff0c;无论是出于网络安全、网络管理还是其他特定需求。然而&#xff0c;对于非专业人士来说&#xff0c;这一过程可能显得复杂且充满挑战。但别担心&#xff0c;本文将带您了解IP地址基础知识&#…

day04 --js的常用对象、BOM对象和DOM对象

一、常用对象 1.1 数组 1.创建数组:let arr [1,2,3]; let arr new Array(1,2,3);注意&#xff1a;JS数组不区分数据类型&#xff0c;而且其长度可以随意改变&#xff0c;因此JS数组类似于Java中的集合 ​ 2.数组常用方法:length:这是一个属性&#xff0c;用于获取数组长度fo…

以「垂直模型」引领AIGC商业化落地,FancyTech的技术路径是什么?

我们正在见证又一轮技术革新&#xff0c;这一次是 AIGC 为个体提供表达自我的工具&#xff0c;让创作变得更加容易和普及&#xff0c;但背后的推动力却并不是「大」模型。 点击访问我的技术博客https://ai.weoknow.comhttps://ai.weoknow.com 两年以来&#xff0c;AIGC 技术的发…

快速备份与检索ChatGPT对话记录,以及便捷关闭聊天历史教程

近期&#xff0c;ChatGPT 用户遭遇了一系列对话记录意外丢失的事件&#xff0c;引发了广泛的关注和不便。用户们对于重要聊天记录的安全性表示担忧&#xff0c;害怕珍贵的交流内容会不翼而飞。 令人欣慰的是&#xff0c;OpenAI 在2023年4月11日宣布推出了一项新的功能——Chat…

雨云美国二区E5v2服务器测评(非广告)

注&#xff1a;本文非广告&#xff0c;非推广 本文长期更新地址&#xff1a; 雨云美国二区E5v2服务器测评&#xff08;非广告&#xff09;-星零岁的博客https://blog.0xwl.com/13594.html 今天来测评一下雨云美国二区v2服务器。我测试的这台配置是4-8&#xff0c; 35 M上传&a…

SpringBoot教程(二十三) | SpringBoot实现分布式定时任务之xxl-job

SpringBoot教程&#xff08;二十三&#xff09; | SpringBoot实现分布式定时任务之xxl-job 简介一、前置条件&#xff1a;需要搭建调度中心1、先下载调度中心源码2、修改配置文件3、启动项目4、进行访问5、打包部署&#xff08;上正式&#xff09; 二、SpringBoot集成Xxl-Job1.…

水利机械5G智能制造工厂物联数字孪生平台,推进制造业数字化转型

在当今这个科技日新月异的时代&#xff0c;水利机械行业正经历着一场深刻的变革&#xff0c;其中5G智能制造工厂物联数字孪生平台的引入&#xff0c;无疑是推动制造业数字化转型的重要驱动力。工业物联数字孪生平台是智能制造工厂的核心组成部分&#xff0c;它基于物理世界的真…

入门mysql 数据库

mysql是关系型数据库 &#xff08;安装教程请参考主页相关文章https://blog.csdn.net/2401_86120676/article/details/141265678?spm1001.2014.3001.5502 和mysql Ubuntu安装与远程连接配置-CSDN博客&#xff09; mysql相关指令 1.数据库 展示所有的数据库&#xff1a;sho…

基于神经网络逆同步控制方法的两变频调速电机控制系统matlab仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 神经网络a阶逆系统 4.2 两电机的数学模型 4.3 两电机系统的神经网络逆同步控制 5.完整工程文件 1.课题概述 两电机变频调速系统是一个多输入多输出非线性强耦合的控制系统。本课题使用神经网络构造…

英伟达玩转剪枝、蒸馏:把Llama 3.1 8B参数减半,性能同尺寸更强

小模型崛起了。 上个月&#xff0c;Meta 发布了 Llama 3.1 系列模型&#xff0c;其中包括 Meta 迄今为止最大的 405B 模型&#xff0c;以及两个较小的模型&#xff0c;参数量分别为 700 亿和 80 亿。 Llama 3.1 被认为是引领了开源新时代。然而&#xff0c;新一代的模型虽然性能…

(javaweb)SpringBootWeb案例(毕业设计)案例--文件上传

1.简介 前端程序和服务端程序 对于前端 html文件放在static目录下 location---文件提交的位置 右键--copy value -------------c盘目录下 2.本地上传--文件存储 1. 2. 使用uuid&#xff1a;保证文件名是唯一的 此时 并没有文件的拓展名--所以需要---写后缀 用字符串截取 此时图…

Java、python、php版的宠物美容预约服务系统的设计与实现 (源码、调试、LW、开题、PPT)

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人 八年开发经验&#xff0c;擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等&#xff0c;大家有这一块的问题可以一起交流&…

【报告】从 YCombinator 支持的 400 家(2023年和2024年) AI 初创公司看AI行业

这份报告对 YC 2023 年和 2024 年队列中的 417 家人工智能公司进行了广泛的分析。对于那些不知道的人来说&#xff0c;YCombinator是一个领先的初创企业加速器&#xff0c;提供种子资金、指导和资源&#xff0c;以帮助早期初创企业取得成功&#xff0c;YCombinator (YC)在发现和…