如何从零开始搭建一款小程序?

  • 回答 (10)
  • 关注 (0)
  • 查看 (414)

求问,我想开发一款小程序,但是入门一直不知道怎么入门,求相关案例~

a563831029a563831029提问于
酒当歌趁年轻,多折腾回答于

如果您希望一天内就打通 webrtc 和 小程序音视频 的互通,那么我推荐您不要从零开始,因为那会耗费您太多时间去踩坑和 bugfix,推荐您直接使用我们封装好的 <webrtc-room> ,这套方案既可以帮助您完成快速接入,又能满足一定的定制需求。

另外,不要忘记在微信=>发现=>小程序=>腾讯云视频云,体验一下腾讯云官方 Demo 中的 WebRTC 互通效果哦。

标签说明

<webrtc-room> 标签是基于 <live-pusher> 和 <live-player> 实现的用于 WebRTC 互通的自定义组件。如果您希望直接使用 <live-pusher> 和 <live-player> 标签完成对接,或者想要了解 <webrtc-room> 的内部原理,可以参考 DOC

版本要求

  • 微信 6.6.6 版本开始支持。

效果演示

  • PC 端 用 Chrome 浏览器打开 体验页面 可以体验桌面版 WebRTC 的效果。
  • 微信端 发现=>小程序=>搜索“腾讯视频云”,点击 WebRTC 功能卡,就可以体验跟桌面版 Chrome 互通的效果了。

对接资料

对接资料

说明

下载链接

小程序源码

包含<webrtc-room>的组件源码以及demo源码

DOWNLOAD

PC端源码

基于WebrtcAPI实现的Chrome版WebRTC接入源码(其中 component/WebRTCRoom.js 实现了一个简单的房间管理功能,component/mainwindow.js包含了对 WebRTC API 的使用代码)

webrtc(Chrome).zip

后台源码

实现了一个简单的房间列表功能,同时包含<webrtc-room>几个所需参数的生成代码

webrtc_server_list.zip

标签详解

属性定义

属性

类型

说明

template

String

'1v3'

必要,标识组件使用的界面模版(用户如果需要自定义界面,请看 界面定制)

sdkAppID

String

‘’

必要,开通 IM 服务所获取到的 AppID

userID

String

''

必要,用户 ID

userSig

String

‘’

必要,身份签名,相当于登录密码的作用

roomID

Number

‘’

必要,房间号

privateMapKey

String

‘’

必要,房间权限 key,相当于进入指定房间 roomID 的钥匙

beauty

Number

0~5

可选,默认 5, 美颜级别 0~5

muted

Boolean

true, false

可选,默认 false,是否静音

debug

Boolean

true, false

可选,默认 false,是否打印推流 debug 信息

bindRoomEvent

function

必要,监听 <webrtc-room> 组件返回的事件

enableIM

Boolean

true, false

可选,默认false

bindIMEvent

function

当IM开启时必要,监听 IM 返回的事件

操作接口

<webrtc-room> 组件包含如下操作接口,您需要先通过 selectComponent 获取 <webrtc-room> 标签的引用,之后就可以进行相应的操作了。

函数名

说明

start()

启动

pause()

暂停

resume()

恢复

stop()

停止

switchCamera()

切换摄像头

var webrtcroom = this.selectComponent("#webrtcroomid")
webrtcroom.pause();

事件通知

<webrtc-room> 标签通过 onRoomEvent 返回内部事件,通过 onIMEvent 返回 IM 消息事件,事件参数格式如下

"detail": {
  "tag": "事件tag标识,具有唯一性",
  "code": "事件代码",
  "detail": "对应事件的详细参数"
}

示例代码

// Page.wxml 文件
<webrtc-room id="webrtcroom"
	roomID="{{roomID}}"
	userID="{{userID}}"
	userSig="{{userSig}}"
	sdkAppID="{{sdkAppID}}"
	privateMapKey="{{privateMapKey}}"
	template="1v3"
	beauty="{{beauty}}"
	muted="{{muted}}"
	debug="{{debug}}"
	bindRoomEvent="onRoomEvent"
	enableIM="{{enableIM}}"
	bindIMEvent="onIMEvent">
</webrtc-room>


