WebGL实时视频(5) awrtc.js理解并修改

最新推荐文章于 2022-05-25 17:27:32 发布

llhswwha

最新推荐文章于 2022-05-25 17:27:32 发布

阅读量693

点赞数

分类专栏： WebRTC

本文链接：https://blog.csdn.net/llhswwha/article/details/102688051

版权

WebRTC 专栏收录该内容

14 篇文章 10 订阅

订阅专栏

继续上一篇的

在理解了WebRTC Video Chat的本质是js后，就是理解并修改成我需要的功能了。

一开始是修改后，用unity打包，进行测试。效率很低，一周也没进展多少。后来想到，能不能直接在网页里面调用awrtc.js呢。确实可以，修改的效率高了很多。

修改的过程就是添加打印语句，重命名简单变量，理解原来的代码过程，并考虑如何获取webrtc的视频。

一、提高可读性。

1.修改类名

n.d(t, "BrowserMediaStream",
        function() {
            return ce
        }),

将里面的ce重命名为BrowserMediaStream，

                n.d(t, "BrowserMediaStream",
                    function() {
                        return BrowserMediaStream
                    }),

2.修改构造函数名

改为

3.修改参数名、变量名

将t,n,e等改成有意义的名称，便与理解，区分不同作用域的变量。

改成

总之就是将AAA.min.js还原会AAA.js的过程，手动的。要用IDEA的重命名功能，手动替换是无法完成的。

不然，一堆的e,t,n。根本无法阅读。

二、连接H5Stream，获取RTC视频。

最开始是从new WebSocket()入手，在InnerWebsocketNetwork里面修改的，在onopen里面发送{type:"open"}，在onmessage里面处理offer,remoteice。

                    InnerWebsocketNetwork.prototype.WebsocketConnect = function() {
                        /*
                        WebsocketNetwork.WebsocketConnect	@	awrtc.js:4001
                        WebsocketNetwork.EnsureServerConnection	@	awrtc.js:4032
                        WebsocketNetwork.Connect	@	awrtc.js:4310
                        InnerWebRtcNetwork.AddOutgoingConnection	@	awrtc.js:3911
                        InnerWebRtcNetwork.Connect	@	awrtc.js:3801
                        InnerAWebRtcCall.ProcessCall	@	awrtc.js:5206
                        InnerAWebRtcCall.Call
                        */
                        console.log(">>>>>>> WebsocketNetwork.prototype.WebsocketConnect",this.mUrl);
                        var e = this;
                        this.mStatus = WebsocketConnectionStatus.Connecting,
                            this.mSocket = new WebSocket(this.mUrl),
                            this.mSocket.binaryType = "arraybuffer",
                            this.mSocket.onopen = function() {
                                console.log(">>>>>>> this.mSocket.onopen")
                                e.OnWebsocketOnOpen()
                            },
                            this.mSocket.onerror = function(t) {
                                e.OnWebsocketOnError(t)
                            },
                            this.mSocket.onmessage = function(t) {
                                //console.log(">>>>>>> this.mSocket.onmessage",t)
                                e.OnWebsocketOnMessage(t)
                            },
                            this.mSocket.onclose = function(t) {
                                e.OnWebsocketOnClose(t)
                            }
                    },

processRTCOffer和processRemoteIce是前面学习h5splayer.js时用到的建立rtc连接的代码。

BrowserMediaStream内部其实也就是创建video，并设置src的，

但是这样做怎么都无法和Unity里面关联起来，获取可以，改动会比较大。

这个插件本身有两个例子ChatApp和CallApp，ChatApp是文字聊天，CallApp是视频聊天。

前面相当于在ChatApp基础上获取视频，但是没有地方和Unity关联。

然后考虑给予ChatApp，也就是awrtc.js里面的BrowserWebRtcCall，来获取视频。

1.发送open指令

发现原来的CallApp里面的聊天室名称其实就是第一个发送给ws服务器的信息，将这里改成h5stream的open指令信息。

注意，所有的发送和接收的数据的处理都是先在一次Update时放到队列中，然后再在下次Update时从队列中取出进行处理的。

2.处理onmessage里的offer和remoteice信息

从最开始的将offer信息作为ReliableMessageReceived放入队列，到最后把answer用json发送给ws服务器，建立了rtc通道。

到这里，就可以获取视频了。

3.触发CallEvent，获取一帧的图片。

这里碰到一个问题，this.mConnectionInfo里面没有东西，this.mIdToConnection，里面也没有东西。

而这个的添加就在上面一点的地方

这个好像方便一点，忘记在哪加上去的了。....

this.mIdToConnection就比较麻烦了。

中间研究的过程来看，就是有一些state，必须是connected状态，才能加到mIdToConnection里面

必须this.mRtcInternalState为WebRtcInternalState.Connected才行。

而this.mRtcInternalState的设置往上，就到了StartSignaling

StartSignaling往上的话，有两个地方：

但这里有个问题，this.mPeer.createDataChannel()是创建一个数据通道，需要通道打开后才能进入RtcSetConnected。而H5Stream不知道支不支持数据通道。原本这个插件是用于视频聊天等，应该是用数据通道来传递消息的。

