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

获取浏览器硬件资源的媒体数据（拍照、录音、录频、屏幕共享）

news 文章来源：https://blog.csdn.net/weixin_48557496/article/details/125195361 2025/5/1 16:18:04

一、window.navigator 对象包含有关访问者浏览器的信息取

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script>function fun() {var txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";txt += "<p>浏览器名称: " + navigator.appName + "</p>";txt += "<p>浏览器版本: " + navigator.appVersion + "</p>";txt += "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";txt += "<p>硬件平台: " + navigator.platform + "</p>";txt += "<p>用户代理: " + navigator.userAgent + "</p>";txt += "<p>用户代理语言: " + navigator.language + "</p>";txt += "<p>媒体设备: " + navigator.mediaDevices + "</p>";console.log(navigator.mediaDevices);document.getElementById("test").innerHTML = txt;}window.onload = fun;</script></head><body><div id="test"></div></body>
</html>

在这里插入图片描述

二、MediaDevices

MediaDevices API

MediaDevices 接口提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。

MediaDevices.enumerateDevices()
获取有关系统中可用的媒体输入和输出设备的一系列信息。
getSupportedConstraints()
返回一个符合 MediaTrackSupportedConstraints (en-US) 的对象。该对象指明了 MediaStreamTrack 接口支持的可约束的属性。
getDisplayMedia()
提示用户选择显示器或显示器的一部分（例如窗口）以捕获为MediaStream 以便共享或记录。返回解析为 MediaStream 的 Promise。
MediaDevices.getUserMedia()
在用户通过提示允许的情况下，打开系统上的相机或屏幕共享和/或麦克风，并提供 MediaStream 包含视频轨道和/或音频轨道的输入。

1.使用麦克风

var promise = navigator.mediaDevices.getUserMedia(constraints);

constraints 参数是一个包含了video 和 audio两个成员的MediaStreamConstraints 对象，用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求，那么返回的 Promise 对象就会处于 rejected［失败］状态，NotFoundError作为 rejected［失败］回调的参数。

以下同时请求不带任何参数的音频和视频：

{ audio: true, video: true }
更多参数详情请点此处

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script>async function fun() {//获取语音数据流let stream = await navigator.mediaDevices.getUserMedia({audio: true, //获取语音输入许可video: false,});//将语音数据流放到audio中输出(用于监听语音输入的效果)document.querySelector("audio").srcObject = stream;}window.onload = fun;</script></head><body><audio controls id="audioTest"></audio></body>
</html>

在这里插入图片描述
选择输入设备（你自己实现即可比较简单，视屏也是如此）

使用MediaDevices.enumerateDevices()获取媒体设备后筛选输入设备
将audio: true换成audio:语音输入设备即可获取音频输入流

2.使用摄像头（和音频一样）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script>async function fun() {//获取摄像头数据流let stream = await navigator.mediaDevices.getUserMedia({audio: false,video: true, //获取摄像头输入许可});//将摄像头数据流放到audio中输出document.querySelector("video").srcObject = stream;}window.onload = fun;</script></head><body><video controls width="400px" height="400px"></video></body>
</html>

在这里插入图片描述

3.拍照

原理看这里

原理就是：

获取画布的 2D 渲染上下文
将图片输入源的（dx, dy）起始坐标到（dx+dWidth, dy+dHeight）所形成的矩形的内容画到画布中去

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script>//获取摄像头数据流async function fun() {let stream = await navigator.mediaDevices.getUserMedia({audio: false,video: true, //获取摄像头输入许可});//将摄像头数据流放到audio中输出document.querySelector("video").srcObject = stream;}window.onload = fun;//拍照function takePhoto() {//获取画布let context = document.getElementById("photo").getContext("2d");//将某一元素的内容画下来//imageResource 图片源//dx, dy 起始坐标//dWidth, dHeight 图片长宽context.drawImage(document.querySelector("video"), 0, 0, 300, 300);}</script></head><body><video autoplay width="300px" height="300px"></video><input type="button" value="拍照" onclick="takePhoto()" /><canvas width="300px" height="300px" id="photo"></canvas></body>
</html>

4.录屏

MediaDevices.getDisplayMedia()
这个 MediaDevices 接口的 getDisplayMedia() 方法提示用户去选择和授权捕获展示的内容或部分内容（如一个窗口）在一个 MediaStream 里. 然后，这个媒体流可以通过使用 MediaStream Recording API 被记录或者作为WebRTC 会话的一部分被传输。

在这里插入图片描述

使用了vue框架

<template><div class="home"><!-- 预览视屏框 --><video autoplay controls ref="test1"></video><div><input type="button" value="开始" @click="start()" /><input type="button" value="暂停" @click="pause()" /><input type="button" value="继续" @click="resume()" /><input type="button" value="结束" @click="stop()" /><input type="button" value="播放" @click="play()" /></div><!-- 录制的视屏 --><video autoplay controls ref="test2" id="audioTest"></video></div>
</template><script>
export default {data() {return {//MediaRecorder对象mediaRecorder: null,//录制结束后获得的数据源mediaData: null,chunks: [],//数据流stream: null,};},mounted() {this.fun();},methods: {async fun() {var self = this;//获取录频数据源this.stream = await navigator.mediaDevices.getDisplayMedia({audio: true,video: true,});//预览视屏绑定数据源this.$refs.test1.srcObject = this.stream;//创建MediaRecorder对象this.mediaRecorder = new MediaRecorder(this.stream, {mimeType: "video/webm;codecs=h264",});//设置ondataavailable的函数。该事件可用于获取录制的媒体资源 (在事件的 data 属性中会提供一个可用的 Blob 对象.)this.mediaRecorder.ondataavailable = function (e) {self.mediaData = e.data;};},start() {//开始录制this.mediaRecorder.start();},pause() {//暂停录制this.mediaRecorder.pause();},resume() {//继续录制this.mediaRecorder.resume();},stop() {//结束录制this.mediaRecorder.stop();},play() {this.$refs.test2.src = URL.createObjectURL(this.mediaData);},},
};
</script>

三、MediaRecorder(录制,可录制音频视屏)

更多详情请点击这里

MediaRecorder 是 MediaStream Recording API 提供的用来进行媒体轻松录制的接口，他需要通过调用 MediaRecorder() 构造方法进行实例化。

构造方法

//语法
var mediaRecorder = new MediaRecorder(stream[, options]);

参数

stream
MediaStream 将要录制的流。它可以是来自于使用 navigator.mediaDevices.getUserMedia() 创建的流或者来自于 , 以及 DOM 元素。
options 可选
一个字典对象，它可以包含下列属性：
mimeType: 为新构建的 MediaRecorder 指定录制容器的 MIME 类型。在应用中通过调用 MediaRecorder.isTypeSupported() 来检查浏览器是否支持此种mimeType .
audioBitsPerSecond: 指定音频的比特率。
videoBitsPerSecond: 指定视频的比特率。
bitsPerSecond: 指定音频和视频的比特率。此属性可以用来指定上面两个属性. 如果上面两个属性只有其中之一和此属性被指定，则此属性可以用于设定另外一个属性。

录制视屏（音频同理）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script>//MediaRecorder对象var mediaRecorder = null;//录制结束后获得的数据源var mediaData = null;//数据流var stream = null;async function fun() {//获取语音、摄像头数据流stream = await navigator.mediaDevices.getUserMedia({audio: true,video: true,});//预览视屏绑定数据源document.getElementById("test1").srcObject = stream;//创建MediaRecorder对象mediaRecorder = new MediaRecorder(stream, {mimeType: "video/webm;codecs=h264",});//设置ondataavailable的函数。该事件可用于获取录制的媒体资源 (在事件的 data 属性中会提供一个可用的 Blob 对象.)mediaRecorder.ondataavailable = function (e) {mediaData = e.data;};}window.onload = fun;function start() {//开始录制mediaRecorder.start();}function pause() {//暂停录制mediaRecorder.pause();}function resume() {//继续录制mediaRecorder.resume();}function stop() {//结束录制mediaRecorder.stop();document.getElementById("test2").src = URL.createObjectURL(mediaData);}</script></head><body><!-- 预览视屏框 --><video autoplay width="300px" height="300px" id="test1"></video><div><input type="button" value="开始" onclick="start()" /><input type="button" value="暂停" onclick="pause()" /><input type="button" value="继续" onclick="resume()" /><input type="button" value="结束" onclick="stop()" /></div><!-- 录制的视屏 --><video autoplay width="300px" height="300px" id="test2"></video></body>
</html>

结束后获取的数据源（Blob）
在这里插入图片描述

获取浏览器硬件资源的媒体数据（拍照、录音、录频、屏幕共享）

目录一、window.navigator 对象包含有关访问者浏览器的信息取二、MediaDevices1.使用麦克风2.使用摄像头（和音频一样）3.拍照4.录屏三、MediaRecorder(录制,可录制音频视屏)一、window.navigator 对象包含有关访问者浏览器的信息取 <!DOCTYPE html>…...

编程日记 2023/2/24 23:23:27

Java入门教程||Java 日期时间||Java 正则表达式

Java 日期时间java.util包提供了Date类来封装当前的日期和时间。Date类提供两个构造函数来实例化Date对象。第一个构造函数使用当前日期和时间来初始化对象。Date( )第二个构造函数接收一个参数，该参数是从1970年1月1日起的毫秒数。Date(long millisec)Date对象创建…...

编程日记 2023/2/24 23:22:19

详解八大排序算法

文章目录前言排序算法插入排序直接插入排序:希尔排序(缩小增量排序)选择排序直接选择排序堆排序交换排序冒泡排序快速排序hoare版本挖坑法前后指针版本快速排序的非递归快速排序总结归并排序归并排序的非递归实现：计数排序排序算法复杂度及稳定性分析总结前言本篇…...

编程日记 2023/2/24 23:21:12

python库streamlit学习笔记

什么是streamlit？ Streamlit是一个免费的开源框架，用于快速构建和共享漂亮的机器学习和数据科学Web应用程序。它是一个基于Python的库，专为机器学习工程师设计。数据科学家或机器学习工程师不是网络开发人员，他们对花几周时间学习…...

编程日记 2023/2/24 23:20:08

C/C++开发，无可避免的内存管理（篇一）-约束好跳脱的内存

一、养成内存管理好习惯 1.1 养成动态对象创建、调用及释放好习惯开发者手动接管内存分配时，必须处理这两个任务。分配原始内存时，必须在该内存中构造对象；在释放该内存之前，必须保证适当地撤销这些对象。如果你的项目是c项目&am…...

编程日记 2023/2/24 23:19:00

在React项目中引入字体文件并使用

一、背景设计稿里某些文字所用的字体，系统默认不支持。比如设计需要的这个字体：EmerlandRegular，即使在css里将文字字体设置为他们，实际效果也显示不出来。二、现象及原因 1、样式 2、期待效果 3、实际效果实际上是因为这个…...

编程日记 2023/2/24 23:17:55

STM32 CubeMX按键点灯

本文代码使用 HAL 库。文章目录前言一、按键原理图二、CubeMX 创建工程三、代码讲解：1. GPIO的输入HAL库函数：2. 消抖：3. 详细代码四，实验现象：总结前言我们继续讲解 stm32 f103，这篇文章将详细为大家讲…...

编程日记 2023/2/24 23:16:48

2023链动2+1模式到底是什么？带你了解核心规则

2023链动21模式到底是什么？带你了解核心规则 2023-02-24 梦龙大家好，我是你们熟悉而又陌生的好朋友梦龙，一个创业期的年轻人传统的直销模式产品低价高卖，消费者难以接受。虽然直销省去了传统流通渠道的中间环节，但…...

编程日记 2023/2/24 23:15:42

【Java面试八股文宝典之基础篇】备战2023 查缺补漏你越早准备越早成功！！！——Day14

大家好，我是陶然同学，软件工程大三今年实习。认识我的朋友们知道，我是科班出身，学的还行，但是对面试掌握不够，所以我将用这100多天更新Java面试题🙃🙃。不敢苟同，相信大…...

编程日记 2023/2/24 23:14:37

K8S篇-搭建kubenetes集群

安装环境这里使用pve虚拟机搭建三台centos机器，搭建过程参考: Centos篇-Centos Minimal安装此次安装硬件配置 CPU：2C 内存：2G 存储：64G 环境说明操作系统：Centos 7.9 内核版本：6.2.0-1.el7.elrepo…...

编程日记 2023/2/24 23:13:31

文本生成图像简述4——扩散模型、自回归模型、生成对抗网络的对比调研

基于近年来图像处理和语言理解方面的技术突破，融合图像和文本处理的多模态任务获得了广泛的关注并取得了显著成功。文本生成图像（text-to-image）是图像和文本处理的多模态任务的一项子任务，其根据给定文本生成符合描述的真实图像…...

编程日记 2023/2/24 23:12:25

财务共享建设，为什么需要电子影像系统？

某集团作为投资性集团公司，业务遍布全国20多个省市，控股公司200余家，业务范围涉及火电、供热、风电、天然气天然气、水务、铁路、港口、酒店、地产等20多个细分行业。伴随着集团企业的快速发展，某集团在管理中面临“点多、面广、…...

编程日记 2023/2/24 23:11:20

「RISC-V Arch」SBI 规范解读（下）

第六章定时器扩展（EID #0x54494D45"TIME"） 这个定时器扩展取代了遗留定时器扩展（EID #0x00），并遵循 v0.2 中定义的调用规约。 6.1 函数：设置定时器（FID #0） struct sbi…...

编程日记 2023/2/24 23:10:17

Android framework socketpair

简述在Linux中，socketpair函数可以用于创建一对相互连接的、通信域为AF_UNIX的套接字，其中一个套接字可用于读取，另一个套接字可用于写入。可以使用这对套接字在同一进程内进行进程间通信（IPC）。以下是使用socketp…...

编程日记 2023/2/24 23:09:12

腾讯在海外游戏和短视频广告领域的新增长机会

来源：猛兽财经作者：猛兽财经腾讯(00700)的收入在过去几个季度一直在下降，部分原因是由于新冠疫情导致的经济放缓以及中国监管机构对大型科技公司的监管收紧导致游戏行业萎缩造成的。然而，猛兽财经认为，这些不利因素…...

编程日记 2023/2/24 23:08:05

查找该学号学生的成绩。

从键盘输入某班学生某门课的成绩（每班人数最多不超过40人），当输入为负值时，表示输入结束，试编程从键盘任意输入一个学号，查找该学号学生的成绩。**输入格式要求："%ld"(学号) "%l…...

编程日记 2023/2/24 23:06:59

为Webpack5项目引入Buffer Polyfill

前言最近在公司的一个项目中使用到了Webpack5， 然而在使用某个npm包的时候，出现了Buffer is not defined 这个问题，原因很明显了，因为浏览器运行时没有Buffer这个API，所以需要为浏览器引入Buffer Polyfill. Webpack5…...

编程日记 2023/2/24 23:05:52

【人工智能 AI 】您可以使用机器人流程自动化 (RPA) 实现自动化的 10 个业务流程：Robotic Process Automation (RPA)

摘：人类劳动正在被机器（例如在工业中）或计算机程序（适用于所有行业）所取代。目录 10 processes you can robotise in your company您可以在公司中实现自动化的 10 个流程 Human employees or robotic workers?人类员工还是机器人工人？ Robots take over headhunting…...

编程日记 2023/2/24 23:04:45

VMware ESXi 8.0b - 领先的裸机 Hypervisor (Dell HPE Custom Image update)

本站发布 Dell 和 HPE 定制版 ESXi 8.0b 镜像请访问原文链接：https://sysin.org/blog/vmware-esxi-8/，查看最新版。原创作品，转载请保留出处。作者主页：www.sysin.org 产品简介 VMware ESXi：专门构建的裸机 Hyper…...

编程日记 2023/2/24 23:03:39

Java：SpringBoot 整合Spring-Retry实现错误重试

SpringBoot 整合Spring-Retry可以实现错误重试目录引入依赖开启spring-retry使用重试注解Retryable 注解Backoff 注解测试参考引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactI…...

编程日记 2023/2/24 23:02:32

MyBatis学习笔记(二) —— 搭建MyBatis项目

2、搭建MyBatis 2.1、开发环境 IDE：idea 2019.2 构建工具：maven 3.5.4 MySQL版本：MySQL 8 MyBatis版本：MyBatis 3.5.7 MySQL不同版本的注意事项 1、驱动类 driver-class-name MySQL 5版本使用jdbc5驱动，驱动类使用…...

编程日记 2023/2/24 23:01:25

linux服务器上Docker中安装jenkins

前言 Jenkins是开源CI&CD软件领导者， 提供超过1000个插件来支持构建、部署、自动化， 满足任何项目的需要。本文主要提供通过docker安装jenkins镜像，并配置nginx反向代理页面配置和使用。通过jenkins完成项目的自动部署。我在安装之前…...

编程日记 2023/2/24 23:00:18

自考都有哪些科目？怎么搭配报考？

第一次自考科目搭配先报理论课，熟悉学习和考试套路参考搭配模式： 一、全报考公共课公共课难度较低，通过率高，复习起来比较轻松。对于不确定考什么专业，后期想换专业的同学，考过公共课&#xff0c…...

编程日记 2023/2/24 22:59:11

HIVE --- 高级查询

目录 CTE和嵌套查询嵌套查询关联查询（join） MapJoin MapJoin操作在Map端完成开启MapJoin操作 MAPJOIN不支持的操作 union 数据交换（import/export） 数据排序 order by sort by distribute by cluster by CTE和嵌…...

编程日记 2023/2/24 22:58:06

【手撕源码】vue2.x双向数据绑定原理

🐱 个人主页：不叫猫先生 🙋‍♂️ 作者简介：前端领域新星创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！ 💫系列专栏：vue3从入门…...

编程日记 2023/2/24 22:57:01

Allegro如何显示层叠Options和Find操作界面

Allegro如何显示层叠Options和Find操作界面 Allegro常规有三大操作界面，层叠，Options和Find，如下图软件第一次启动的时候，三大界面是关闭的，下面介绍如何把它们打开，具体操作步骤如下点击菜单上的View点击Windows...

编程日记 2023/2/24 22:55:56

【数据结构】双向链表

目录数据结构之双向链表：： List.h List.c 1.创建返回链表的头结点 2.双向链表初始化 3.双向链表打印 4.双向链表销毁 5.双向链表尾插 6.双向链表尾删 7.双向链表头插 8.双向链表头删 9.双向链表查找 10.双向链表在pos前插入 11.双向链表删除pos位置 12…...

编程日记 2023/2/24 22:54:48

Editor工具开发基础三：自定义组件菜单拓展 CustomEditor

一.创建脚本路径创建脚本路径不再限制一般写在自定义组件类的下边二.特性CustomEditor 定义主设计图面由自定义代码实现数组的编辑器。两个构造函数1.public CustomEditor(Type inspectedType);2.public CustomEditor(Type inspectedType, bool editorForChildClasses);参数意…...

编程日记 2023/2/24 22:53:42