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

web端调用本地摄像头麦克风+WebRTC腾讯云,实现直播功能

目录

  • 关于直播
    • 直播流程
    • 直播视频格式封装
    • 推流和拉流
  • 获取摄像头和麦克风权限
    • navigator.getUserMedia()
    • MediaDevices.getUserMedia()
  • WebRTC
  • 腾讯云快直播

关于直播

视频直播技术大全、直播架构、技术原理和实现思路方案整理

直播流程

  • 视频采集端:
    1、视频采集:使用摄像头设备获取实时视频流。
    2、视频处理: 对采集到的视频进行处理,可以包括美颜、滤镜、水印等效果的添加。
    3、音视频编码压缩: 将处理后的音视频数据进行编码压缩,常用的编码方式有H.264视频编码和AAC音频编码。

  • 直播流视频服务端:
    1、视频流解析编码:接收视频采集端传来的音视频数据流,进行解析和解码。
    2、推送RTMP/HLS格式视频流:将解码后的音视频数据流封装成RTMP或HLS格式,并推送到流媒体服务器上。这些流媒体服务器会处理客户端的连接和请求,将直播内容分发给客户端。

  • 视频播放端:
    1、音视频解码:在播放端,接收到来自直播流视频服务端的数据流,进行解码,得到原始的音频和视频数据。
    2、播放+聊天互动:将解码后的音视频数据进行播放,同时提供用户界面供观众观看。可以在播放端实现一些互动功能,比如弹幕、点赞、评论等。

直播视频格式封装

直播视频通常会经过特定的封装格式,以便在网络上传输和播放。这些封装格式可以将音频、视频、元数据等信息进行组合和管理,以确保流畅的传输和播放体验。

FLV: 一种由Adobe公司开发的流媒体封装格式,最初用于Flash播放器和RTMP协议传输。它可以容纳音频、视频、文本和元数据,并且适用于实时传输和播放。

TS: 一种用于传输多媒体内容的封装格式,常用于数字电视和IPTV。它可以容纳多路音频、视频和数据流,适合实时传输和广播。HLS协议中使用的就是TS格式来封装音视频流。

MP4: 一种通用的多媒体封装格式,可以容纳音频、视频、字幕和元数据。它被广泛用于存储和传输音视频内容,也可以用于直播。MP4格式通常使用H.264视频编码和AAC音频编码。

推流和拉流

推流(Publishing)拉流(Subscribing)是在实时音视频通信中常见的术语,用于描述音视频数据的传输过程。推流指的是将本地音视频数据发送到服务器,而拉流则是从服务器接收远程音视频数据。

HLS 是由苹果公司开发的一种流媒体传输协议,主要用于在iOS设备、Web浏览器和其他支持HLS的设备上实现实时的音视频流播放。HLS将音视频流切割成一系列小的媒体文件(使用 .ts 格式进行封装,将音视频流分割成小的.ts文件),通过HTTP协议逐个传输和播放。
优点:
1、适用于多种设备和平台,包括iOS、Android、Web等。
2、支持自适应码率,根据网络状况动态调整视频质量。
3、在不同带宽下都能提供较好的流畅播放体验。
4、使用HTTP协议传输,不需要特定的服务器支持。
缺点:
1、延迟相对较高,通常在10秒左右。
2、需要将媒体流切割成小文件,增加服务器压力和存储开销。

RTMP 是Adobe公司开发的实时消息传输协议,基于TCP协议传输,最初用于Flash播放器与媒体服务器之间的音视频传输。
优点:
1、延迟相对较低,通常在1-3秒左右,适合实时互动。
2、支持即时性的直播,适用于一些对延迟要求较高的场景。
3、在Flash播放器上有较好的兼容性。
缺点:
1、不适用于iOS设备和某些平台,因为不被广泛支持。
2、需要专门的RTMP服务器支持,部署和维护相对复杂。
3、需要考虑防火墙和代理等网络限制。

获取摄像头和麦克风权限

navigator.getUserMedia()

MDN-navigator.getUserMedia()

Navigator.getUserMedia() 方法提醒用户需要使用音频(0 或者 1)和(0 或者 1)视频输入设备,比如相机,屏幕共享,或者麦克风。

语法: navigator.getUserMedia ( constraints, successCallback, errorCallback );

代码:

<body><video autoplay id="video" width="400" height="300"></video><script>var video = document.getElementById('video');//作兼容处理navigator.getMedia = navigator.getUserMedia ||navagator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.msGetUserMedia;navigator.getMedia({ audio: true, video: true },function (stream) {//MDN文档案例中这样写会报错:video.src = window.URL.createObjectURL(stream);video.srcObject = streamvideo.onloadedmetadata = function (e) {video.play();};},function (err) {console.log("The following error occurred: " + err.name);});</script>
</body>

