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服务：
    • 删除了 index 和 javascript 函数。
    • 删除了与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 连接，并处理 onopen、onmessage 和 onclose 事件。
  2. 修改 **start()** 函数：
    • 在 start() 函数中，通过 WebSocket 连接发送消息，而不是使用 fetch 发送 HTTP 请求。
  3. 处理 WebSocket 消息：
    • 在 connectToWebSocket() 函数中，处理从 WebSocket 服务接收到的消息，并调用 handleOffer() 和 handleAnswer() 函数。
  4. 页面加载时连接 WebSocket：
    • 在 window.onload 事件中调用 connectToWebSocket() 函数，确保页面加载时自动连接 WebSocket 服务。

2 抓取本地麦克风流

3 音频效果

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

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

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

相关文章

【玩转全栈】--创建一个自己的vue项目

【玩转全栈】--创建一个自己的vue项目

目录 vue介绍 创建vue项目 vue页面介绍 element-plus组件库 启动项目 vue介绍 Vue.js 是一款轻量级、易于上手的前端 JavaScript 框架&#xff0c;旨在简化用户界面的开发。它采用了响应式数据绑定和组件化的设计理念&#xff0c;使得开发者可以通过声明式的方式轻松管理数据和…
阅读更多...
基于Hexo实现一个静态的博客网站

基于Hexo实现一个静态的博客网站

原文首发&#xff1a;https://blog.liuzijian.com/post/8iu7g5e3r6y.html 目录 引言1.初始化Hexo2.整合主题Fluid3.部署评论系统Waline4.采用Nginx部署 引言 Hexo是中国台湾开发者Charlie在2012年创建的一个开源项目&#xff0c;旨在提供一个简单、快速且易于扩展的静态博客生…
阅读更多...
足球俱乐部管理系统的设计与实现

足球俱乐部管理系统的设计与实现

&#x1f345;点赞收藏关注 → 添加文档最下方联系方式咨询本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345; 项目视频 足…
阅读更多...
tolua[一]框架搭建，运行example

tolua[一]框架搭建，运行example

一.安装tolua https://github.com/topameng/tolua 下载LuaFramework_UGUI的zip 将Assets目录拷贝到项目根目录下 提示确认注册&#xff0c;遇到这个对话框点确定即可 生成如下目录 二.LuaFramework->Build Windows Resource 接下来的目标是将这个main场景跑起来 需要先执行…
阅读更多...
JVM图文入门

JVM图文入门

往期推荐 【已解决】redisCache注解失效&#xff0c;没写cacheConfig_com.howbuy.cachemanagement.client.redisclient#incr-CSDN博客 【已解决】OSS配置问题_keyuewenhua.oss-cn-beijing.aliyuncs-CSDN博客 【排坑】云服务器docker部署前后端分离项目域名解析OSS-CSDN博客 微服…
阅读更多...
Day37-【13003】短文，串的基本概念，匹配算法，算法时间复杂度，真题训练

Day37-【13003】短文，串的基本概念，匹配算法，算法时间复杂度，真题训练

文章目录 第二节 串串的基本概念串的模式匹配朴素的模式匹配算法(BF算法)算法最坏时间复杂度O(n x m) 改进的模式匹配算法(KMP算法)特征向量next&#xff0c;来确定k值特征向量next的算法实现 算法最坏时间复杂度O(n)进一步改进next值的计算&#xff0c;简化步骤 第四章真题真题…
阅读更多...
GPU-Z重磅更新，Blackwell架构全面支持

GPU-Z重磅更新，Blackwell架构全面支持

由TechPowerUp倾力打造的GPU-Z&#xff0c;是一款集显卡信息查看、实时监控与深度诊断于一体的强大工具。它以其轻巧灵便的体积、完全免费的使用模式以及极其友好的操作界面&#xff0c;赢得了全球无数用户的青睐与信任&#xff0c;成为PC硬件领域中不可或缺的软件。 GPU-Z不仅…
阅读更多...
leetCode刷题-图、回溯相关

leetCode刷题-图、回溯相关

