TSINGSEE青犀视频开发WebRTC视频推流播放平台前端获取视频流列表错误是什么原因?

在之前关于WebRTC的研发当中,我们实现了基于WebRTC的视频推流和播放,但是该方案目前还有不完善的地方,因此我们目前仍在不断优化当中。

前几天我们又重新对WebRTC推流做了测试,打开webrtc client页面,并推一个摄像头视频流,发现此次出现报错:
Error in render: “TypeError: Cannot read property ‘length’ of undefined”
Found in xxxxxx

TSINGSEE青犀视频开发WebRTC视频推流播放平台前端获取视频流列表错误是什么原因?

分析问题

producers这个属性值是从服务端获得;前端页面使用的是Vue制作,只有没有producers属性在页面渲染节点才会报错,所以在渲染的原数据的源头先输入console.log,查看原数据信息,如下图:

TSINGSEE青犀视频开发WebRTC视频推流播放平台前端获取视频流列表错误是什么原因?

然后在浏览器重新运行,查看log显示的内容,如下图:

TSINGSEE青犀视频开发WebRTC视频推流播放平台前端获取视频流列表错误是什么原因?

发现此处没有视频的id,而在Vue的项目中使用了producers.length这个属性,但是原数据没有这个属性,导致报错。在vue的代码渲染如下图:

TSINGSEE青犀视频开发WebRTC视频推流播放平台前端获取视频流列表错误是什么原因?

解决问题

需要在数据的源头来解决问题;要验证producers属性有没有即可。

TSINGSEE青犀视频开发WebRTC视频推流播放平台前端获取视频流列表错误是什么原因?

上一篇:开源框架WebRTC终极指南:3大 API 详解


下一篇:本地https快速解决方案——mkcert