腾讯云Web视频通话接入

html页面添加
            <video id="remoteVideo" class="corner" autoplay playsinline style="display: none;"></video>
            <video id="localVideo" class="full" muted autoplay playsinline style="display: none;"></video>

 
    <script src="https://sqimg.qq.com/expert_qq/webrtc/3.0/WebRTCAPI.min.js"></script>
    <script>

        $(function(){

        WebRTCAPI.fn.detectRTC({
            screenshare : false
        },
       function(info){
           console.log(info);
           if( !info.isTBS ) {
              // alert('不支持TBS')
           }
          // alert(info.TBSversion)
           if( !info.support ) {
              // alert('不支持WebRTC')
           }
           else{
               //alert('支持WebRTC')
           }
       });
        
        var RTC = new WebRTCAPI({
            "userId": '<%=openid%>',
            "userSig": '<%=userSig%>',
            "sdkAppId":  ,
            "accountType": 36862,
            "closeLocalMedia": false
        },
            function(){
                RTC.openAudio();
                RTC.openVideo();
                RTC.enterRoom({
                    roomid :<%=roomid%>,
                        role : 'OnlineVideo',
                    },function()
                    {// alert("创建房间成功")
                  
                        RTC.startRTC({
                            role: 'OnlineVideo',
                        }, function(){
                            //成功
                             //alert('成功推流')
                        },function(){
                            //失败
                        });
                    });
            },function ( error ){
                console.error( error )
                alert("初始化失败");
            });

        
                // webRTC 部分
                //重复登录被T
                function onKickout() {
                    console.error("on kick out!");
                }
                //服务器超时
                function onRelayTimeout(msg) {
                    console.error("onRelayTimeout!" + (msg ? JSON.stringify(msg) : ""));
                }
                //本地流新增
                function onLocalStreamAdd(info) {
                    // alert("bendi01");
                    var videoElement = document.getElementById("localVideo");
                    videoElement.srcObject =  info.stream;
                    // soundMeter(info);
               
                }
                function soundMeter( info ){
    
                    console.debug(' meter start')
                    // 分析音频流
                    var meter = WebRTCAPI.SoundMeter({
                        stream: info.stream,
                        onprocess: function( data ){
                            if (data.volume>0.01) {
                                alert(data.status+","+data.volume)
                            }
                        }
                    })
                    setTimeout( function(){
                        console.debug(' meter stop')
                        meter.stop();
                    },10000);
                }
                //远端流新增/更新
                function onRemoteStreamUpdate(info) { 
                    document.getElementById('footvoice').style.display = "block";
                    console.log("onRemoteStreamAdd!");
            <%if (calltype != "voice")
              { %>
                    document.getElementById('webrtc-toggle').style.display = "block";
                    $("#tbs-nick").hide();
                    $(".picture").hide();
                    $("#remoteVideo").show();
                    $("#localVideo").show();
            <%}
              else
              {%>
                    //$("#voice-wait").show();
                    //关闭本地摄像头
                    RTC.closeVideo();
            <%}%>
                    document.title = '正在服务中';
                    $("#webrtc-timing").show();
                    var videoElement = document.getElementById("remoteVideo");
                    videoElement.srcObject =info.stream;
                }
                //远端流断开
                function onRemoteStreamRemove( info ) {
                    console.log( info.userId+ ' 断开了连接');
                    var videoNode = document.getElementById( info.videoId );
                    if( videoNode ){
                        videoNode.srcObject = null;
                        document.getElementById(info.videoId).parentElement.removeChild(videoNode);
                    }
                }

                function onWebSocketClose() {
                    RTC.quit();
                }
                //视频流事件通知。
                RTC.on( 'onStreamNotify' , function( info ){
                    if (info.event=='inactive') {
                        //alert("音视频流断开");
                        onWebSocketClose();
                    }
                })
                // 远端流新增/更新
                RTC.on("onRemoteStreamUpdate",onRemoteStreamUpdate)
                // 本地流新增
                RTC.on("onLocalStreamAdd",onLocalStreamAdd)
                // 远端流断开
                RTC.on("onRemoteStreamRemove",onRemoteStreamRemove)
                // 重复登录被T
                RTC.on("onKickout",onKickout)
                // 服务器超时
                RTC.on("onRelayTimeout",onRelayTimeout)
       
                RTC.on("onErrorNotify", function( info ){
                    console.error( info )
                    //alert(info.errorMsg);
                });

    </script>
</body>
</html>

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

acycwf

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值