【开发记录】TSINGSEE青犀视频使用Vue.js搭建前端启动后共享屏幕无法获取音视频流问题解决

TSINGSEE青犀视频云边端架构产品的前端搭建大多是通过Vue来完成的,Vue的核心库只关注视图层,非常容易与其它库或已有项目整合,并且有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

TSINGSEE青犀视频在开发基于webrtc架构的新产品,前端也是用到Vue.js,但是测试时在使用vue运行本地浏览时,点击播放视频的按钮,出现报错:“getDisplayMedia” of undefined,导致无法调用浏览器原生api,出现不了获取屏幕流。

分析问题

1、使用navigator.getDisplayMedia仅在chrome74和firefox68及以上版本中可用;
2、报错时使用的是http,导致环境不安全问题,是没有navigator.getDisplayMedia方法,请使用https加密证书。

因此我们可以得知本次问题因为使用的是VUE运行本地服务,导致没有https加密证书;要解决上述问题,必须启动https或者localhost服务。所以要找到vue的配置项,改成locahost服务。

解决问题:

1、升级浏览器到最新版
2、vue中配置项修改

如下图:

添加host为本地。最终效果如下,出现共享屏幕:

TSINGSEE青犀视频开发了很多优秀的视频平台,比如EasyNVR、EasyGBS等,其中特别讲一下EasyGBS,EasyGBS的前端同样依托于Vue框架搭建,能够支持GB28181协议,并且可以通过GB28181协议进行级联,获取第三方平台的全部或者部分能力。

如果大家有兴趣,可以联系我们了解,TSINGSEE青犀视频云边端架构视频平台都提供为期30天的免费试用时间,欢迎大家测试!

原文地址:https://www.cnblogs.com/TSINGSEE/p/14150841.html