前端基础(三十六):读取本地音视频设备并进行播放

效果

在这里插入图片描述

navigator.mediaDevices.enumerateDevices

请求媒体输入和输出设备的列表,例如麦克风,摄像机,耳机设备等

navigator.mediaDevices.getUserMedia

会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道(来自硬件或者虚拟视频源,比如相机、视频采集设备和屏幕共享服务等等)、一个音频轨道(同样来自硬件或虚拟音频源,比如麦克风、A/D 转换器等等),也可能是其他轨道类型

源码

<div id="app">
    <select id="audio-select">
        <option value="">请选择</option>
    </select>
    <select id="video-select">
        <option value="">请选择</option>
    </select>
    <video id="video" autoplay controls></video>
</div>

<script>
    window.onload = function () {
        const audioSelect = document.getElementById('audio-select');
        const videoSelect = document.getElementById('video-select');
        const video = document.getElementById('video');

        // 获取全部设备
        navigator.mediaDevices.enumerateDevices()
            .then(devices => {
                devices.forEach(device => {
                    let option = document.createElement('option');
                    option.value = JSON.stringify(device);
                    option.innerText = device.label;
                    switch (device.kind) {
                        case 'audioinput':
                        case 'audiooutput':
                            audioSelect.appendChild(option);
                            break;
                        case 'videoinput':
                            videoSelect.appendChild(option);
                            break;
                    }
                });
            })

        function videoChange(device) {
            if (!device) return;
            // 播放音视频
            navigator.mediaDevices.getUserMedia({ audio: audioSelect.value ? JSON.parse(audioSelect.value) : false, video: device })
                .then(stream => {
                    video.srcObject = stream;
                })
        }

        videoSelect.onchange = function (e) { videoChange(JSON.parse(e.target.value)) }
    }
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

有关于我在用uniapp开发的问题

1、uniapp做微信小程序&#xff0c;内嵌H5进行支付 其本质是这样的&#xff0c;在微信小程序种&#xff0c;用web-view嵌入H5页面&#xff0c;然后通过web-view的url对H5进行传参&#xff0c;H5传参后可以做一些处理&#xff0c;然后再把参数传给小程序进行支付 //uniapp小程…

云开发校园微社区-二手交易兼职交友微信小程序

云开发校园微社区微信小程序开源源码&#xff0c;这是一款云开发校园微社区-二手交易_兼职_交友_项目微信小程序开源源码&#xff0c;可以给你提供快捷方便的校园生活&#xff0c;有很多有趣实用的板块和功能&#xff0c;如&#xff1a;闲置交易、表白交友、疑问互答、任务兼职…

使用腾讯云轻量应用服务器搭建网站教程

腾讯云轻量应用服务器怎么搭建网站&#xff1f;太简单了&#xff0c;轻量服务器选择宝塔Linux镜像&#xff0c;然后在宝塔面板上添加站点&#xff0c;以WordPress建站为例&#xff0c;腾讯云服务器网来详细说下腾讯云轻量应用服务器搭建网站全流程&#xff0c;包括轻量服务器配…

【企业微信多选的星期数据生成如“周一、周三至周六“】

目标效果如下图 实现这个过程首先是要找到逻辑&#xff0c;这个看似简单的操作却属实让我想了很久。 首先要了解需求 根据拿到的数据得到生成符合要求的字符串。中间有连续的星期大于三天的&#xff0c;开始和结束星期中间要有"至"。 分析逻辑 一、判断开始日期和…

Linux常用命令——emacs命令

在线Linux命令查询工具 emacs 功能强大的全屏文本编辑器 补充说明 emacs命令是由GNU组织的创始人Richard Stallman开发的一个功能强大的全屏文本编辑器&#xff0c;它支持多种编程语言&#xff0c;具有很多优良的特性。有众多的系统管理员和软件开发者使用emacs。 语法 e…

在线考试系统

在线考试系统 简介 该系统由C#开发语言开发&#xff0c;数据库是sql server2016&#xff0c;前端用到的前端技术有Bootstrap&#xff0c;js&#xff0c;css等前端技术&#xff0c;同时用到的.Net Core MVC的技术框架。另外本系统也支持mysql&#xff0c;暂未调试。 该系统是…

Exceptional C++读书笔记——泛型程序设计与C++标准库

更新中——上次更新&#xff08;2023.07.13-23:07&#xff09; 迭代器&#xff08;iterator&#xff09; #include <iostream> #include <vector> #include <iterator> #include <algorithm>int main() { std::vector<int> e; std::copy(…

10_SPI_Flash 连续写实验

10_SPI_Flash 连续写实验 1. 实验目标2. 连续写方法3. 操作时序4. 流程框图4.1 顶层模块4.2 连续写模块 5. 波形图6. RTL6.1 flash_seq_wr_ctrl6.2 spi_flash_seq_wr 7. Testbench 1. 实验目标 使用页写指令&#xff0c;将串口发送过来的连续不定量数据写入 Flash。本实验中&a…