岛屿数量 class Solution { private:int mi;int mj; public:int numIslands(vector<vector<char>>& grid) {mi grid.size() - 1; // i的范围 0~mimj grid[0].size() - 1; // j的范围 0~mjint landnum 0;bool sea false;do {pair<int, int> res …
阅读更多...
VMware Win10下载安装教程（超详细）

VMware Win10下载安装教程（超详细）

《网络安全自学教程》 从MSDN下载系统镜像&#xff0c;使用 VMware Workstation 17 Pro 安装 Windows 10 consumer家庭版 和 VMware Tools。 Win10下载安装 1、下载镜像2、创建虚拟机3、安装操作系统4、配置系统5、安装VMware Tools 1、下载镜像 到MSDN https://msdn.itellyou…
阅读更多...
基础篇05-直方图操作

基础篇05-直方图操作

本节将简要介绍Halcon中有关图像直方图操作的算子&#xff0c;重点介绍直方图获取和显示两类算子&#xff0c;以及直方图均衡化处理算子。 目录 1. 引言 2. 获取并显示直方图 2.1 获取&#xff08;灰度&#xff09;直方图 (1) gray_histogram (2) gray_histo_abs (3) gr…
阅读更多...
Oracle(windows安装遇到的ORA-12545、ORA-12154、ORA-12541、ORA-12514等问题)

Oracle(windows安装遇到的ORA-12545、ORA-12154、ORA-12541、ORA-12514等问题)

其实出现该问题就是监听或者服务没有配好。 G:\xiaowangzhenshuai\software\Oracle\product\11.2.0\dbhome_1\NETWORK\ADMINlistener.ora SID_LIST_LISTENER (SID_LIST (SID_DESC (SID_NAME CLRExtProc)(ORACLE_HOME G:\xiaowangzhenshuai\software\Oracle\product\11.2.0\d…
阅读更多...
LabVIEW2025中文版软件安装包、工具包、安装教程下载

LabVIEW2025中文版软件安装包、工具包、安装教程下载

下载链接&#xff1a;LabVIEW及工具包大全-三易电子工作室http://blog.eeecontrol.com/labview6666 《LabVIEW2025安装图文教程》 1、解压后&#xff0c;双击install.exe安装 2、选中“我接受上述2条许可协议”&#xff0c;点击下一步 3、点击下一步&#xff0c;安装NI Packa…
阅读更多...
在本地顺利的部署一个al模型从零开始 windows

在本地顺利的部署一个al模型从零开始 windows

引言 &#xff08;踩的坑&#xff0c;省流引言的内容没有有使模型跑起来&#xff09; 最近想在本地部署一个deepseek模型&#xff0c;就在网上搞了3 4天终于是能够部署下来了&#xff0c;在部署的时候也是成功的踩了无数的坑&#xff0c;比如我先问al如何在本地部署一个语言模…
阅读更多...
基于ansible部署elk集群

基于ansible部署elk集群

ansible部署 ELK部署 ELK常见架构 &#xff08;1&#xff09;ElasticsearchLogstashKibana&#xff1a;这种架构是最常见的一种&#xff0c;也是最简单的一种架构&#xff0c;这种架构通过Logstash收集日志&#xff0c;运用Elasticsearch分析日志&#xff0c;最后通过Kibana中…
阅读更多...
Linux学习笔记16---高精度延时实验

Linux学习笔记16---高精度延时实验

延时函数是很常用的 API 函数&#xff0c;在前面的实验中我们使用循环来实现延时函数&#xff0c;但是使用循环来实现的延时函数不准确&#xff0c;误差会很大。虽然使用到延时函数的地方精度要求都不会很严格( 要求严格的话就使用硬件定时器了 ) &#xff0c;但是延时函数肯定…
阅读更多...
Linux系统 环境变量

Linux系统 环境变量

环境变量 写在前面概念查看环境变量main函数的参数argc & argvenv bash环境变量 写在前面 对于环境变量&#xff0c;本篇主要介绍基本概念及三四个环境变量 —— PATH、HOME、PWD。其中 PATH 作为 “ 敲门砖 ”&#xff0c;我们会更详细讲解&#xff1b;理解环境变量的全局…
阅读更多...
旋转变压器工作及解调原理

旋转变压器工作及解调原理

旋转变压器 旋转变压器是一种精密的位置、速度检测装置&#xff0c;广泛应用在伺服控制、机器人、机械工具、汽车、电力等领域。但是&#xff0c;旋转变压器在使用时并不能直接提供角度或位置信息&#xff0c;需要特殊的激励信号和解调、计算措施&#xff0c;才能将旋转变压器…
阅读更多...
【漫话机器学习系列】076.合页损失函数（Hinge Loss）

【漫话机器学习系列】076.合页损失函数（Hinge Loss）

Hinge Loss损失函数 Hinge Loss&#xff08;合页损失&#xff09;&#xff0c;也叫做合页损失函数&#xff0c;广泛用于支持向量机&#xff08;SVM&#xff09;等分类模型的训练过程中。它主要用于二分类问题&#xff0c;尤其是支持向量机中的优化目标函数。 定义与公式 对于…
阅读更多...
基于docker搭建Kafka集群，使用KRaft方式搭建，摒弃Zookeeper

基于docker搭建Kafka集群，使用KRaft方式搭建，摒弃Zookeeper

KAFKA基于docker使用KRaft进行集群搭建 环境&#xff1a;已成功搭建kafka服务 可点击链接跳转至安装kafka-3.8.0版本 并启用SASL认证 教程 使用基于Zookeeper方式搭建集群教程 kafka-3.8.0版本 并启用SASL认证 教程 搭建kafka-ui可视化工具 192.168.2.91 192.168.2.92 192…
阅读更多...
Go 语言 | 入门 | 快速入门

Go 语言 | 入门 | 快速入门

快速入门 1.第一份代码 先检查自己是否有正确下载 Go&#xff0c;如果没有直接去 Go 安装 进行安装。 # 检查是否有 Go $ go version go version go1.23.4 linux/amd64然后根据 Go 的入门教程 开始进行学习。 # 初始化 Go 项目 $ mkdir example && cd example # Go…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023