WebRTCaddTrack与ontrack实现视频传输

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《WebRTC addTrack与ontrack实现视频通信》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

本文旨在详细阐述WebRTC中视频流的正确传输方法。WebRTC使用专用的RTCPeerConnection.addTrack() API来发送媒体流（如视频和音频），并通过ontrack事件接收，而非DataChannel.send()。DataChannel仅适用于通用数据传输，与媒体流的RTP/RTCP协议机制截然不同。文章将提供清晰的代码示例，指导开发者正确实现WebRTC视频通信。

为什么DataChannel不适用于媒体流传输？

WebRTC提供了两种主要的数据传输通道：DataChannel和媒体流通道。 DataChannel设计用于传输任意的文本或二进制数据，例如聊天消息、文件共享或游戏状态同步。它建立在SCTP协议之上，提供可靠的、有序的或不可靠的、无序的数据传输服务。尝试通过DataChannel.send()方法直接发送一个MediaStream对象或其原始视频帧数据是不可行的，原因如下：

1. 协议不匹配： 媒体流（视频和音频）在WebRTC中是通过实时传输协议（RTP/RTCP）进行传输的。RTP专为实时媒体设计，具有时间戳、序列号等特性，以应对网络抖动、丢包等问题，并支持动态比特率调整。DataChannel基于SCTP，不具备RTP的这些实时媒体优化特性。
2. 数据格式： MediaStream对象是一个高层抽象，代表了一组音视频轨道。直接发送这个对象没有意义，因为它不是一个可序列化的数据包。即使尝试发送原始视频帧数据，也需要复杂的编码、分片、传输和解码逻辑，这超出了DataChannel的设计范畴，且效率远低于内置的RTP实现。
3. 性能： 视频流数据量巨大，实时传输对延迟和带宽有严格要求。WebRTC内置的媒体处理管道（包括编解码、抖动缓冲、拥塞控制等）是高度优化的，而通过DataChannel手动实现这些功能将极其复杂且性能低下。

因此，对于视频和音频流，我们必须使用WebRTC专门为媒体传输设计的API。

正确的媒体流传输方法：addTrack与ontrack

WebRTC通过RTCPeerConnection实例来管理媒体流的发送和接收。核心的API是addTrack()用于发送媒体，以及ontrack事件用于接收媒体。

1. RTCPeerConnection.addTrack(track, ...streams)：

   • 此方法用于将一个MediaStreamTrack（例如，来自摄像头、麦克风或屏幕共享的视频或音频轨道）添加到RTCPeerConnection中。
   • 一旦轨道被添加，RTCPeerConnection就会负责通过RTP协议将其发送给远端对等体。
   • 通常在创建Offer或Answer之前调用此方法，以确保媒体协商（SDP交换）包含有关这些轨道的信息。
   • track参数是一个MediaStreamTrack对象（如videoTrack或audioTrack）。
   • ...streams参数是一个或多个MediaStream对象，表示该轨道所属的流。这对于远端识别和组织接收到的轨道非常重要。

2. RTCPeerConnection.ontrack事件：

   • 当远端对等体通过addTrack()发送了一个或多个媒体轨道时，本地的RTCPeerConnection会触发ontrack事件。
   • event.track是接收到的MediaStreamTrack对象。
   • event.streams是一个数组，包含此轨道所属的MediaStream对象。通常，我们会将event.streams[0]（即接收到的MediaStream）赋值给

实现WebRTC视频流传输的步骤

以下是基于原始问题代码的修正和优化，演示如何正确地设置WebRTC视频流传输。

1. HTML结构

保持原有的HTML结构，包含两个视频元素和控制按钮。

<button id='start'>发起连接</button><br>
<button id='connect'>接受连接</button><br>
<form onsubmit="return false;">
    <input id='iprts' type="text" placeholder="发送文本消息" size="40">
    <input id='enter' type="submit" value="发送">
</form>
<video autoplay id="vid1" width="400" height="300" controls="controls"></video>
<video autoplay id="vid2" width="400" height="300" controls="controls"></video>
<script src="client/socket.js"></script><!-- 假设 socket.io 客户端库 -->

2. JavaScript核心逻辑

我们将重构客户端JavaScript代码，使其更符合WebRTC的最佳实践。这里假设socket.io用于信令（交换SDP和ICE Candidates）。

// 获取DOM元素
const startBtn = document.getElementById('start');
const connectBtn = document.getElementById('connect');
const sendMsgInput = document.getElementById('iprts');
const sendMsgBtn = document.getElementById('enter');
const localVideo = document.getElementById('vid1');
const remoteVideo = document.getElementById('vid2');

