首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >webrtcH5的demo在微信pc端的支持问题?

webrtcH5的demo在微信pc端的支持问题?

提问于 2019-03-21 15:19:36
回答 1关注 0查看 1.4K
这个是pc端微信 demo打开的界面
这个是pc端微信 demo打开的界面

很明显那个select没有渲染出来,而且也没有alert出来是否支持webrtc

再看web直接打开,渲染出了select的用户名称的option
再看web直接打开,渲染出了select的用户名称的option

我自己在demo顶部上面也搞了个select标签,

pc端微信打开是对此元素支持没问题,所以官方有没有解释,
pc端微信打开是对此元素支持没问题,所以官方有没有解释,

我估计应该是js方面的问题,仅仅个人猜想有何进展我会及时在此回答奉上

接着上面:

我才应该是那个H5 里面demo,index.jsforEach()的写法出问题,

//(function render(){

user.forEach(user=>{}) //写法写成user.forEach(function(user){}) 就能在微信pc端渲染出来

})()

但是貌似开始视频的时候,那个video标签渲染不出来,我先看看是不是用不了rtc 还渲染的问题

没错继续接着:

然后我再H5demo的index.js的每个函数加了点东西,因为在微信浏览器上什么错误提示都没有,所以只好

用js的text()写在文本上。

具体事例如下:

function test(p){ //测试函数

var a = $('.ttest').text();

a+=p;

$('.ttest').text(a);

}

function onWebSocketClose() { //index.js每个函数的头尾(已先return后调用函数的问题)都调用一次test()函数

test('/onWebSocketClose');

RTC.quit();

test('#onWebSocketClose/');

}

结果正常能视频通话的环境

test()出以下文本内容

“/push/findUserToken#findUserToken//initRTC#initRTC/#push/

/onLocalStreamAdd/createVideoElement#createVideoElement/#onLocalStreamAdd/”

而环境(如pc端微信)不能视频通话的则是

“/push/findUserToken#findUserToken//initRTC#initRTC/#push/”

没错,就是多了下面一行文本,其实就已经理解成下面一行的函数都没有执行。

我后来去看了下

/onLocalStreamAdd

/createVideoElement

两个函数,发现然后他们只是功能函数,要然后去上面一行的initRTC(初始化RTC)函数发现了调用了这个函数,

而且全局搜索了一下,就只有这个函数调用了这两个函数。

那么问题来了,具体问题出在什么地方呢?我又在函数穿插了test()函数

function initRTC(opts) {

test('/initRTC');

var ttt = '<br>114行<br>';

test(ttt); ========================1个地方

window.RTC = new WebRTCAPI({

userId: opts.userId,

userSig: opts.userSig,

sdkAppId: opts.sdkappid,

accountType: opts.accountType

}, function () {

var ttt = '<br>120行<br>';

test(ttt); ============================2个地方

RTC.createRoom({

roomid: opts.roomid * 1,

privateMapKey: opts.privateMapKey,

role: "user",

}, function (info) {

console.warn("init succ", info)

}, function (error) {

var ttt = '<br>'+error+'<br>';

test(ttt); ===============================3个地方

console.error("init error", error)

});

}, function (error) {

var ttt = '<br>'+error+'<br>';

test(ttt); ===============================4个地方

// console.warn("init error", error)

});

// 远端流新增/更新

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)

if (info.errorCode === RTC.getErrorCode().GET_LOCAL_CANDIDATE_FAILED) {

// alert( info.errorMsg )

var ttt= '<br>'+info.errorMsg+' <br>';

test(ttt);

}

});

RTC.on("onStreamNotify", function (info) {

// console.warn('onStreamNotify', info)

});

RTC.on("onWebSocketNotify", function (info) {

// console.warn('onWebSocketNotify', info)

});

RTC.on("onUserDefinedWebRTCEventNotice", function (info) {

// console.error( 'onUserDefinedWebRTCEventNotice',info )

});

test('#initRTC/');

}

然后结果是微信客户端test()出'<br>114行<br>'的文本出来以后就没有下文了。

/push/findUserToken#findUserToken//initRTC<br>114行<br>#initRTC/#push/

所以是初始化的时候就出问题了?

这就?。。

我用开发者工具调试网页的时候是这样的结果,

/push/findUserToken#findUserToken//initRTC<br>114行<br>#initRTC/#push/<br>120行<br>

重点是他不像微信pc端那样,开发者工具上试调是有提示“不支持webRTC”,而PC端是没有任何提示。

我猜想应该是那个测试是否支持的函数是在初始化完成的时候才能进行判断的吧?

<script>

WebRTCAPI.fn.detectRTC({

screenshare : true // 是否进行屏幕分享检测,默认true

}, function(info){

if(!info.support) {

console.log(info.support);

alert('不支持WebRTC'); ==========================是否支持

}else{

alert('支持WebRTC'); ==========================是否支持

}

});

var _mtac = {"senseHash":0};

(function() {

alert(456);

var mta = document.createElement("script");

mta.src = "//pingjs.qq.com/h5/stats.js";

mta.setAttribute("name", "MTAH5");

mta.setAttribute("sid", "500538821");

mta.setAttribute("cid", "500538834");

var s = document.getElementsByTagName("script")[0];

s.parentNode.insertBefore(mta, s);

})();

</script>

<script>

alert(123);

document.write('<script src="./js/config.js?v='+new Date()+'" type="text/javascript"></scr'+'ipt>')

document.write('<script src="./js/index.js?v='+new Date()+'" type="text/javascript"></scr'+'ipt>')

</script>

<br>

<!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-121844058-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-121844058-1'); </script></body>

感觉是不是js引入失败的问题啊?迷 ~

容我个猜想,是不是接口的文件不支持啊。刚刚上网查了这个东西

https://blog.csdn.net/qq_42205731/article/details/81776296

刚凑巧解决了一个用户提上来的电脑端微信网页的bug,了解到,

windows下的微信端用的是谷歌非常老版本的内核,不支持find这种新方法。

https://blog.csdn.net/qq_42205731/article/details/81776296

微信浏览器内核-------QQ浏览器X5内核

      也就是说微信、手机QQ内置浏览器都是腾讯的QQ浏览器。

      X5内核是腾讯基于开源Webkit优化的浏览器渲染引擎,目前除了微信、手机QQ、京东等有30多款APP内置浏览器都是基于X5内核。

如何查看:进入微信进入朋友圈或者公众号浏览器内容页,摁着页面下拉,在上部就可以看到内核版本了;

css兼容性。

     1. flex布局在  iphone6 plus的手机时,无法生效。(解决: display: -webkit-flex;)              

     2. vh单位  无法在微信浏览器中使用。 使用js计算高度设置。

 

     这是我项目中遇到的两个问题,后期再给大家完善,大家也可以才下方评论自己遇到的问题。

---------------------

作者:陨石猎人

来源:CSDN

原文:https://blog.csdn.net/qq_42205731/article/details/81776296

版权声明:本文为博主原创文章,转载请附上博文链接!

我开始在想是不是引入的js出了上面所说的兼容问题啊?导致初始化的函数无法实现?

相关文章

相似问题

相关问答用户
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档