// Page.js 文件
Page({
	data: {
		//...
		roomID: '',
		userID: '',
		userSig: '',
		sdkAppID: '',
		beauty: 3,
		muted: false,
		debug: false,
		enableIM: false
	},
    onRoomEvent: function(e){
        switch(e.detail.tag){
            case 'error': {
                //发生错误
                var code = e.detail.code;
                var detail = e.detail.detail;
                break;
            }
        }
    },
    onIMEvent: function(e){
        switch(e.detail.tag){
            case 'big_group_msg_notify': 
                //收到群组消息
                console.debug( e.detail.detail )
                break;
            case 'login_event': 
                //登录事件通知
                console.debug( e.detail.detail )
                break;
            case 'connection_event': 
                //连接状态事件
                console.debug( e.detail.detail )
                break;
            case 'join_group_event': 
                //进群事件通知
                console.debug( e.detail.detail )
                break;
        }
    },

  onLoad: function (options) {
		self.setData({
			userID: self.data.userID,
			userSig: self.data.userSig,
			sdkAppID: self.data.sdkAppID,
			roomID: self.data.roomID,
			privateMapKey: res.data.privateMapKey
		}, function() {
			var webrtcroomCom = this.selectComponent('#webrtcroom');
			if (webrtcroomCom) {
				webrtcroomCom.start();
			}
		})
	},
  	
})

使用指引

请确认已经参照 Demo部署 开通了相关服务和并正确的完成了配置。

step1: 下载自定义组件源码

<webrtc-room> 并非微信小程序原生提供的标签,而是一个自定义组件,所以您需要额外的代码来支持这个标签。点击 小程序源码 下载源码包,您可以在 wxlite 文件夹下获取到所需文件。

step2: 在工程中引入组件

  • 在 page 目录下的 json 配置文件内引用组件,这一步是必须的,因为 <webrtc-room> 并非原生标签。 "usingComponents": { "webrtc-room": "/pages/webrtc-room/webrtc-room" }
  • 在 page 目录下的 wxml 文件中使用标签<webrtc-room id="webrtcroomid" roomID="{{roomID}}" userID="{{userID}}" userSig="{{userSig}}" sdkAppID="{{sdkAppID}}" privateMapKey="{{privateMapKey}}" template="1v3" beauty="{{beauty}}" muted="{{muted}}" debug="{{debug}}" bindRoomEvent="onRoomEvent" enableIM="{{enableIM}}" bindIMEvent="onIMEvent"> </webrtc-room>

step3: 获取 key 信息

按照如下表格获取关键的 key 信息,这是使用腾讯云互通直播服务所必须的几个信息:

KEY

示例

作用

获取方案

sdkAppID

1400087915

用于计费和业务区分

step1 中获取

userID

xiaoming

用户名

可以由您的服务器指定,或者使用小程序的openid

userSig

加密字符串

相当于 userid 对应的登录密码

由您的服务器签发(PHP / JAVA)

roomID

12345

房间号

可以由您的服务器指定

privateMapKey

加密字符串

进房票据:相当于是进入 roomid 的钥匙

由您的服务器签发(PHP / JAVA)

下载 sign_src.zip 可以获得服务端签发 userSig 和 privateMapKey 的计算代码(生成 userSig 和 privateMapKey 的签名算法是 ECDSA-SHA256)。

step4: 进入房间

self.setData({
	userID: userID,
	userSig: userSig,
	sdkAppID: sdkAppID,
	roomID: roomID,
	privateMapKey: privateMapKey
}, function() {
	var webrtcroomCom = this.selectComponent('#webrtcroomid');
	if (webrtcroomCom) {
		webrtcroomCom.start();
	}
})

<h2 id="CustomUI"> 界面定制 </h2>

  • 创建界面模版
//第一步:新建 /pages/templates/mytemplate 文件夹,并创建 mytemplate.wxml 和 mytemplate.wxss 文件