Redis【实战篇】---- 秒杀优化

Redis【实战篇】---- 秒杀优化 1. 秒杀优化-异步秒杀思路2. 秒杀优化-Redis完成秒杀资格判断3. 秒杀优化-基于阻塞队列完成秒杀优化 1. 秒杀优化-异步秒杀思路 我们来回顾一下下单流程 当用户发起请求&#xff0c;此时会请求nginx&#xff0c;nginx会访问到tomcat&#xff0c…

如何在没有软件的情况下将 PDF 转换为 PPT(100% 免费)

演示文稿由文字、图片、音频、动画等元素组成&#xff0c;通常用于会议、课堂或演讲中&#xff0c;展示演讲者想要表达的主要内容。如果您遇到重要文档以 PDF 格式存储&#xff0c;但现在需要转换为 PPT 格式的情况&#xff0c;请不要担心。我们本指南的目标是帮助用户将 PDF 转…

Qt + QR-Code-generator 生成二维码

0.前言 之前使用 libgrencode 生成二维码&#xff0c;LGPL 协议实在不方便&#xff0c;所以需要找一个 github 星星多的&#xff0c;代码简单最好 header-only&#xff0c;协议最好是 MIT 或者兼容协议而不是 GPL 或者 LPGL。 QR-Code-generator 正好符合这个要求&#xff0c…

【自定义类型】(结构体、枚举、联合)

结构体内存对齐&#xff1a; 计算结构体的大小 结构体成员不是按照顺序在内存中连续存放的而是有一定的对齐规则的 结构体内存对齐的规则&#xff1a; 1、结构体的第一个成员永远放在相比于结构体变量起始位置的偏移量为0的位置。 2、从第二个成员开始&#xff0c;往后的每…

Gateway服务集成Nacos2021.0.4错误解决

问题 gateway服务集成nacos&#xff0c;启动后报错&#xff1a; Caused by: com.alibaba.nacos.shaded.io.grpc.netty.shaded.io.netty.channel.AbstractChannel$AnnotatedConnectException: Connection refused: no further information:; 版本&#xff1a; jdk:1.8 spring-b…

Node连接Mongodb数据库

1.初始化 npm init 2.安装mongoose npm i mongoose 3.导入mongoose const mongooserequire("mongoose") 4.连接mongodb服务 mongoose.connect("mongodb://127.0.0.1:27017/user") 说明&#xff1a;mongodb是协议,user是数据库&#xff0c;如果没有会自动创…

C#使用跨平台的PdfSharpCore开源库生成PDF文件

一、需求说明 在进行项目开发中,需要将C#程序的一些文本内容导出为PDF文件(能够根据文本自动分行分页),并且要求这个生成PDF文件的程序是可跨平台的;实现类似效果: 二、需求分析 ①将程序的文本内容导出为PDF文件; ②能够将文本内容自动分行分页【且可添加页眉、页脚、…

Docker安全开放远程访问连接权限

1、Docker完全开放远程访问 Docker服务完全开放对外访问权限操作如下&#xff1a; # 开启端口命令 &#xff08;--permanent永久生效&#xff0c;没有此参数重启后失效&#xff09; firewall-cmd --zonepublic --add-port2375/tcp --permanent # 重新载入 firewall-cmd --re…

2.Vue3中Cesium地图初始化及地图控件配置

前言 本文中&#xff0c;我们主要介绍 Cesium 在 Vue 3运行环境的配置&#xff0c;以及 Cesium 实例中控件的显隐设置&#xff0c;本文是后续文章内容的基础&#xff0c;项目代码在此查看&#xff1b;通过本文&#xff0c;我们可以得到一个纯净的 cesium 项目&#xff0c;后续的…

字符设备驱动开发(最初方式)

目录&#xff1a; 1.字符设备驱动简介2.字符设备驱动开发步骤2.1. 驱动模块的加载与卸载2.2. Makefile的编写2.3.字符设备的注册与注销2.3.1.设备号的组成2.3.2.设备号的分配 2.4.具体操作函数的实现2.4.1.进行打开和关闭操作2.4.2.对chrdev进行读写操作 3.具体程序的实现3.1.驱…

huggingface datasets map时出现KeyError: ‘output‘的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

Spring MVC相关注解运用 —— 上篇

目录 一、Controller、RequestMapping 1.1 示例程序 1.2 测试结果 二、RequestParam 2.1 示例程序 2.2 测试结果 三、RequestHeader、CookieValue 3.1 示例程序 3.2 测试结果 四、SessionAttributes 4.1 示例程序 4.2 测试结果 五、ModelAttribute 5.1 示例程序 …