概述

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/connectionStateconsole.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
                }
            );

创作打卡挑战赛 赢取流量/现金/CSDN周边激励大奖