//第二步:编写 mytemplate.wxml 和 mytemplate.wxss 文件
//mytemplate.wxml
<template name='mytemplate'>
    <view class='videoview'>
        <view class="pusher-box">
            <live-pusher
                id="rtcpusher"
                autopush
                mode="RTC"
                url="{{pushURL}}"
                aspect="{{aspect}}"
                min-bitrate="{{minBitrate}}"
                max-bitrate="{{maxBitrate}}"
                audio-quality="high"
                beauty="{{beauty}}"
                muted="{{muted}}"
                waiting-image="https://mc.qcloudimg.com/static/img/
								     daeed8616ac5df256c0591c22a65c4d3/pause_publish.jpg"
                background-mute="{{true}}"
                debug="{{debug}}"
                bindstatechange="onPush"
                binderror="onError">
                <cover-image  class='character' src="/pages/Resources/mask.png"></cover-image>
                <cover-view class='character' style='padding: 0 5px;'>我</cover-view>
            </live-pusher>
        </view>
        <view class="player-box" wx:for="{{members}}" wx:key="userID"> 
            <view class='poster'>
                <cover-image class='set'
			       src="https://miniprogram-1252463788.file.myqcloud.com/roomset_{{index + 2}}.png">
				</cover-image>
            </view>
            <live-player
                id="{{item.userID}}"
                autoplay
                mode="RTC"
                wx:if="{{item.accelerateURL}}"
                object-fit="fillCrop"
                min-cache="0.1"
                max-cache="0.3"
                src="{{item.accelerateURL}}"
                debug="{{debug}}"
                background-mute="{{true}}"
                bindstatechange="onPlay">
                <cover-view class='loading' wx:if="{{item.loading}}">
                    <cover-image src="/pages/Resources/loading_image0.png"></cover-image>
                </cover-view>
                <cover-image  class='character' src="/pages/Resources/mask.png"></cover-image>
                <cover-view class='character' style='padding: 0 5px;'>{{item.userName}}</cover-view>
            </live-player>  
        </view> 
    </view>
</template>

//mytemplate.wxss
.videoview {
  background-repeat:no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}
  • webrtc-room 组件引入模版
//为 <webrtc-room> 组件中的 webrtcroom.wxml 文件添加自定义模版
<import src='/pages/templates/mytemplate/mytemplate.wxml'/>
<view class='conponent-box'>
    <view styles="width:100%;height=100%;" wx:if="{{template=='1v3'}}">
        <template is='mytemplate' data="{{pushURL, aspect, 
				      minBitrate, maxBitrate, beauty, muted, debug, members}}"/>
    </view>
</view>

//为 <webrtc-room> 组件中的 webrtcroom.wxss 文件添加自定义样式
@import "../templates/mytemplate/mytemplate.wxss";

Chrome端对接

了解腾讯云官网的 WebrtcAPI ,可以对接 Chrome 端的 H5 视频通话,因为不是本文档的重点,此处不做赘述。

实时音视频产品开通

想要尝试这些接入,首先要开通腾讯云实时音视频,快来接入吧~

回答过的其他问题

我想注销现在这个腾讯云账号,应该走什么流程?

酒当歌趁年轻,多折腾

最反感这种“不想用的话闲置即可”之类的话了。

银行账户不想用了,也不注销,就那么闲置么?

希望官方能给个解决方案。

如何裁剪图片?

酒当歌趁年轻,多折腾
http://examples-1251000004.picsh.myqcloud.com/sample.jpeg?imageMogr2/thumbnail/300x100000!

区块链技术如何推动电竞行业发展?

酒当歌趁年轻,多折腾
区块链应用到游戏领域将解决传统网络游戏中心化运营所产生的诸多天然弊病。比如解决网络游戏里恼人的外挂问题、防止游戏公司将限量道具超发、保障场外与跨服交易的安全性,等等。不同于普通网络游戏,区块链游戏的规则和数据高度透明且不易更改,玩家可以让自己的数字资产产生价值并自由交易,拥有数字...... 展开详请

TensorFlow有哪些应用实践?

酒当歌趁年轻,多折腾
TensorBoard是一套可视化工具,是TensorFlow的一种简单解决方案,它由创建者提供,允许可视化图形,并使用其他数据(如图像)来绘制图形的定量度量 📷... 展开详请

如现有的网络不合适,您可以去控制台 新建私有网络 或 新建子网?

酒当歌趁年轻,多折腾

添加的 VPC 需要和你购买 CVM 的所在地域相同。

添加的子网需要和你购买 CVM 的所在可用区相同。

使用`extern template`来防止模板类的隐式实例化

酒当歌趁年轻,多折腾
为什么我的代码段链接?这里到底发生了什么? 好吧,没有什么可以联系的。因为必须考虑显式实例化的效果。来自n3337: [temp.explicit](强调我的) 10 除了内联函数和类模板特化之外,显式实例化声明具有抑制它们引用的实体的隐式实例化的效果。[注意:意图...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券