首页 > 解决方案 > 如何使用 webrtc 发送视频流

问题描述

我是webrtc的新手,我喜欢制作简单的应用程序,其中客户端使用 webrtc 将视频和音频流发送到服务器,从服务器我将使用视频帧使用 opencv 检测视频中的对象,我已经实现了简单的服务器端代码使用aiortc包的文档,但我被卡住了,因为on_track从未调用过我不知道我的代码有什么问题

客户端代码

   const { RTCPeerConnection, RTCSessionDescription } = window;
socket = io()
const peerConnection = new RTCPeerConnection()
const offerAsync = peerConnection.createOffer();
offerAsync.then(async offer=>{
    await peerConnection.setLocalDescription(new RTCSessionDescription(offer));
    socket.emit("connect_to_server", {
      offer
    });
})

    
socket.on("connect_to_server_response",async function(data){
     navigator.mediaDevices.getUserMedia({
         video:true,
         audio:true
     }).then(async stream=>{
         const video = document.getElementById("video")
         await peerConnection.setRemoteDescription(
             data
          );
         console.log(data) 
         stream.getTracks().forEach(track => {
             console.log("this is track")
            peerConnection.addTrack(track, stream)
         });  
         console.log(video)
         video.srcObject = stream
         video.play()
     }).catch(err=>{
         console.log(err)
         console.log("something went wrong please connect administrator, error code = [100]")
     })
})    

console.log("working");

服务器代码

async def res(data):
    offer = RTCSessionDescription(sdp=data["offer"]["sdp"], type=data["offer"]["type"])
    pc = RTCPeerConnection()
    @pc.on("track")
    def on_track(track):
        print("on Track")
        print(track.kind)     
    await pc.setRemoteDescription(offer)  
    answer = await pc.createAnswer()
    await pc.setLocalDescription(answer)  
    emit("connect_to_server_response", {"sdp": pc.localDescription.sdp, "type": pc.localDescription.type})

@socketio.on("connect_to_server")
def connect_to_server(data):
    asyncio.set_event_loop(asyncio.SelectorEventLoop())
    asyncio.get_event_loop().run_until_complete(res(data))
    print(data)
    print(request.sid)
    print("new user joint")  

标签: pythonopencvflaskwebrtcaiortc

解决方案


看起来您正在以正确的顺序很好地交换 SDP 消息。

您的问题是因为您从不交换 ICE 候选人。为了建立连接,您需要从 js 客户端向 python 客户端以及从 python 客户端向 js 客户端发送 ice 候选消息。

您需要为 RTCPeerConnection.onicecandidate 定义一个事件处理程序(一旦您调用 createOffer,这将开始被触发)并发出您正在接收的这些候选人。然后,您必须在收到候选人后 RTCPeerConnection.addIceCandidate。

一旦你成功地做到了,你应该能够得到 on_track 事件。

查看这些链接以供参考:

什么是 ICE Candidates,peer connection 如何在它们之间进行选择?

RTCIce候选人

简单的 webrtc 工作流示例代码


推荐阅读