先不管这个。

后续的目的都是为了这里的peer.GetState()变成WebRtcPeerState.Connected。

当然，不能随便设置成WebRtcPeerState.Connected。

最后在InnerAWebRtcPeer.prototype.OnIceConnectionChange里面设置state。

这样子设置后，前面的

就能进入FrameToCallEvent了，进而就能进入原来的视频聊天显示视频的过程。

4.html测试

<html>
    <head>
        <title>UnityWebGl</title>
        <script src="js/jquery-3.1.1.js"></script>
        <script src="awrtc.js"></script>
    </head>
    <body>
        <input id='inputUrl' value='wss://localhost:8443/api/v1/h5srtcapi?token=token1&profile=main&session=null' style='width:100%;'/>
        <button id='btnPlay'>play</button>
        <button id='btnStop'>Stop</button>
        <button id='btnPause'>Pause</button>
        <button id='btnContinue'>Continue</button>
        <button id='btnUpdate'>Update</button>
        <button id='btnGetFrame'>GetFrame</button>
        <button id='btnTriggerEvent'>TriggerEvent</button>
        <video class="h5video1" id="video1" autoplay webkit-playsinline playsinline></video>
    </body>
    <script>
     window.onload = function(){
         console.log('onload');
        var call=null;
         var url=$('#inputUrl').val();
         //    ws://localhost:8085/api/v1/h5srtcapi?token=token1&profile=main&session=null
         //    ws://localhost:8443/api/v1/h5srtcapi?token=token1&profile=main&session=null
         //    wss://localhost:8443/api/v1/h5swsapi?token=token1&profile=main&session=null
         $('#btnPlay').click(function(){
             console.log('play',url);
             var config={};
             var url="wss://localhost:8443/api/v1/h5srtcapi?token=token1&profile=main&session=null";
             call=awrtc.CAPI_H5Stream_GetVideo(url);
             console.log('call',call);
         });
         $('#btnUpdate').click(function(){
             console.log('Update',call);
             call.Update();
         });
         $('#btnGetFrame').click(function(){
             console.log('GetFrame call',call);
             console.log('GetFrame media network',call.mNetwork);//BrowserMediaNetwork
             console.log('GetFrame ws network',call.mNetwork.mSignalingNetwork);//WebSocketNetwork
             console.log('GetFrame remoteStream',call.mNetwork.mSignalingNetwork.mRemoteStream)//BrowserMediaStream
             var f1=call.mNetwork.TryGetFrame();//BrowserMediaNetwork.TryGetFrame
             console.log('GetFrame f1',f1);
             var f2=call.mNetwork.mSignalingNetwork.mRemoteStream.TryGetFrame();//BrowserMediaStream.TryGetFrame
             console.log('GetFrame f2',f2);
         });
         $('#btnTriggerEvent').click(function(){
             console.log('TriggerEvent',call);
             call.Update();
         });

        }
    </script>
</html>

awrtc.js里面的对应测试接口

               function func_CAPI_H5Stream_GetVideo(url){//[NEW]
                    console.log("func_H5Stream_GetVideo");
                    BrowserMediaStream.DEBUG_SHOW_ELEMENTS=true;//在网页中显示视频
                    var netConf=new NetworkConfig();
                    // netConf.SignalingUrl="wss://signaling.because-why-not.com/callapp";
                    // var address="NewAddress";
                    netConf.SignalingUrl=url;
                    //AWebRtcPeer.SourceType="H5Stream";//原本用这个区分代码的
                    var browserCall=new BrowserWebRtcCall(netConf);
                    console.log("browserCall",browserCall);
                    var mediaConf=new MediaConfig();
                    console.log("mediaConf",mediaConf);
                    mediaConf.mVideo=false;
                    mediaConf.mAudio=false;
                    mediaConf.FrameUpdates=true;
                    browserCall.Configure(mediaConf);
                    browserCall.Update();//必须先update一下在Listen，不如说，Listen应该是用户点击出发的

                    //var address={type: "open"};//对象
                    var address="{\"type\": \"open\"}";//json字符串，unity传递过来的是字符串。不能用单引号。
                    //必须是这个格式，不如h5stream不会发送后续消息，onmessage也就进不去。
                    browserCall.Call(address);//=>Connect
                    //browserCall.Listen(address);

                    // setInterval(function(){
                    //     browserCall.Update();
                    // },50);//这里时间太快，可能会出问题。测试时，手动Update

                    browserCall.addEventListener(function(call,event){
                        console.log("browserCall Event",call,event);
                        if(event.Type==CallEventType.FrameUpdate){
                            var buffer=event.Frame.Buffer;//这个会在网页中显示一帧图片，不断刷新，Unity就是通过这种方式的。
                            console.log("buffer",buffer);
                        }
                        else{
                            console.log("Type",CallEventType[event.Type]);
                        }
                    });
                    return browserCall;
                }
                n.d(t,"CAPI_H5Stream_GetVideo",function(){//[NEW]
                    return func_CAPI_H5Stream_GetVideo
                }),

结果：