let localStream; // 用于存储本地媒体流
let peerConnection; // RTCPeerConnection实例
let dataChannel; // DataChannel实例
let isInitiator = false; // 标记当前客户端是否为连接发起方

// 假设的信令服务器通信
const socket = io(); // 初始化socket.io

// 辅助函数：处理ICE Candidate
function handleIceCandidate(event) {
    if (event.candidate) {
        // 将ICE Candidate发送给远端对等体
        console.log('发送ICE Candidate:', event.candidate);
        socket.emit('candidate', event.candidate);
    }
}

// 辅助函数：处理接收到的媒体流
function handleTrack(event) {
    console.log('收到远程媒体流:', event.streams[0]);
    // 将接收到的流设置到远程视频元素
    remoteVideo.srcObject = event.streams[0];
    remoteVideo.addEventListener('loadedmetadata', () => {
        remoteVideo.play().catch(e => console.error('播放远程视频失败:', e));
    });
}

// 辅助函数：创建并配置RTCPeerConnection
async function createPeerConnection() {
    peerConnection = new RTCPeerConnection({
        iceServers: [
            { urls: 'stun:stun.l.google.com:19302' } // STUN服务器用于NAT穿越
        ]
    });

    peerConnection.onicecandidate = handleIceCandidate;
    peerConnection.ontrack = handleTrack; // 监听远端媒体流的到来

    // 设置DataChannel
    if (isInitiator) {
        dataChannel = peerConnection.createDataChannel('chat');
        dataChannel.onopen = () => console.log('DataChannel已打开!');
        dataChannel.onmessage = (event) => console.log('收到DataChannel消息:', event.data);
        dataChannel.onclose = () => console.log('DataChannel已关闭!');
        dataChannel.onerror = (error) => console.error('DataChannel错误:', error);
    } else {
        peerConnection.ondatachannel = (event) => {
            dataChannel = event.channel;
            dataChannel.onopen = () => console.log('DataChannel已打开!');
            dataChannel.onmessage = (event) => console.log('收到DataChannel消息:', event.data);
            dataChannel.onclose = () => console.log('DataChannel已关闭!');
            dataChannel.onerror = (error) => console.error('DataChannel错误:', error);
        };
    }

    // 将本地媒体流的轨道添加到PeerConnection
    if (localStream) {
        localStream.getTracks().forEach(track => {
            peerConnection.addTrack(track, localStream);
            console.log('添加本地媒体轨道:', track.kind);
        });
    }
}

// 获取本地屏幕共享流
async function getLocalMediaStream() {
    try {
        localStream = await navigator.mediaDevices.getDisplayMedia({
            video: true,
            audio: true // 屏幕共享通常也包含系统音频
        });
        localVideo.srcObject = localStream;
        localVideo.addEventListener('loadedmetadata', () => {
            localVideo.play().catch(e => console.error('播放本地视频失败:', e));
        });
        console.log('成功获取本地媒体流');
    } catch (e) {
        console.error('获取本地媒体流失败:', e);
    }
}

// 启动按钮点击事件：发起方
startBtn.onclick = async () => {
    isInitiator = true;
    await getLocalMediaStream(); // 首先获取本地媒体流
    await createPeerConnection(); // 创建PeerConnection并添加轨道

    try {
        const offer = await peerConnection.createOffer();
        await peerConnection.setLocalDescription(offer);
        console.log('发送Offer:', peerConnection.localDescription);
        socket.emit('offer', peerConnection.localDescription); // 将Offer发送给信令服务器
    } catch (e) {
        console.error('创建Offer失败:', e);
    }
};

// 连接按钮点击事件：接收方
connectBtn.onclick = async () => {
    isInitiator = false;
    await getLocalMediaStream(); // 获取本地媒体流
    await createPeerConnection(); // 创建PeerConnection并添加轨道
    // 等待接收Offer
};

// 监听信令服务器消息
socket.on('offer', async (offer) => {
    if (!isInitiator) { // 只有接收方处理Offer
        console.log('收到Offer:', offer);
        if (!peerConnection) {
             // 确保peerConnection已创建，如果connectBtn没有点击，这里需要手动创建
             // 或者在connectBtn点击后才监听offer
             await getLocalMediaStream();
             await createPeerConnection();
        }
        await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
        try {
            const answer = await peerConnection.createAnswer();
            await peerConnection.setLocalDescription(answer);
            console.log('发送Answer:', peerConnection.localDescription);
            socket.emit('answer', peerConnection.localDescription); // 将Answer发送给信令服务器
        } catch (e) {
            console.error('创建Answer失败:', e);
        }
    }
});

