tweblive如何实现demo自动拉流

    一般来说浏览器为防止网页自动播放音视频对用户造成干扰,浏览器对视频的自动播放做了限制:在没有用户交互之前,网页将被禁止播放带有声音的媒体。

可以参考文档:https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/tutorial-21-advanced-auto-play-policy.html

    但如果想实现tweblive打开播放页面的时候自动进行播放就得根据播放协议room规则,我们需要登录一个userid,而demo由于推流和拉流都公用了一个组件,因此我们实现逻辑是对这个组件做一个区分,这里我选择的是cdn-play-login.vue进行操作


    首先我们需要一个判断标志,标志登录的这个用户是主播,而推流的用户肯定是主播,因此startPusher之后可以本地保存一个变量

    cf446ffb56734dd14e94d72a1b59165f.png

    接着在在IndexPc.vue中放开登录选项

    f72e7138b9ca8bb95355d6208488621d.png

    然后修改一下登录方法

    最后cdn-play-login.vue中mounted执行上述方法即可

2ed1a474804848893412b00f77fd19f6.png

已邀请:

    第二种则为https的自动播放形式

    1.推流的时候设置好streamID,然后根据播放鉴权生成一个可用的防盗链,参考如下:

var md5 = require('blueimp-md5');
function createHouzhui() {
let key = 'testtesttesttest'
let time = parseInt((new Date()).getTime()/1000 + 60*60*24).toString(16)
console.log(key+'tweblive_test'+time)
return `?txSecret=${md5(key+'tweblive_test'+time)}&txTime=${time}}`
}

    2.在components>player>play.js中修改startPlay方法

    6d7a2aa78d6b0802906f5f5875292658.png

    如果这里没有加防盗链则不需要

要回复问题请先登录注册