Python aiortc API

本研究的主要目的是基于Python aiortc api实现抓取本地设备媒体流(摄像机、麦克风)并与Web端实现P2P通话。本文章仅仅描述实现思路,索要源码请私信我。

1 demo-server解耦

1.1 原始代码解析

1.1.1 http服务器端

import argparse
import asyncio
import json
import logging
import os
import ssl
import uuidimport cv2
from aiohttp import web
from aiortc import MediaStreamTrack, RTCPeerConnection, RTCSessionDescription
from aiortc.contrib.media import MediaBlackhole, MediaPlayer, MediaRecorder, MediaRelay
from av import VideoFrame
# 这行代码设置了 ROOT 变量,它代表了当前执行文件(脚本)所在的目录。
# __file__ 是 Python 中的一个特殊变量,它包含了当前文件的路径。
# os.path.dirname 函数返回路径中的目录名称。
# 这个变量通常用于构建其他文件路径,确保它们相对于当前脚本的位置。
ROOT = os.path.dirname(__file__)
# 这行代码创建了一个日志记录器(logger),它的名称是 "pc"。在 Python 的 logging 模块中,
# 每个 logger 都有一个唯一的名称,你可以使用这个名称来获取对应的 logger 实例。
# 这个 logger 将用于记录程序中与 WebRTC 相关的事件和信息。
logger = logging.getLogger("pc")
# 这行代码初始化了一个空的集合(set),名为 pcs。
# 这个集合可能用于存储 RTCPeerConnection 对象的引用。
# 使用集合可以方便地进行添加、检查和删除操作,并且集合中的元素是唯一的。
pcs = set()
# 这行代码创建了一个 MediaRelay 对象,名为 relay。MediaRelay 可能是一个用于
# 中继媒体流的自定义类,它允许将从一个 RTCPeerConnection 
# 接收到的媒体流转发到另一个 RTCPeerConnection。
# 这种类型的中继通常用于 MCU(Multipoint Control Unit)场景或简单的媒体路由。
relay = MediaRelay()# 这段代码定义了一个名为 VideoTransformTrack 的类,它是 MediaStreamTrack 的子类。
# VideoTransformTrack 类的目的是从一个已有的视频轨道(track)接收帧,
# 并对这些帧应用特定的转换(transform),
# 然后返回转换后的帧。以下是对类中各个部分的详细解释:
class VideoTransformTrack(MediaStreamTrack): # 继承"""A video stream track that transforms frames from an another track."""
# kind = "video": 这行代码设置了轨道的类型为视频。kind = "video"
# 构造函数 __init__(self, track, transform)
# track 参数是另一个 MediaStreamTrack 实例,VideoTransformTrack 将从这个轨道接收帧。
# transform 参数是一个字符串,指定要应用的转换类型,可以是 "cartoon"、"edges" 或 "rotate"。def __init__(self, track, transform):super().__init__()  # don't forget this!self.track = trackself.transform = transform# 这个方法展示了如何使用OpenCV对视频帧进行实时处理,包括卡通效果、边缘检测和旋转,
# 并将处理后的帧返回给WebRTC轨道。
# 这段代码是VideoTransformTrack类中的recv方法,它是一个异步方法,# 用于接收视频帧并根据指定的转换类型对帧进行处理。# 下面是对这个方法的详细解释:async def recv(self):# 这行代码异步地从self.track(即类的track属性,一个视频轨道)接收一个视频帧。frame = await self.track.recv()
# 如果转换类型是“cartoon”,则将接收到的视频帧转换为BGR颜色空间的NumPy数组。if self.transform == "cartoon":img = frame.to_ndarray(format="bgr24")
# 这部分代码首先对图像进行两次降采样(pyrDown),然后应用六次双边滤波(bilateralFilter),# 最后进行两次升采样(pyrUp)。# 这个过程有助于减少图像噪声并保持边缘清晰。# prepare colorimg_color = cv2.pyrDown(cv2.pyrDown(img))for _ in range(6):img_color = cv2.bilateralFilter(img_color, 9, 9, 7)img_color = cv2.pyrUp(cv2.pyrUp(img_color))
# 这部分代码将图像转换为灰度图,然后应用中值滤波(medianBlur),# 自适应阈值(adaptiveThreshold)来提取边缘,
# 最后将灰度图转换回RGB颜色空间。# prepare edgesimg_edges = cv2.cvtColor(img, cv2.COLOR_RGB2GRAY)img_edges = cv2.adaptiveThreshold(cv2.medianBlur(img_edges, 7),255,cv2.ADAPTIVE_THRESH_MEAN_C,cv2.THRESH_BINARY,9,2,)# 将处理过的颜色和边缘图像进行按位与操作,以结合两者。img_edges = cv2.cvtColor(img_edges, cv2.COLOR_GRAY2RGB)# combine color and edgesimg = cv2.bitwise_and(img_color, img_edges)
# 最后,将处理后的NumPy数组转换回VideoFrame对象,
# 并保留原始帧的时间戳(pts)和时间基(time_base),然后返回这个新帧。# rebuild a VideoFrame, preserving timing informationnew_frame = VideoFrame.from_ndarray(img, format="bgr24")new_frame.pts = frame.ptsnew_frame.time_base = frame.time_basereturn new_frame# 如果转换类型是“edges”,则对帧进行Canny边缘检测,并将结果转换回BGR颜色空间。elif self.transform == "edges":# perform edge detectionimg = frame.to_ndarray(format="bgr24")img = cv2.cvtColor(cv2.Canny(img, 100, 200), cv2.COLOR_GRAY2BGR)
# 然后将处理后的边缘检测图像转换回VideoFrame对象,并返回。# rebuild a VideoFrame, preserving timing informationnew_frame = VideoFrame.from_ndarray(img, format="bgr24")new_frame.pts = frame.ptsnew_frame.time_base = frame.time_basereturn new_frame# 如果转换类型是“rotate”,则将帧转换为NumPy数组,并计算旋转矩阵,# 然后应用仿射变换(warpAffine)来旋转图像。elif self.transform == "rotate":# rotate imageimg = frame.to_ndarray(format="bgr24")rows, cols, _ = img.shapeM = cv2.getRotationMatrix2D((cols / 2, rows / 2), frame.time * 45, 1)img = cv2.warpAffine(img, M, (cols, rows))
# 将旋转后的图像转换回VideoFrame对象,并返回。# rebuild a VideoFrame, preserving timing informationnew_frame = VideoFrame.from_ndarray(img, format="bgr24")new_frame.pts = frame.ptsnew_frame.time_base = frame.time_basereturn new_frameelse:# 如果转换类型既不是“cartoon”、“edges”也不是“rotate”,则直接返回原始帧。return frame# 这个函数处理对服务器根URL(通常是/)的GET请求。
# 它的作用是返回服务器根目录下index.html文件的内容作为HTTP响应。
# request:这是aiohttp传入的请求对象,包含了请求的详细信息。
# os.path.join(ROOT, "index.html"):使用os.path.join函数构建index.html文件的完整路径。
# ROOT是之前定义的服务器根目录变量。
# open(...).read():以只读模式打开index.html文件,并读取其内容。
# web.Response(content_type="text/html", text=content):创建一个aiohttp响应对象,
# 设置内容类型为text/html,并将读取的HTML内容作为响应正文返回。
async def index(request):content = open(os.path.join(ROOT, "index.html"), "r").read()return web.Response(content_type="text/html", text=content)# 这个函数处理对/client.js路径的GET请求。它的作用是返回服务器根目录下
# client.js文件的内容作为HTTP响应。
# request:这是aiohttp传入的请求对象。
# os.path.join(ROOT, "client.js"):构建client.js文件的完整路径。
# open(...).read():以只读模式打开client.js文件,并读取其内容。
# web.Response(content_type="application/javascript", text=content):
# 创建一个aiohttp响应对象,设置内容类型为application/javascript,
# 并将读取的JavaScript内容作为响应正文返回。
async def javascript(request):content = open(os.path.join(ROOT, "client.js"), "r").read()return web.Response(content_type="application/javascript", text=content)# 这个offer函数是一个异步的Web服务器路由处理函数,用于处理WebRTC连接的建立过程。
# 它接收客户端发送的offer,
# 创建或处理一个RTCPeerConnection对象,并返回一个answer给客户端。
async def offer(request):# 这行代码异步地解析客户端请求的JSON数据,通常包含SDP(会话描述协议)信息和其他参数。params = await request.json()# 使用客户端发送的SDP信息和类型创建一个RTCSessionDescription对象,这个对象表示客户端的offer。offer = RTCSessionDescription(sdp=params["sdp"], type=params["type"])# 创建一个RTCPeerConnection对象,这是WebRTC中用于管理WebRTC连接的对象。pc = RTCPeerConnection()# 为这个连接创建一个唯一的ID。pc_id = "PeerConnection(%s)" % uuid.uuid4()# 将这个连接对象添加到全局的连接集合中,以便后续可以对其进行管理。pcs.add(pc)# 定义一个日志记录函数,用于记录与特定连接相关的信息。def log_info(msg, *args):logger.info(pc_id + " " + msg, *args)# 记录创建连接的远程地址信息。log_info("Created for %s", request.remote)# 准备本地媒体# prepare local media# 创建一个MediaPlayer对象,用于播放本地音频文件。player = MediaPlayer(os.path.join(ROOT, "demo-instruct.wav"))# 根据命令行参数决定是否创建一个MediaRecorder对象来录制接收到的媒体流,# 或者使用一个MediaBlackhole对象来忽略接收到的媒体流。if args.record_to:recorder = MediaRecorder(args.record_to)else:recorder = MediaBlackhole()# 监听数据通道事件。@pc.on("datachannel")def on_datachannel(channel):# 在数据通道上监听消息事件。@channel.on("message")def on_message(message):# 如果接收到的消息是字符串并且以"ping"开头,则回复一个以"pong"开头的消息。if isinstance(message, str) and message.startswith("ping"):channel.send("pong" + message[4:])# 监听连接状态变化事件。@pc.on("connectionstatechange")async def on_connectionstatechange():log_info("Connection state is %s", pc.connectionState)# 记录连接状态。# 如果连接状态为失败,则关闭连接并从集合中移除。if pc.connectionState == "failed":await pc.close()pcs.discard(pc)@pc.on("track")def on_track(track):log_info("Track %s received", track.kind)# 监听轨道事件。# 如果接收到的是音频轨道,则将播放器的音频轨道添加到连接中,并录制接收到的音频轨道。if track.kind == "audio":pc.addTrack(player.audio)recorder.addTrack(track)# 如果接收到的是视频轨道,则创建一个VideoTransformTrack对象来处理视频,并将其添加到连接中。elif track.kind == "video":pc.addTrack(VideoTransformTrack(relay.subscribe(track), transform=params["video_transform"]))# 如果需要录制,则将接收到的视频轨道添加到录制器中。if args.record_to:recorder.addTrack(relay.subscribe(track))# 监听轨道结束事件。@track.on("ended")async def on_ended():log_info("Track %s ended", track.kind)# 当轨道结束时,停止录制。await recorder.stop()# 处理offer和发送answer# handle offer将客户端的offer设置为远程描述。await pc.setRemoteDescription(offer)# 开始录制。await recorder.start()# 创建answer。# send answeranswer = await pc.createAnswer()# 将创建的answer设置为本地描述。await pc.setLocalDescription(answer)# 将本地描述的SDP信息和类型以JSON格式返回给客户端。# 这个函数展示了如何使用aiortc库来处理WebRTC的offer/answer模型,# 包括创建连接、处理媒体流、设置事件监听器以及发送answer。return web.Response(content_type="application/json",text=json.dumps({"sdp": pc.localDescription.sdp, "type": pc.localDescription.type}),)# 这个on_shutdown函数是一个异步函数,它被设计为在Web服务器关闭时执行。
# 它的主要任务是优雅地关闭所有的RTCPeerConnection对象,并清理相关的资源。
# 这个函数接受一个参数app,它代表aiohttp的应用程序实例。这个参数在这个函数中并没有被直接使用,
# 但它是aiohttp应用程序关闭事件的一部分。
async def on_shutdown(app):# close peer connections# 这行代码创建了一个列表coros,其中包含了所有pcs集合中的RTCPeerConnection对象的关闭操作。# pc.close()是一个异步方法,用于关闭一个RTCPeerConnection对象。coros = [pc.close() for pc in pcs]# 这行代码使用asyncio.gather来并发执行所有的关闭操作。asyncio.gather是一个异步函数,# 它接受一个可迭代的异步任务列表,并返回一个代表所有任务完成的异步任务。# 这确保了所有的RTCPeerConnection对象可以同时关闭,而不是一个接一个地关闭,# 从而提高了关闭过程的效率。await asyncio.gather(*coros)# 在所有的RTCPeerConnection对象都被关闭之后,这行代码清空了pcs集合,移除了所有的连接对象引用。# 这是一个清理步骤,确保了在服务器关闭时不会有任何遗留的资源占用。pcs.clear()# 这段代码是Python脚本的入口点,它负责解析命令行参数、设置日志记录、配置SSL上下文、
# 初始化aiohttp应用,并启动Web服务器。
if __name__ == "__main__":# 创建一个ArgumentParser对象,用于解析命令行参数。描述信息说明了这个脚本# 是一个WebRTC的音频/视频/数据通道演示。parser = argparse.ArgumentParser(description="WebRTC audio / video / data-channels demo")# 添加两个命令行参数,分别用于指定SSL证书文件和密钥文件的路径。# 这些参数是可选的,用于配置HTTPS服务。parser.add_argument("--cert-file", help="SSL certificate file (for HTTPS)")parser.add_argument("--key-file", help="SSL key file (for HTTPS)")# 添加两个命令行参数,用于指定HTTP服务器的主机地址和端口号。# 默认值分别是0.0.0.0(所有可用网络接口)和8080。parser.add_argument("--host", default="0.0.0.0", help="Host for HTTP server (default: 0.0.0.0)")parser.add_argument("--port", type=int, default=8080, help="Port for HTTP server (default: 8080)")# 添加一个命令行参数,用于指定将接收到的媒体流录制到文件的路径。parser.add_argument("--record-to", help="Write received media to a file.")# 添加一个命令行参数,用于控制日志记录的详细程度。-v或--verbose可以被指定多次,以增加日志的详细程度。parser.add_argument("--verbose", "-v", action="count")# 解析命令行参数,并将解析结果存储在args对象中。args = parser.parse_args()# 根据args.verbose的值设置日志记录的级别。# 如果args.verbose为真,则设置日志级别为DEBUG,否则为INFO。if args.verbose:logging.basicConfig(level=logging.DEBUG)else:logging.basicConfig(level=logging.INFO)# SSL上下文配置# 如果用户提供了证书文件和密钥文件,则创建一个SSL上下文对象,并加载证书和密钥。# 否则,ssl_context被设置为None,表示不使用SSL。if args.cert_file:ssl_context = ssl.SSLContext()ssl_context.load_cert_chain(args.cert_file, args.key_file)else:ssl_context = None# 初始化aiohttp应用# 创建一个aiohttp应用实例。app = web.Application()# 将on_shutdown函数添加到应用的关闭事件中,以便在应用关闭时执行资源清理。app.on_shutdown.append(on_shutdown)# 为应用添加路由,分别处理根URL的GET请求(返回首页)、/client.js的# GET请求(返回客户端JavaScript代码)和/offer的POST请求(处理WebRTC offer)app.router.add_get("/", index)app.router.add_get("/client.js", javascript)app.router.add_post("/offer", offer)# 启动Web服务器# 启动aiohttp应用,设置访问日志为None(不记录访问日志),主机地址和端口号根据命令行参数设置,# 如果配置了SSL,则使用相应的SSL上下文。web.run_app(app, access_log=None, host=args.host, port=args.port, ssl_context=ssl_context)

