uniapp 做腾讯直播(自己直播给别人看,原理和 vue 一模一样,直接复制粘贴即可.)

<!-- 直播点播 -->
<template>
    <view>
        
        <div id="id_local_video" style="width:100%;height:200px;">
            
        </div>
        
        <!-- <u-input id='pushUrl' v-model="value" /> -->
        
        <u-button type="primary" @click="startCamera(0)">打开摄像头</u-button>
        <u-button type="primary" @click="startCamera(1)">关闭摄像头</u-button>
        <u-button type="primary" @click="startCamera(2)">共享屏幕</u-button>
        <u-button type="primary" @click="startCamera(3)">打开麦克风</u-button>
        <u-button type="primary" @click="startCamera(4)">开始直播</u-button>
        <u-button type="primary" @click="startCamera(5)">停止直播</u-button>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
                livePusher: null,
                
                value : 'webrtc://testpush.wiseuc.com/live/136?txSecret=b8d273ad0c4e66b6307fbbb68d6c41fb&txTime=61372132',
                
            };
        },
        mounted() {
            
        },
        created(){
            
            this.getScript()
            
            setTimeout(()=>{
                this.newTxList()
            },200)
            
            
        },
        methods:{
            
            getScript(){
                let script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "https://imgcache.qq.com/open/qcloud/live/webrtc/js/TXLivePusher-1.0.0.min.js";
                document.getElementsByTagName("head")[0].appendChild(script);
            },
            
            //初始化对象
            newTxList(){
                this.livePusher = new TXLivePusher();
            },
            
            // 打开摄像头
            startCamera( type ){
        
                // 指定本地视频播放器容器:
                this.livePusher.setRenderView('id_local_video');
                // 设置视频质量
                this.livePusher.setVideoQuality('720p');
                // 设置音频质量
                this.livePusher.setAudioQuality('standard');
                // 自定义设置帧率
                this.livePusher.setProperty('setVideoFPS', 25);
            
                if( type == 0 ){
                    this.livePusher.startCamera();
                }else if( type == 1 ){
                    this.livePusher.stopCamera();
                }else if( type == 2 ){
                    this.livePusher.stopCamera();
                    this.livePusher.startScreenCapture();
                }else if( type == 3 ){
                    this.livePusher.startMicrophone();
                }else if( type == 4 ){
                    this.livePusher.startPush(this.value);
                }else if( type == 5 ){
                    this.livePusher.stopPush();
                }
        
            },
            
        },
        
        
    }
</script>

<style scoped lang="scss">

</style>

 

uniapp  和 vue 的一样,但是 腾讯直播不支持 view 标签,即使功能是一模一样。

 

posted @ 2021-09-07 15:44  薛定谔_猫  阅读(1075)  评论(0)    收藏  举报