虽然这个api依然可以使用,但是官网上已经换了另一个api——MediaDevices.getUserMedia()
在这里插入图片描述

MediaDevices.getUserMedia()

MDN-MediaDevices.getUserMedia()

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

语法:

navigator.mediaDevices.getUserMedia(constraints).then(function (stream) { /* 使用这个 stream stream */ }).catch(function (err) { /* 处理 error */});

代码:

<video autoplay id="video" width="400" height="300"></video>
<script>var video = document.getElementById('video');navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function (stream) {/* 使用这个 stream stream */video.srcObject = streamvideo.onloadedmetadata = function (e) {video.play();};}).catch(function (err) {/* 处理 error */console.log("The following error occurred: " + err.name);});</script>

WebRTC

MDN-WebRTC API

WebRTC(Web Real-Time Communication)是一种支持浏览器之间实时通信的开放式标准和技术,它使得浏览器可以直接在不需要插件或额外的软件的情况下进行音频、视频和数据的传输和通信。WebRTC 技术的核心目标是实现实时的、点对点的通信,包括视频聊天、音频通话、数据共享等功能。

代码:

<body><!-- 显示本地视频 --><h2>本地视频</h2><video id="localVideo" autoplay playsinline style="width: 300px;"></video><!-- 显示远程视频 --><h2>远程视频</h2><video id="remoteVideo" autoplay playsinline style="width: 300px;"></video><button id="startCall">发起通话</button><button id="answerCall">接听通话</button>//呼叫者:<script>const localVideo = document.getElementById('localVideo');let localStream;// 呼叫者:获取本地摄像头和麦克风权限navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {localStream = stream;localVideo.srcObject = localStream;}).catch(error => {console.error('获取本地媒体流失败:', error);});const startCallButton = document.getElementById('startCall');startCallButton.addEventListener('click', () => {startCall();});async function startCall() {// 呼叫者:创建PeerConnectionconst peerConnection = new RTCPeerConnection();// 添加本地媒体流到PeerConnectionlocalStream.getTracks().forEach(track => {peerConnection.addTrack(track, localStream);});// 呼叫者:创建Offer并设置本地描述peerConnection.createOffer().then(offer => peerConnection.setLocalDescription(offer)).then(() => {// 发送本地描述到远程const offerSdp = peerConnection.localDescription;// 在实际应用中,需要将offerSdp发送给远程端// 远程端通过RTCPeerConnection.setRemoteDescription()设置远程描述}).catch(error => {console.error('创建Offer失败:', error);});}</script>//被呼叫者:<script>const remoteVideo = document.getElementById('remoteVideo');let remoteStream;const answerCallButton = document.getElementById('answerCall');answerCallButton.addEventListener('click', () => {answerCall();});async function answerCall() {// 创建PeerConnectionconst peerConnection = new RTCPeerConnection();// 设置ontrack事件处理程序以接收远程流peerConnection.ontrack = event => {remoteStream = event.streams[0];remoteVideo.srcObject = remoteStream;};// 在实际应用中,你需要获取呼叫者发送的offerSdp// 并通过RTCPeerConnection.setRemoteDescription()设置远程描述// 创建Answer并设置本地描述const answer = await peerConnection.createAnswer();await peerConnection.setLocalDescription(answer);const answerSdp = peerConnection.localDescription;// 在实际应用中,你需要将answerSdp发送给呼叫者// 呼叫者通过RTCPeerConnection.setRemoteDescription()设置远程描述}</script>
</body>

腾讯云快直播

腾讯云直播-WebRTC协议推流

云直播提供了推流 SDK TXLivePusher 用于 Web 推流,负责将浏览器采集的音视频画面通过 WebRTC 协议推送到直播服务器。目前支持摄像头采集、麦克风采集、屏幕分享采集、本地媒体文件采集和用户自定义采集等采集方式,支持对采集到的内容进行本地混流处理,然后推送到后端服务器。

1、引入初始化脚本(需要在 HTML 的 body 部分引入脚本,如果在 head 部分引入会报错。)

<script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.1.0.min.js" charset="utf-8"></script>

2、创建视频容器

<div id="local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;"></div>

3、生成推流 SDK 实例

    //通过全局对象 TXLivePusher 生成 SDK 实例,后续操作都是通过实例完成。const livePusher = new TXLivePusher();// 指定本地视频播放器容器 div,浏览器采集到的音视频画面会渲染到这个 div 当中。livePusher.setRenderView('local_video');// 设置音视频流    livePusher.setVideoQuality('720p');// 设置音频质量livePusher.setAudioQuality('standard');// 自定义设置帧率livePusher.setProperty('setVideoFPS', 25);

