如何用WHIP协议WebRTC推流到NodeMediaServer

NMS v3.21 WHIP协议WebRTC推流指南

一、协议实现

NMS v3.21基于WHIP协议（WebRTC-HTTP Ingestion Protocol）重新实现WebRTC推流功能。

二、功能特性

• 客户端开放：支持自定义实现
• 流采集能力：
  • 摄像头/麦克风捕获
  • 桌面/应用窗口采集
  • Canvas/Video元素捕获
  • 支持视频滤镜、AI特效等
  • 完整WebRTC功能支持（参考WebRTC Samples）

    三、配置说明

    [webrtc]
    # 使用whip和whep标准协议实现webrtc直接推流和播放
    # ip 服务部署在公网,设置公网IP地址,内网就填内网ip,使用此IP地址直接进行通讯, 如不设置使用stun识别
    ip = 
    # port 监听端口, 设置后开启服务
    port = 10000
    # ice_tcp ice是否通过tcp传输, Chrome支持\OBS不支持
    ice_tcp = 0
    # stun 服务器地址, 多个服务器地址用 | 分割
    stun = stun:stun.l.google.com:19302
    

    关键参数说明：

    • ip：当明确设置固定公网ip地址时，WebRTC使用1:1 的NAT通讯，像RTMP等协议一样进行快速直连。
    • port：WebRTC的通讯端口，目前直接使用TCP传输，在公网通讯中，不掉包、不乱序、不花屏、不卡顿。
    • stun：stun服务器，如果不配置固定公网ip，则通过stun识别公网地址。
    • 注意：WHIP是以HTTP POST形式进行SDP信令交换，因此HTTP或HTTPS端口必须打开。流地址使用HTTP、HTTPS的端口，WebRTC作为内部通讯端口并不在流地址中表现。

      四、流地址格式

      HTTPS场景（需有效证书）

      https://server_name:8443/live/stream.whip
      

      • 大多数web应用采用域名访问网站时，打开摄像头和麦克风需要网站以https访问，证书需要机构颁发，否则需要预先同意使用自签名证书。当web以https访问是，推流地址也必须是https地址，采用域名访问，NMS需要正确配置证书。

        HTTP场景（本地测试）

        http://server_ip:8000/live/stream.whip
        

        • 还有一种情况，当web以127.0.0.1或localhost访问时，不需要https就可以采集摄像头，因此推流地址可以是http协议的ip地址。

          五、推流控制

          • 结束推流：按照协议定义，当post 本机 SDP信息后，服务器会在body里响应服务端SDP，在header中会返回一个location字段，值为资源id，以HTTP DELETE请求该地址时，就可以立即结束推流。
          • 超时机制：如果不进行该操作，服务端也会根据ICE状态判断流断开超时，不是及时的，一般为10秒左右。

            六、集成示例

            1. 定义video标签预览摄像头

            
              Start
              Call
              Hang Up
            
            

            2. 创建媒体流

            const startButton = document.getElementById('startButton');
            const callButton = document.getElementById('callButton');
            const hangupButton = document.getElementById('hangupButton');
            callButton.disabled = true;
            hangupButton.disabled = true;
            startButton.addEventListener('click', start);
            callButton.addEventListener('click', call);
            hangupButton.addEventListener('click', hangup);
            const localVideo = document.getElementById('localVideo');
            localVideo.addEventListener('loadedmetadata', function () {
                console.log(`Local video videoWidth: ${this.videoWidth}px,  videoHeight: ${this.videoHeight}px`);
            });
            let localStream;
            let pc1;
            let whipLocation;
            const offerOptions = {
                offerToReceiveAudio: 1,
                offerToReceiveVideo: 1
            };
            const configuration = {
                iceServers: [
                    {
                        urls: "stun:stun.l.google.com:19302"
                    }
                ]
            };
            async function start() {
                console.log('Requesting local stream');
                startButton.disabled = true;
                try {
                    const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: { width: 1280, height: 720, frameRate: 30 } });
                    console.log('Received local stream');
                    localVideo.srcObject = stream;
                    localStream = stream;
                    callButton.disabled = false;
                } catch (e) {
                    alert(`getUserMedia() error: ${e.name}`);
                }
            }
            

            3. 发起推流

            async function call() {
                callButton.disabled = true;
                hangupButton.disabled = false;
                console.log('Starting call');
                const videoTracks = localStream.getVideoTracks();
                const audioTracks = localStream.getAudioTracks();
                if (videoTracks.length > 0) {
                    console.log(`Using video device: ${videoTracks[0].label}`);
                }
                if (audioTracks.length > 0) {
                    console.log(`Using audio device: ${audioTracks[0].label}`);
                }
                console.log('RTCPeerConnection configuration:', configuration);
                pc1 = new RTCPeerConnection(configuration);
                console.log('Created local peer connection object pc1');
                // pc1.addEventListener('icecandidate', e => onIceCandidate(pc1, e));
                pc1.onicegatheringstatechange = gatheringStateChange;
                pc1.addEventListener('iceconnectionstatechange', e => onIceStateChange(pc1, e));
                localStream.getTracks().forEach(track => pc1.addTrack(track, localStream));
                console.log('Added local stream to pc1');
                try {
                    console.log('pc1 createOffer start');
                    const offer = await pc1.createOffer(offerOptions);
                    await pc1.setLocalDescription(offer);
                    const answer = await postSDPOffer("https://192.168.0.2:8443/live/demo.whip", pc1.localDescription.sdp);
                    await pc1.setRemoteDescription(answer);
                    whipLocation = answer.location;
                    // await onCreateOfferSuccess(offer);
                } catch (e) {
                    onCreateSessionDescriptionError(e);
                }
            }
            async function postSDPOffer(url, sdp) {
                let result = {
                    status: 0,
                    type: 'answer',
                };
                try {
                    const response = await fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/sdp',
                            "video-bitrate": 2_000_000,
                            "video-keyint": 3,
                            "audio-bitrate": 64_000
                        },
                        body: sdp
                    });
                    result.status = response.status;
                    result.sdp = await response.text();
                    result.location = response.headers.get("Location");
                } catch (error) {
                    result.error = error;
                }
                return result;
            }
            

            4. 结束推流

            function hangup() {
                console.log('Ending call');
                pc1.close();
                pc1 = null;
                hangupButton.disabled = true;
                callButton.disabled = false;
                fetch(whipLocation, { method: "DELETE" });
            }
            

            七、OBS推流配置

            

            注意：

            • 注意，此处端口仍然是http端口，而非配置中的webrtc端口。8000端口负责交换信令（显式），10000端口用于媒体传输（隐式）。

              八、在线演示推流DEMO

              NodeMedia Webrtc WHIP 推流 Demo（右键可查看完整源码）