socket.on('answer', async (answer) => {
    if (isInitiator) { // 只有发起方处理Answer
        console.log('收到Answer:', answer);
        await peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
        console.log('远程描述设置成功，连接建立中...');
    }
});

socket.on('candidate', async (candidate) => {
    if (peerConnection && candidate) {
        try {
            await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
            console.log('添加ICE Candidate成功:', candidate);
        } catch (e) {
            console.error('添加ICE Candidate失败:', e);
        }
    }
});

// DataChannel文本消息发送
sendMsgBtn.onclick = () => {
    if (dataChannel && dataChannel.readyState === 'open') {
        dataChannel.send(sendMsgInput.value);
        console.log('发送DataChannel消息:', sendMsgInput.value);
        sendMsgInput.value = ''; // 清空输入框
    } else {
        console.warn('DataChannel未打开或未初始化，无法发送消息。');
    }
};

代码解释与注意事项：

• getLocalMediaStream()： 负责获取本地的媒体流（这里使用getDisplayMedia进行屏幕共享）。获取到流后，将其赋值给本地视频元素的srcObject进行预览。
• createPeerConnection()： 封装了RTCPeerConnection的创建和基本配置。
  • iceServers：配置STUN/TURN服务器，用于NAT穿越和建立连接。
  • peerConnection.onicecandidate：当ICE候选者可用时触发，需要通过信令服务器发送给远端。
  • peerConnection.ontrack： 这是接收远程媒体流的关键！ 当远端发送媒体流时，此事件会被触发，event.streams[0]就是接收到的MediaStream，将其赋给远程视频元素的srcObject即可播放。
  • peerConnection.addTrack(track, localStream)： 在createPeerConnection中，我们遍历localStream中的所有track（视频和音频），并使用addTrack将它们添加到peerConnection中。这一步必须在创建Offer/Answer之前完成，以便SDP中包含这些媒体信息。
• 信令机制： 示例中假设socket.io用于交换SDP（Offer/Answer）和ICE Candidates。这是WebRTC连接建立的必要步骤，它负责在两个对等体之间传递会话描述和网络地址信息。
  • 发起方创建Offer并发送。
  • 接收方收到Offer后创建Answer并发送。
  • 双方交换ICE Candidate。
• DataChannel的独立性： DataChannel的设置和使用与媒体流的传输是独立的。它通过peerConnection.createDataChannel()（发起方）或peerConnection.ondatachannel（接收方）来管理。

关键概念回顾

• RTCPeerConnection： WebRTC的核心接口，用于管理点对点连接、媒体流和数据通道。
• MediaStream： 表示音视频流的集合，可以包含一个或多个MediaStreamTrack。
• MediaStreamTrack： 表示一个独立的媒体轨道，如视频轨道或音频轨道。
• SDP (Session Description Protocol)： 会话描述协议，用于描述媒体会话的参数，如编解码器、IP地址、端口等。WebRTC使用Offer/Answer模型进行SDP交换。
• ICE (Interactive Connectivity Establishment)： 交互式连接建立，用于发现和建立对等体之间的最佳网络路径（包括直接连接、STUN或TURN中继）。
• RTP/RTCP (Real-time Transport Protocol / RTP Control Protocol)： 实时传输协议及其控制协议，WebRTC内部用于传输实时音视频数据。

总结与最佳实践

• 区分DataChannel与媒体API： 牢记DataChannel用于通用数据，addTrack/ontrack用于媒体流。它们是WebRTC中完全不同的两个传输机制。
• 先添加轨道，后创建Offer/Answer： 确保在调用createOffer()或createAnswer()之前，所有需要发送的媒体轨道都已通过addTrack()添加到RTCPeerConnection中。这样，SDP中才能包含正确的媒体信息。
• 异步操作： WebRTC API大量使用Promise，务必使用async/await或.then()来处理异步操作，避免使用setTimeout等不确定的延时。
• 错误处理： 在实际应用中，对所有可能失败的Promise操作（如getUserMedia、createOffer、setLocalDescription等）添加catch块进行错误处理。
• 信令服务器： 信令是WebRTC连接建立的必要环节，负责SDP和ICE Candidate的交换。选择合适的信令机制（WebSocket、Socket.io等）并正确实现其逻辑至关重要。
• STUN/TURN服务器： 为了在不同网络环境下（特别是NAT后面）建立连接，通常需要配置STUN服务器（用于发现公共IP和端口）和TURN服务器（用于数据中继，当STUN无法建立直接连接时）。

通过遵循上述指导和代码示例，开发者可以有效地在WebRTC应用中实现可靠和高效的视频流传输。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。