4、开启直播推流

    // 开启直播// 打开摄像头       livePusher.startCamera();// 打开麦克风livePusher.startMicrophone();//传入云直播推流地址,开始推流。livePusher.startPush(推流地址);

使用腾讯云直播服务时,推流地址需要满足腾讯云标准直播推流 URL 的格式 ,如下所示,它由四个部分组成:
在这里插入图片描述

5、关闭直播

    // 关闭直播// 停止直播推流livePusher.stopPush();// 关闭摄像头livePusher.stopCamera();// 关闭麦克风livePusher.stopMicrophone();

完整代码:

<body><div id="local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;"></div></div><script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.1.0.min.js" charset="utf-8"></script><script>//通过全局对象 TXLivePusher 生成 SDK 实例,后续操作都是通过实例完成。const livePusher = new TXLivePusher();// 指定本地视频播放器容器 div,浏览器采集到的音视频画面会渲染到这个 div 当中。livePusher.setRenderView('local_video');// 设置音视频流    livePusher.setVideoQuality('720p');// 设置音频质量livePusher.setAudioQuality('standard');// 自定义设置帧率livePusher.setProperty('setVideoFPS', 25);// 开启直播// 打开摄像头       livePusher.startCamera();// 打开麦克风livePusher.startMicrophone();//传入云直播推流地址,开始推流。livePusher.startPush(推流地址);// 关闭直播// 停止直播推流livePusher.stopPush();// 关闭摄像头livePusher.stopCamera();// 关闭麦克风livePusher.stopMicrophone();</script>
</body>

如有误,请指正!

相关文章:

web端调用本地摄像头麦克风+WebRTC腾讯云,实现直播功能

目录 关于直播直播流程直播视频格式封装推流和拉流 获取摄像头和麦克风权限navigator.getUserMedia()MediaDevices.getUserMedia() WebRTC腾讯云快直播 关于直播 视频直播技术大全、直播架构、技术原理和实现思路方案整理 直播流程 视频采集端&#xff1a; 1、视频采集&#…...

React笔记(八)Redux

一、安装和配置 React 官方并没有提供对应的状态机插件&#xff0c;因此&#xff0c;我们需要下载第三方的状态机插件 —— Redux。 1、下载Redux 在终端中定位到项目根目录&#xff0c;然后执行以下命令下载 Redux npm i redux 2、创建配置文件 在 React 中&#xff0c;…...

数据库 | 数据库概述、关系型数据库、非关系型数据库

目录&#xff1a; 1.数据库&#xff1a;1.1 数据库的含义1.2 数据库的特点 2.数据表3.数据库管理系统4.数据库系统5.关系型数据库 和 非关系型数据库&#xff1a;5.1 关系型数据库5.2 关系型数据库“优势”5.3 非关系型数据库 6.关系型数据库 和 非关系型数据库 的“区别” 1.数…...

【备战csp-j】 csp常考题目详解(4)

四.数值转换与编码 1. 十进制数 11/128 可用二进制数码序列表示为( ) 。 A.1011/1000000 B.1011/100000000 C.0.001011 D.0.0001011 答案&#xff1a;D 解析&#xff1a;暂时未找到解决方法&#xff0c;以后会解决。 2. 算式(2047)10 &#xff0d; (3FF)16 &#xff0b; …...

linux中常见服务端安装

linux安装服务脚本 1、yum安装 # 通过apt安装yum apt install yum # yum安装软件 yum install pam-devel # yum 卸载 yum remove pam-devel2、rpm安装 # 安装 rpm -i example.rpm #安装 example.rpm 包&#xff1b; rpm -iv example.rpm #安装 example.rpm 包并在安装过程…...

L1-058 6翻了(Python实现) 测试点全过

前言&#xff1a; {\color{Blue}前言&#xff1a;} 前言&#xff1a; 本系列题使用的是&#xff0c;“PTA中的团体程序设计天梯赛——练习集”的题库&#xff0c;难度有L1、L2、L3三个等级&#xff0c;分别对应团体程序设计天梯赛的三个难度。更新取决于题目的难度&#xff0c;…...

初学Python记

Python这个编程语言的大名当然听说过了呀&#xff0c;这几年特别火&#xff0c;火的一塌涂地。大家可以回忆一下&#xff1a;朋友圈推荐的广告里经常可以看见python的网课广告。 本学期&#xff0c;学校开设了python课程&#xff0c;这几天学习了一下入了一下门&#xff0c;感…...

计算机竞赛 基于深度学习的目标检测算法

