AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

前端（六）：读取本地音视频设备并进行播放

2023-07-21 131
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 读取本地音视频设备并进行播放

效果

image.png

navigator.mediaDevices.enumerateDevices

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

navigator.mediaDevices.getUserMedia

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

源码

```html



请选择


请选择



```

文章标签：
前端开发
关键词：
前端设备
前端播放
前端音视频
ProsperLee
目录
相关文章
音视频牛哥
|
编解码 前端开发 Android开发
如何让Android平台像IPC一样实现GB28181前端设备接入
好多开发者在做国标对接的时候，首先想到的是IPC摄像头，通过参数化配置，接入到国标平台，实现媒体数据的按需查看等操作。
音视频牛哥
71 0
音视频牛哥
|
监控 前端开发 网络协议
Android前端音视频数据接入GB28181平台意义
在我们研发Android平台GB28181前端音视频接入模块之前，业内听到最多的是，如何用Android或者Windows端，在没有国标IPC设备的前提下，模拟GB28181的信令和媒体流交互流程，实现GB28181整体方案的测试？
音视频牛哥
135 0
土木林森
|
10天前
|
编解码 前端开发 开发者
前端开发的必修课：如何让你的网页在不同设备上完美呈现？
【10月更文挑战第30天】随着互联网的普及，用户访问网页的设备种类繁多。前端开发者需确保网页在不同设备上完美呈现。本文介绍了一些最佳实践，包括使用响应式设计、相对单位、灵活的图片和视频、测试与优化及考虑交互设计，帮助实现跨设备兼容。
土木林森
24 2
Boale_H
|
6月前
|
前端开发
前端播放第三方外链视频报403 forbidden的原因及解决方案
前端播放第三方外链视频报403 forbidden的原因及解决方案
Boale_H
235 0
音视频牛哥
|
编解码 监控 前端开发
如何快速实现Android平台前端设备接入能力
SIP(会话初始化协议)是在 IP网络上进行多媒体通信的应用层控制协议，以几种RFC的形式提供，其中最重要的是包含核心协议规范的RFC3261。该协议用于创建，修改和终止与一个或多个参与者的会话。通过会话，我们了解了一组进行通信的发送方和接收方，以及在通信过程中这些发送方和接收方保持的状态。会话的示例可以包括Internet电话呼叫，多媒体分发，多媒体会议，分布式计算机游戏等。
音视频牛哥
73 0
音视频牛哥
|
编解码 监控 前端开发
如何实现Android平台GB28181前端设备接入
在实现Android平台GB28181前端设备接入之前，我们几年前就有了非常成熟的RTMP推送、RTSP推送和轻量级RTSP服务等模块，特别是RTMP推送，行业内应用非常广泛，好多开发者可能会问，既然有了以上模块，干嘛还要实现GB28181的前端接入呢？
音视频牛哥
189 0
前端李十三
|
JavaScript 前端开发
Vue前端获取客户端设备类型
Vue前端获取客户端设备类型
前端李十三
229 0
HeartSuit
|
存储 JavaScript 前端开发
TDengine极简实战：从采集到入库，从前端到后端，体验物联网设备数据流转
TDengine极简实战：从采集到入库，从前端到后端，体验物联网设备数据流转
HeartSuit
1320 1
ProsperLee
|
移动开发 前端开发
前端（四）：移动端页面闪烁、设备识别、全屏切换
移动端页面闪烁、设备识别、全屏切换
ProsperLee
136 0
萌狼蓝天
|
前端开发
【前端】CSS实现图片文字对齐 并随着设备尺寸改变而改变大小
【前端】CSS实现图片文字对齐 并随着设备尺寸改变而改变大小
萌狼蓝天
215 0
【前端】CSS实现图片文字对齐 并随着设备尺寸改变而改变大小

热门文章

最新文章

  • 1
    lemon oa前端页面——由user-base-list谈项目组织
  • 2
    好程序员web前端培训分享JavaScript学习笔记cookie
  • 3
    前端性能优化参考资料
  • 4
    前端，测试如何修改后端接口返回的响应数据
  • 5
    前端 时间个性化 插件 jquery.timeago.js
  • 6
    wordpress页面前端添加编辑按钮
  • 7
    前端分页插件pagination
  • 8
    GIS前端编程-Leaflet插件发布
  • 9
    GIS前端—Popup标注视图
  • 10
    阿里前端算法题两道
  • 1
    告别‘老司机’时代，AJAX与Fetch API让你的前端与Python后端无缝对接！
    59
  • 2
    现代前端开发中的响应式设计原则与实践
    88
  • 3
    现代前端开发中的响应式设计实践与优化
    60
  • 4
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    133
  • 5
    前端项目部署问题总结
    61
  • 6
    前端框架与库 - React生命周期与Hooks
    48
  • 7
    前端性能优化都有那些方案 ？
    71
  • 8
    高级前端常见的面试题？
    99
  • 9
    前端框架与库 - React基础：组件、Props、State
    70
  • 10
    技术心得：前端点击按钮，导入excel文件，上传到后台，excel接收和更新数据
    49

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • 快速实现摄像头视频画面的远程预览
  • 基于函数计算实现音视频转码
    • 下一篇
    阿里云OSS设置跨域访问