• uniapp简易直播


    实验准备

    1. 在服务器部署nginx-rtmp作为我们直播推流和拉流的服务器(如果服务商选择七牛,也是直接给地址推流)。为了加快部署,我在这一步使用Docker。
    docker pull tiangolo/nginx-rtmp
    docker run -d -p 1935:1935 --name nginx-rtmp tiangolo/nginx-rtmp
    
    1. 记下推流地址(我本地搭建的:192.168.1.178:1935
    2. 新建Uniapp项目
    3. 点击项目下方的manifest.json文件,点击APP常用其他设置去除V3编译器(Hbuilder 2.5.9 alpha V3模式会报uni.createLivePusherContext的错,后续版本无此问题)

    Part 1 直播推流

    index.nvue(uni.createLivePusherContext在APP端仅支持Nvue)

    <template>
    	<view>
    		<live-pusher id="livePusher" :url="url" mode="FHD"></live-pusher>
    		<button @click="startLive">开始推流(开始直播)</button>
    		<button @click="stopLive">结束推流</button>
    	</view>
    </template>
    
    <script>
    export default {
    	data() {
    		return {
    			url: 'rtmp://192.168.1.178:1935/live/exp',
    			enableCamera: false,
    			context: null
    		};
    	},
    	onReady() {
    		this.context = uni.createLivePusherContext('livePusher', this);
    	},
    	methods: {
    		EnableCamera() {
    			this.enableCamera = true;
    		},
    		startLive() {
    			this.context.start({
    				success: a => {
    					console.log('livePusher.start:' + JSON.stringify(a));
    				}
    			});
    		},
    		stopLive() {
    			this.context.stop({
    				success: a => {
    					console.log(JSON.stringify(a));
    				}
    			});
    		}
    	}
    };
    </script>
    

    Part 2 直播拉流(播放)

    App的实时音视频播放,不是使用 live-player,而是直接使用 video 组件。 (来源:官网文档

    <template>
    	<view>
    		<video src="rtmp://192.168.1.178:1935/live/exp" style=" 100vw;height: 400rpx;" :autoplay="true" controls></video>
    	</view>
    </template>
    
    <script>
    	export default {}
    </script>
    

    效果

    若Gif无法播放右键新标签打卡

    1w46fO.md.gif

    备注

    • 解释一下推流/拉流地址结构:rtmp://<ServerIp>:<Port>/live/<LiveKeyWords>
  • 相关阅读:
    Windows常用cmd命令总结
    电脑UEFI启动是什么?
    PHP 7天前的时间戳
    背景图片
    SQLite/SQL Server Compact Toolbox
    修改浏览器下拉条颜色和粗细
    thinkphp5 apache htaccess配置文件重写
    thinkphp5 token验证
    英文共享js
    ul高度为0的解决方法
  • 原文地址:https://www.cnblogs.com/harry7988/p/12315456.html
Copyright © 2020-2023  润新知