1.1.2 web端

1.1.2.1 client.js
// 获取DOM元素
var dataChannelLog = document.getElementById('data-channel'), // 获取数据通道日志元素iceConnectionLog = document.getElementById('ice-connection-state'), // 获取ICE连接状态元素iceGatheringLog = document.getElementById('ice-gathering-state'), // 获取ICE收集状态元素signalingLog = document.getElementById('signaling-state'); // 获取信令状态元素// 对等连接对象
var pc = null; // 初始化对等连接对象为null// 数据通道对象
var dc = null, dcInterval = null; // 初始化数据通道对象和定时器// 创建对等连接
function createPeerConnection() {var config = {sdpSemantics: 'unified-plan' // 设置SDP语义};// 如果选中了使用STUN服务器if (document.getElementById('use-stun').checked) {config.iceServers = [{ urls: ['stun:stun.l.google.com:19302'] }]; // 配置STUN服务器}// 创建新的对等连接实例pc = new RTCPeerConnection(config);// 注册一些监听器以帮助调试pc.addEventListener('icegatheringstatechange', () => { // 当ICE收集状态改变时iceGatheringLog.textContent += ' -> ' + pc.iceGatheringState; // 更新ICE收集状态日志}, false);iceGatheringLog.textContent = pc.iceGatheringState; // 初始化ICE收集状态日志pc.addEventListener('iceconnectionstatechange', () => { // 当ICE连接状态改变时iceConnectionLog.textContent += ' -> ' + pc.iceConnectionState; // 更新ICE连接状态日志}, false);iceConnectionLog.textContent = pc.iceConnectionState; // 初始化ICE连接状态日志pc.addEventListener('signalingstatechange', () => { // 当信令状态改变时signalingLog.textContent += ' -> ' + pc.signalingState; // 更新信令状态日志}, false);signalingLog.textContent = pc.signalingState; // 初始化信令状态日志// 连接音频/视频pc.addEventListener('track', (evt) => { // 当接收到轨道时if (evt.track.kind == 'video') // 如果是视频轨道document.getElementById('video').srcObject = evt.streams[0]; // 设置视频源else // 如果是音频轨道document.getElementById('audio').srcObject = evt.streams[0]; // 设置音频源});return pc; // 返回对等连接实例
}// 枚举输入设备
function enumerateInputDevices() {const populateSelect = (select, devices) => { // 填充选择器的函数let counter = 1;devices.forEach((device) => { // 遍历设备const option = document.createElement('option'); // 创建新的选项option.value = device.deviceId; // 设置选项的值option.text = device.label || ('Device #' + counter); // 设置选项的文本select.appendChild(option); // 将选项添加到选择器counter += 1;});};navigator.mediaDevices.enumerateDevices().then((devices) => { // 枚举设备populateSelect( // 填充音频输入选择器document.getElementById('audio-input'),devices.filter((device) => device.kind == 'audioinput') // 过滤音频输入设备);populateSelect( // 填充视频输入选择器document.getElementById('video-input'),devices.filter((device) => device.kind == 'videoinput') // 过滤视频输入设备);}).catch((e) => { // 如果发生错误alert(e); // 显示错误消息});
}// 协商过程
function negotiate() {return pc.createOffer().then((offer) => { // 创建offer// [add]local offer中不存在candidate信息,也就是创建pc.setLocalDescription(offer)会自动进行candidate收集。// [add]这里异步方法等待candidate收集完毕后在发送offer。console.log('local offer: ', offer);return pc.setLocalDescription(offer); // 设置本地描述}).then(() => {// 等待ICE收集完成return new Promise((resolve) => {if (pc.iceGatheringState === 'complete') {resolve(); // 如果ICE收集已完成,解析Promise} else {function checkState() { // 检查ICE收集状态的函数if (pc.iceGatheringState === 'complete') {pc.removeEventListener('icegatheringstatechange', checkState); // 移除事件监听器resolve(); // 解析Promise}}pc.addEventListener('icegatheringstatechange', checkState); // 添加事件监听器}});}).then(() => {var offer = pc.localDescription; // 获取本地描述// [add]添加offer日志,这里的offer包含candidate信息,而在我的webrtc1v1demo代码中,offer中没有candidate信息。// [add]webrtc1v1demo中candidate信息是offer后进行交换的。console.log('send local offer: ', offer);var codec;codec = document.getElementById('audio-codec').value; // 获取音频编解码器if (codec !== 'default') { // 如果不是默认编解码器offer.sdp = sdpFilterCodec('audio', codec, offer.sdp); // 过滤SDP中的音频编解码器}codec = document.getElementById('video-codec').value; // 获取视频编解码器if (codec !== 'default') { // 如果不是默认编解码器offer.sdp = sdpFilterCodec('video', codec, offer.sdp); // 过滤SDP中的视频编解码器}document.getElementById('offer-sdp').textContent = offer.sdp; // 显示offer的SDPreturn fetch('/offer', { // 发送请求到服务器body: JSON.stringify({sdp: offer.sdp,type: offer.type,video_transform: document.getElementById('video-transform').value}),headers: {'Content-Type': 'application/json'},method: 'POST'});}).then((response) => {return response.json(); // 解析响应为JSON}).then((answer) => {document.getElementById('answer-sdp').textContent = answer.sdp; // 显示answer的SDPreturn pc.setRemoteDescription(answer); // 设置远程描述}).catch((e) => { // 如果发生错误alert(e); // 显示错误消息});
}// 开始过程
function start() {document.getElementById('start').style.display = 'none'; // 隐藏开始按钮pc = createPeerConnection(); // 创建对等连接var time_start = null; // 初始化时间戳const current_stamp = () => { // 获取当前时间戳的函数if (time_start === null) { // 如果还没有开始计时time_start = new Date().getTime(); // 开始计时return 0; // 返回0} else {return new Date().getTime() - time_start; // 返回当前时间戳}};if (document.getElementById('use-datachannel').checked) { // 如果选中了使用数据通道var parameters = JSON.parse(document.getElementById('datachannel-parameters').value); // 获取数据通道参数dc = pc.createDataChannel('chat', parameters); // 创建数据通道dc.addEventListener('close', () => { // 当数据通道关闭时clearInterval(dcInterval); // 清除定时器dataChannelLog.textContent += '- close\n'; // 更新数据通道日志});dc.addEventListener('open', () => { // 当数据通道打开时dataChannelLog.textContent += '- open\n'; // 更新数据通道日志dcInterval = setInterval(() => { // 设置定时器var message = 'ping ' + current_stamp(); // 创建ping消息dataChannelLog.textContent += '> ' + message + '\n'; // 更新数据通道日志dc.send(message); // 发送消息}, 1000); // 每秒发送一次});dc.addEventListener('message', (evt) => { // 当接收到消息时dataChannelLog.textContent += '< ' + evt.data + '\n'; // 更新数据通道日志if (evt.data.substring(0, 4) === 'pong') { // 如果是pong消息var elapsed_ms = current_stamp() - parseInt(evt.data.substring(5), 10); // 计算往返时间dataChannelLog.textContent += ' RTT ' + elapsed_ms + ' ms\n'; // 更新数据通道日志}});}// 构建媒体约束const constraints = {audio: false,video: false};if (document.getElementById('use-audio').checked) { // 如果选中了使用音频const audioConstraints = {};const device = document.getElementById('audio-input').value; // 获取音频输入设备if (device) { // 如果选择了设备audioConstraints.deviceId = { exact: device }; // 设置设备ID}constraints.audio = Object.keys(audioConstraints).length ? audioConstraints : true; // 设置音频约束}if (document.getElementById('use-video').checked) { // 如果选中了使用视频const videoConstraints = {};const device = document.getElementById('video-input').value; // 获取视频输入设备if (device) { // 如果选择了设备videoConstraints.deviceId = { exact: device }; // 设置设备ID}const resolution = document.getElementById('video-resolution').value; // 获取视频分辨率if (resolution) { // 如果设置了分辨率const dimensions = resolution.split('x'); // 分割分辨率videoConstraints.width = parseInt(dimensions[0], 0); // 设置宽度videoConstraints.height = parseInt(dimensions[1], 0); // 设置高度}constraints.video = Object.keys(videoConstraints).length ? videoConstraints : true; // 设置视频约束}// 获取媒体并开始协商if (constraints.audio || constraints.video) { // 如果需要获取媒体if (constraints.video) { // 如果需要视频document.getElementById('media').style.display = 'block'; // 显示媒体元素}navigator.mediaDevices.getUserMedia(constraints).then((stream) => { // 获取媒体stream.getTracks().forEach((track) => { // 遍历轨道pc.addTrack(track, stream); // 添加轨道到对等连接});return negotiate(); // 开始协商}, (err) => { // 如果发生错误alert('Could not acquire media: ' + err); // 显示错误消息});} else { // 如果不需要获取媒体negotiate(); // 开始协商}document.getElementById('stop').style.display = 'inline-block'; // 显示停止按钮
}// 停止过程
function stop() {document.getElementById('stop').style.display = 'none'; // 隐藏停止按钮// 关闭数据通道if (dc) { // 如果存在数据通道dc.close(); // 关闭数据通道}// 关闭传输器if (pc.getTransceivers) { // 如果对等连接支持获取传输器pc.getTransceivers().forEach((transceiver) => { // 遍历传输器if (transceiver.stop) { // 如果传输器可以停止transceiver.stop(); // 停止传输器}});}// 关闭本地音频/视频pc.getSenders().forEach((sender) => { // 遍历发送器sender.track.stop(); // 停止轨道});// 关闭对等连接setTimeout(() => { // 设置延迟pc.close(); // 关闭对等连接}, 500); // 500毫秒后关闭
}// 过滤SDP中的编解码器
function sdpFilterCodec(kind, codec, realSdp) {var allowed = []var rtxRegex = new RegExp('a=fmtp:(\\d+) apt=(\\d+)\r$');var codecRegex = new RegExp('a=rtpmap:([0-9]+) ' + escapeRegExp(codec))var videoRegex = new RegExp('(m=' + kind + ' .*?)( ([0-9]+))*\\s*$')var lines = realSdp.split('\n');var isKind = false;for (var i = 0; i < lines.length; i++) {if (lines[i].startsWith('m=' + kind + ' ')) {isKind = true;} else if (lines[i].startsWith('m=')) {isKind = false;}if (isKind) {var match = lines[i].match(codecRegex);if (match) {allowed.push(parseInt(match[1]));}match = lines[i].match(rtxRegex);if (match && allowed.includes(parseInt(match[2]))) {allowed.push(parseInt(match[1]));}}}var skipRegex = 'a=(fmtp|rtcp-fb|rtpmap):([0-9]+)';var sdp = '';isKind = false;for (var i = 0; i < lines.length; i++) {if (lines[i].startsWith('m=' + kind + ' ')) {isKind = true;} else if (lines[i].startsWith('m=')) {isKind = false;}if (isKind) {var skipMatch = lines[i].match(skipRegex);if (skipMatch && !allowed.includes(parseInt(skipMatch[2]))) {continue;} else if (lines[i].match(videoRegex)) {sdp += lines[i].replace(videoRegex, '$1 ' + allowed.join(' ')) + '\n';} else {sdp += lines[i] + '\n';}} else {sdp += lines[i] + '\n';}}return sdp;
}// 转义正则表达式字符串
function escapeRegExp(string) {return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}enumerateInputDevices(); // 枚举输入设备

1.1.3 解耦

1.1.3.1 设备端部署音频服务
修改说明
  1. 取消Web服务
    • 删除了 indexjavascript 函数。
    • 删除了与Web服务相关的路由设置。
  2. 修改 **offer** 方法
    • offer 方法改为 connect_to_websocket,用于连接到WebSocket服务并接收消息。
  3. 解耦Web服务到WebSocket服务
    • 将Web服务的功能解耦到WebSocket服务中,WebRTC的Web端由WebSocket服务提供(Java实现)。
  4. WebSocket客户端
    • 使用 websockets 库连接到WebSocket服务。
    • 接收WebSocket服务发送的 offer 消息,并处理 offer 消息。
    • 创建 RTCPeerConnection 对象,并设置远程描述。
    • 创建本地描述,并将其发送回WebSocket服务。
1.1.3.2 Web服务增加信令服务(Java实现)
1.1.3.3 client.js修改为ws调用
修改说明
  1. 添加 WebSocket 连接
    • connectToWebSocket() 函数中创建 WebSocket 连接,并处理 onopenonmessageonclose 事件。
  2. 修改 **start()** 函数
    • start() 函数中,通过 WebSocket 连接发送消息,而不是使用 fetch 发送 HTTP 请求。
  3. 处理 WebSocket 消息
    • connectToWebSocket() 函数中,处理从 WebSocket 服务接收到的消息,并调用 handleOffer()handleAnswer() 函数。
  4. 页面加载时连接 WebSocket
    • window.onload 事件中调用 connectToWebSocket() 函数,确保页面加载时自动连接 WebSocket 服务。

2 抓取本地麦克风流

3 音频效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

记录 | WPF基础学习Style局部和全局调用

目录 前言一、Style1.1 例子1.2 为样式起名字1.3 BasedOn 继承上一个样式 二、外部StyleStep1 创建资源字典BaseButtonStyle.xamlStep2 在资源字典中写入StyleStep3 App.xaml中写引用路径【全局】Step4 调用三、代码提供四、x:Key和x:Name区别 更新时间 前言 参考文章&#xff…

吴恩达深度学习——卷积神经网络实例分析

内容来自https://www.bilibili.com/video/BV1FT4y1E74V&#xff0c;仅为本人学习所用。 文章目录 LeNet-5AlexNetVGG-16ResNets残差块 1*1卷积 LeNet-5 输入层&#xff1a;输入为一张尺寸是 32 32 1 32321 32321的图像&#xff0c;其中 32 32 3232 3232是图像的长和宽&…

【Uniapp-Vue3】z-paging插件组件实现触底和下拉加载数据

一、下载z-paing插件 注意下载下载量最多的这个 进入Hbuilder以后点击“确定” 插件的官方文档地址&#xff1a; https://z-paging.zxlee.cn 二、z-paging插件的使用 在文档中向下滑动&#xff0c;会有使用方法。 使用z-paging标签将所有的内容包起来 配置标签中的属性 在s…

【B站保姆级视频教程:Jetson配置YOLOv11环境(七)Ultralytics YOLOv11配置】

Jetson配置YOLOv11环境&#xff08;7&#xff09;Ultralytics YOLOv11环境配置 文章目录 1. 下载YOLOv11 github项目2. 安装ultralytics包3. 验证ultralytics安装3.1 下载yolo11n.pt权重文件3.2 推理 1. 下载YOLOv11 github项目 创建一个目录&#xff0c;用于存放YOLOv11的项目…

第二天:系统从BIOS/UEFI到GRUB/bootloader的启动过程

目录 **一、BIOS/UEFI初始化阶段****二、引导加载程序&#xff08;GRUB&#xff09;的启动过程****1. BIOS模式下的GRUB分阶段加载****2. UEFI模式下的GRUB加载** **三、操作系统内核加载与初始化****四、关键组件与配置文件****五、故障排查与恢复****总结**常见问题如何在UEF…

【容器技术01】使用 busybox 构建 Mini Linux FS

使用 busybox 构建 Mini Linux FS 构建目标 在 Linux 文件系统下构建一个 Mini 的文件系统&#xff0c;构建目标如下&#xff1a; minilinux ├── bin │ ├── ls │ ├── top │ ├── ps │ ├── sh │ └── … ├── dev ├── etc │ ├── g…

【C语言系列】深入理解指针(5)

深入理解指针&#xff08;5&#xff09; 一、sizeof和strlen的对比1.1sizeof1.2strlen1.3sizeof和strlen的对比 二、数组和指针笔试题解析2.1 一维数组2.2 字符数组2.2.1代码1&#xff1a;2.2.2代码2&#xff1a;2.2.3代码3&#xff1a;2.2.4代码4&#xff1a;2.2.5代码5&#…

【蓝桥杯嵌入式】2_LED

1、电路图 74HC573是八位锁存器&#xff0c;当控制端LE脚为高电平时&#xff0c;芯片“导通”&#xff0c;LE为低电平时芯片“截止”即将输出状态“锁存”&#xff0c;led此时不会改变状态&#xff0c;所以可通过led对应的八个引脚的电平来控制led的状态&#xff0c;原理图分析…

Diskgenius系统迁移之后无法使用USB启动

前言 本文用于记录系统迁移中遇到的问题及解决方法&#xff0c;如有不对请指出&#xff0c;谢谢&#xff01; 现象 使用DiskGenius进行系统迁移后&#xff0c;使用USB启动失败&#xff0c;反复在品牌logo和黑屏之间切换&#xff0c;期间还会在左上角显示”reset system“报错…

SQL Server 数据库备份指南

SQL Server备份是数据库维护的日常工作。备份的目的是在发生数据丢失、损坏甚至硬件故障时将数据库和事务日志恢复到最近的时间点。您可以借助专业的SQL Server备份软件,操作起来更方便。前提需要安装SQL Server Management Studio (SSMS)工具。 对于 SQL 数据库备份,有多种…

SpringAI介绍及本地模型使用方法

博客原文地址 前言 Spring在Java语言中一直稳居高位&#xff0c;与AI的洪流碰撞后也产生了一些有趣的”化学反应“&#xff0c;当然你要非要说碰撞属于物理反应也可以&#xff0c; 在经历了一系列复杂的反应方程后&#xff0c;Spring家族的新成员——SpringAI&#xff0c;就…

ip地址是手机号地址还是手机地址

在数字化生活的浪潮中&#xff0c;IP地址、手机号和手机地址这三个概念如影随形&#xff0c;它们各自承载着网络世界的独特功能&#xff0c;却又因名称和功能的相似性而时常被混淆。尤其是“IP地址”这一术语&#xff0c;经常被错误地与手机号地址或手机地址划上等号。本文旨在…

车载以太网__传输层

车载以太网中&#xff0c;传输层和实际用的互联网相差无几。本篇文章对传输层中的IP进行介绍 目录 什么是IP&#xff1f; IP和MAC的关系 IP地址分类 私有IP NAT DHCP 为什么要防火墙穿透&#xff1f; 广播 本地广播 直接广播 本地广播VS直接广播 组播 …

wxWidgets生成HTML文件,带图片转base64数据

编译环境大家可以看我之前的文章,CodeBlocks + msys2 + wx3.2,win10 这里功能就是生成HTML文件,没用HTML库,因为是自己固定的格式,图片是一个vector,可以动态改变数量的。 效果如下: #include <wx/string.h> #include <wx/file.h> #include <wx/ima…

网络原理一>数据链路层协议->以太网协议

目录 以太网协议的结构&#xff1a;类型&#xff1a;ARP请求应答报文&#xff1a;CRC&#xff1a;MTU: 为什么需要mac地址&#xff1a;mac地址和IP地址的区别&#xff1a; 以太网协议的结构&#xff1a; 以太网是数据链路层和物理层的主要协议 源IP&#xff0c;目的IP就不多说…

售后板子HDMI无输出分析

问题&#xff1a; 某产品售后有1例HDMI无输出。 分析&#xff1a; 1、测试HDMI的HPD脚&#xff08;HDMI座子的19pin&#xff09;&#xff0c;测试电压4.5V&#xff0c;属于正常。 2、用万用表直流电压档&#xff0c;测试HDMI的3对数据脚和1对时钟脚&#xff08;板子通过HDM…

【声音转文字CapsWriter】声音随时转化为文字,CapsWriter提高工作效率

文章目录 前言1. 软件与模型下载2. 本地使用测试3. 异地远程使用3.1 内网穿透工具下载安装3.2 配置公网地址3.3 修改config文件3.4 异地远程访问服务端 4. 配置固定公网地址4.1 修改config文件 5. 固定tcp公网地址远程访问服务端 前言 今天我要给大家安利一个神器——CapsWrit…

十二、Docker Compose 部署 SpringCloudAlibaba 微服务

一、部署基础服务 0、项目部署结构 项目目录结构如下: /home/zhzl_hebei/ ├── docker-compose.yml └── geochance-auth/└── Dockerfile└── geochance-auth.jar └── geochance-system/└── Dockerfile└── geochance-system.jar └── geochance-gateway/…

Games104——游戏引擎Gameplay玩法系统:基础AI

这里写目录标题 寻路/导航系统NavigationWalkable AreaWaypoint NetworkGridNavigation Mesh&#xff08;寻路网格&#xff09;Sparse Voxel Octree Path FindingDijkstra Algorithm迪杰斯特拉算法A Star&#xff08;A*算法&#xff09; Path Smoothing Steering系统Crowd Simu…

Win11非虚拟机安装ISE14.7

官网下载6.18GB 的 Full Installer for Windows 7/XP/Server解压后运行安装程序不勾选Enable WebTalk to send software, IP ...安装程序卡死在ISE:Configure WebTalk&#xff0c;此时打开任务管理器&#xff0c;在详情中找到xwebtalk&#xff0c;右键结束任务。安装程序继续进…