metaRTC4.0与浏览器webrtc的P2P音视频对讲demo

概述

metaRTC4.0新版本支持webrtc版的p2p，支持一对一和一对多应用，在应用中浏览器作为终端应用比较广，metaRTC提供有metaRTC和浏览器p2p通信demo，工程为metap2p4_html。

metartc4.0新版本支持和浏览器进行音视频和datachannel双向通信，实现和浏览器进行音视频对讲功能。

remark:浏览器demo在谷歌浏览器测试成功，其他浏览器还没测试。

metap2p4_html工程demo

1. p2pdemo_zb.html  从metap2p4只拉流和datachannel双向通信
2. p2pdemo_hd.html  和metap2p4音视频对讲，简单的p2p视频会议，datachannel双向通信

下载源码

 

Release metartc4.016 with 3rdparty and runtime · metartc/metaRTC · GitHubWebrtc SDK for pure C. Contribute to metartc/metaRTC development by creating an account on GitHub.https://github.com/metartc/metaRTC/releases/tag/4.0.016https://gitee.com/metartc/metaRTC/releases/4.0.016https://gitee.com/metartc/metaRTC/releases/4.0.016

p2pdemo_hd.html操作

 p2pdemo_zb.html

 

p2pdemo_hd.html代码

 function start_play(){
        let elr = document.getElementById("resilution");
        let res = elr.options[elr.selectedIndex].text.match(/\d+/g);
        let h = parseInt(res.pop());
        let w = parseInt(res.pop());
		let urlstr=document.getElementById('streamUrl').value.replace("webrtc:","http:");
		//urlstr="http://127.0.0.1/index/api/webrtc?app=live&stream=test&type=echo";
        player = new ZLMRTCClient.Endpoint(
                {
                    element: document.getElementById('video'),// video 标签
                    debug: true,// 是否打印日志
                    zlmsdpUrl:urlstr,//流地址
                    simulcast:false, 
                    useCamera:true, //使用摄像头
                    audioEnable:true,  //是否有语音
                    videoEnable:true,//是否有视频
                    recvOnly:recvOnly,
                    resolution:{w:w,h:h},//分辨率
                    usedatachannel:true,//是否启用datachannel
                }
            );
    
            player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,function(e)
            {// ICE 协商出错
                console.log('ICE 协商出错')
            });
    
            player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,function(e)
            {//获取到了远端流，可以播放
                console.log('播放成功',e.streams)
            });
    
            player.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,function(e)
            {// offer anwser 交换失败
                console.log('offer anwser 交换失败',e)
                stop();
            });
    
            player.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,function(s)
            {// 获取到了本地流
    
              document.getElementById('selfVideo').srcObject=s;
              document.getElementById('selfVideo').muted = true;
              
                //console.log('offer anwser 交换失败',e)
            });

            player.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED,function(s)
            {// 获取本地流失败
    
              console.log('获取本地流失败')
            });

            player.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE,function(state)
            {// RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
              console.log('当前状态==>',state)
            });

            player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_OPEN,function(event)
            {
              console.log('rtc datachannel 打开 :',event)
            });

            player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG,function(event)
            {
              console.log('rtc datachannel 消息 :',event.data)
              document.getElementById('msgrecv').value = event.data
            });
            player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_ERR,function(event)
            {
              console.log('rtc datachannel 错误 :',event)
            });
            player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_CLOSE,function(event)
            {
              console.log('rtc datachannel 关闭 :',event)
            });
      }

参数设置代码

   player = new ZLMRTCClient.Endpoint(
                {
                    element: document.getElementById('video'),// video 标签
                    debug: true,// 是否打印日志
                    zlmsdpUrl:urlstr,//流地址
                    simulcast:false,
                    useCamera:true, //使用摄像头
                    audioEnable:true,  //是否有语音
                    videoEnable:true,//是否有视频
                    recvOnly:recvOnly,
                    resolution:{w:w,h:h},//分辨率
                    usedatachannel:true,//是否启用datachannel
                }
            );