腾讯云直播前端分享

这次项目是一个课堂管理项目，虽然这个是第二个VUE项目，但是上一个项目写到一半，学长说写这个项目了，不知道之后会不会把上次的项目完成吧，这次项目感觉挺简单的，无非就是增删改查的一些东西，不过这次项目有一个直播的功能和弹幕的功能，弹幕就不多说了之前分享过这个思路，这次项目用的也是之前分享过的博客， 前端利用canvas实现弹幕，这次就来分享一下腾讯云直播的一个思路吧

一、代码

使用腾讯云直播的话，需要用腾讯云的让引的一些文件，看直播的功能我不知道是不是必须得用腾讯云文档里边让用的一些第三方库，我少引一个直接报错404，所以这次博客就都都带上这些东西了

1.直播推流

直播推流需要第三方库

    <script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.0.3.min.js" charset="utf-8"></script>

直播推流代码

 var livePusher = new TXLivePusher();
        console.log(livePusher);
        livePusher.setRenderView('id_local_video');
        // 设置视频质量
        livePusher.setVideoQuality('720p');
        // 设置音频质量
        livePusher.setAudioQuality('standard');
        // 自定义设置帧率
        livePusher.setProperty('setVideoFPS', 25);
        // 采集完摄像头和麦克风之后自动推流
        Promise.all([livePusher.startScreenCapture(), livePusher.startMicrophone()])
            .then(function () {
            //传入的是一个推流地址，后端返回的，把后端返回的一个地址前边的rtmp换成webrtc就可以了
                livePusher.startPush(推流地址)
                    .then(() => {
                        console.log('pushing');
                        if (livePusher.isPushing()) {
                            console.log('pushing');
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    })
            })
            .catch(err => {
                console.log(err);
            })

2.直播拉流

直播拉流所需第三方库

<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/tcplayer.min.css" rel="stylesheet" />
    <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 Webrtc 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 TXLivePlayer-x.x.x.min.js。-->
    <!--有些浏览器环境不支持 Webrtc，播放器会将 Webrtc 流地址自动转换为 HLS 格式地址，因此快直播场景同样需要引入hls.min.x.xx.xm.js。-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/TXLivePlayer-1.2.3.min.js"></script>
    <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 协议的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.xm.js。-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/hls.min.1.1.6.js"></script>
    <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 FLV 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 flv.min.x.x.x.js。-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/flv.min.1.6.3.js"></script>
    <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 DASH 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 dash.min.x.x.x.js。-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/libs/dash.all.min.4.5.2.js"></script>
    <!--播放器脚本文件-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/tcplayer.v4.7.2.min.js"></script>

播放容器

        <video id="player-container-id" preload="auto" playsinline webkit-playsinline></video>

拉流js

var player = TCPlayer('player-container-id', {}); // player-container-id 为播放器容器 ID，必须与 html 中一致
        player.src(url); // url 播放地址

以上就是直播推流和拉流的一些东西

二、直播视频全屏canvas元素无法在最上层

直播弹幕无法在最上层，将z-index设置为最大也没效果，那是因为第三方库用了一个toplayer的东西将播放视频的元素放到最顶层了，用css设置的东西没效果，解决方案就是设置个延时器，等到第三方库把元素放置到页面之后dom操作canvas元素，将其放置到设置toplayer的盒子里边，这样就可以了

三、报错403

看到4开头的可能想到就是前端的问题了，但是这个页面报错403是因为http协议的问题，直播播放必须是https协议开头的，不能使用http，需要后端去申请一个ssl证书就可以了