文章目录 1 简介2 目标检测概念3 目标分类、定位、检测示例4 传统目标检测5 两类目标检测算法5.1 相关研究5.1.1 选择性搜索5.1.2 OverFeat 5.2 基于区域提名的方法5.2.1 R-CNN5.2.2 SPP-net5.2.3 Fast R-CNN 5.3 端到端的方法YOLOSSD 6 人体检测结果7 最后 1 简介 &#x1f5…...

sentinel-core

引入依赖<dependencies><dependency><groupId>com.alibaba.csp</groupId><artifactId>sentinel-core</artifactId></dependency><dependency><groupId>com.alibaba.csp</groupId><artifactId>sentinel-anno…...

【美团3.18校招真题1】

大厂笔试真题网址&#xff1a;https://codefun2000.com/ 塔子哥刷题网站博客&#xff1a;https://blog.codefun2000.com/ 小美剪彩带 提交网址&#xff1a;https://codefun2000.com/p/P1088 题意&#xff1a;找出区间内不超过k种数字子数组的最大长度 使用双指针的方式&…...

Springboot 实践(14)spring config 配置与运用--手动刷新

前文讲解Spring Cloud zuul 实现了SpringbootAction-One和SpringbootAction-two两个项目的路由切换&#xff0c;正确访问到项目中的资源。这两个项目各自拥有一份application.yml项目配置文件&#xff0c;配置文件中有一部分相同的配置参数&#xff0c;如果涉及到修改&#xf…...

MyBatisPlus枚举类最佳实践(非常典型和高效的枚举类写法)

目录 1、MyBatisPlus枚举类最佳实践 2、枚举类的作用及问题 3、MyBatisPlus注解实现枚举最佳实践 4、简单来说 5、下面我们看一个使用上述注解的完整枚举类示例: &#xff08;1&#xff09;枚举类&#xff1a; &#xff08;2&#xff09;DTO类&#xff1a; 6、根据上面…...

uniapp分包 解决分多个包的问题

1. 分包可以分很多个, 但是在"optimization": { "subPackages": true } 里面只能写一个, 2. 想分多个包 , 在 pages.json 里面 的 subPackages 里面继续加 第三个 第四个即可 3. 保存之后 创建页面就可以看见多个包了...

美国封锁激励中国制造业数字化转型的崛起 | 百能云芯

上海在近日公布了第二批工赋链主培育企业名单&#xff0c;共有15家企业入选。这些被称为“链主”的企业在上海制造业数字化转型的过程中扮演着关键角色&#xff0c;类似于领头大雁&#xff0c;它们是上海制造业的数字化网络中的关键节点。 中新社的报道指出&#xff0c;“数字技…...

鼠标键盘自动化工具pyautogui

安装 pip install pyautogui pip install keyboard获取鼠标实时位置 import pyautogui pyautogui.displayMousePosition()样例代码 # https://pyautogui.readthedocs.org/ # https://github.com/asweigart/pyautogui# 紧急停止&#xff0c;手动将鼠标移动到屏幕的4个角落imp…...

0基础学习VR全景平台篇 第96篇:VR电子楼书

大家好&#xff0c;欢迎观看蛙色VR官方系列课程——VR电子楼书&#xff01; 作为2021年底全新上线的行业解决方案&#xff0c;是专门针对地产、园区数字化营销的一站式VR解决方案&#xff0c;为行业潜在客户提供优质的7x24小时线上看房体验。 本期教程将通过功能介绍后台操作&…...

【MySQL】数据库的约束

MySQL 数据库的约束 文章目录 MySQL 数据库的约束01 数据库的约束1.1 约束类型1.1.1 NOT NULL1.1.2 UNIQUE1.1.3 DEFAULT1.1.4 PRIMARY KEY1.1.5 FOREIGN KEY1.1.6 CHECK 继上文 MySQL基础&#xff08;一&#xff09;&#xff0c; MySQL基础&#xff08;二&#xff09;&#…...

改变金融贷款市场营销方式 ---- 运营商大数据精准获客

与传统的企业网络营销相比&#xff0c;最常见的是网络推广和硬广告推广。一些企业无法找到可靠准确的数据来源&#xff0c;也无法找到一些未知的总数据。这些数据大多存在持续时间长、准确性差的缺点&#xff0c;企业在将这些数据信息应用于商品在线营销时往往会遇到不足。 在…...

SpringBoot实现分页的四种方式

一 自己封装Page对象实现 博客链接 二 使用sql实现分页 2.1 场景分析 前段传递给给后台什么参数? 当前页码currentPage每页显示条数pageSize 后台给前端返回什么数据? 当前页数据List总记录数totalCount 2.2 前段代码 <template><el-paginationsize-change&q…...

远程工作面试:特殊情况下的面试技巧

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...