zoukankan      html  css  js  c++  java
  • 教你从0到1搭建小程序音视频

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~

    本文由腾讯视频云终端团队 发表于云+社区专栏

    Demo 体验

    升级微信到最新版本,发现页卡 => 小程序 => 搜索“腾讯视频云”,即可打开小程序Demo:

    功能项 小程序组件 PC端体验页面 依赖的云服务 功能描述
    手机直播 img N/A 直播+云通讯 演示基于小程序的个人直播解决方案
    PC 直播 img img 直播+云通讯 演示课堂直播和学生互动的相关功能(需要 PC 端配合)
    双人通话 img img 直播+云通讯 演示双人视频通话功能,可用于在线客服
    多人通话 img N/A 直播+云通讯 演示多人视频通话功能,可用于临时会议
    WebRTC img img 实时音视频 演示小程序和 Chrome 浏览器的互通能力
    RTMP推流 img N/A 直播 演示基础的 RTMP 推流功能
    直播播放器 img N/A 直播 演示基于 RTMP 和 FLV 协议的直播播放功能

    img

    注册小程序并开通相关接口

    出于政策和合规的考虑,微信暂时没有放开所有小程序对 标签的支持:

    个人账号和企业账号的小程序暂时只开放如下表格中的类目:

    主类目 子类目
    【社交】 直播
    【教育】 在线教育
    【医疗】 互联网医院,公立医院
    【政务民生】 所有二级类目
    【金融】 基金、信托、保险、银行、证券/期货、非金融机构自营小额贷款、征信业务、消费金融

    打开 微信公众平台 注册并登录小程序,并在小程序管理后台的 “设置 - 接口设置” 中自助开通该组件权限,如下图所示:

    img

    注意:如果以上设置都正确,但小程序依然不能正常工作,可能是微信内部的缓存没更新,请删除小程序并重启微信后,再进行尝试。

    安装微信小程序开发工具

    下载并安装最新版本的微信开发者工具,使用小程序绑定的微信号扫码登录开发者工具。

    获取Demo源码并调试

    • step1: 访问 SDK + Demo,获取小程序 Demo 源码。
    • step2: 打开安装的微信开发者工具,点击【小程序项目】按钮。
    • step3: 输入小程序 AppID,项目目录选择上一步下载下来的代码目录( 注意: 目录请选择根目录,根目录包含有 project.config.json文件,请不要只选择 wxlite 目录!),点击确定创建小程序项目。
    • step4: 再次点击【确定】进入开发者工具。
    • step5: 请使用手机进行测试,直接扫描开发者工具预览生成的二维码进入。
    • step6: 开启调试模式,体验和调试内部功能。开启调试可以跳过把这些域名加入小程序白名单的工作。

    Demo访问的测试地址

    Demo小程序会访问如下表格中的测试服务器地址,这些服务器使用的云服务是我们为大家提供的一个体验账号,平时很多客户都会在上面做测试。如果您希望使用自己的后台服务器,以免被其他客户打扰,请关注文档后一节内容:

    • 相关demo需要访问如下地址:
    URL 对应的服务器地址 服务器的功能描述
    https://webim.tim.qq.com IM云通讯后台服务地址 用于支持小程序里面的一些消息通讯功能
    https://room.qcloud.com RoomService后台服务地址 RoomService 是用于支撑 img (视频通话)和 (直播连麦)的房间管理逻辑
    • 相关demo需要访问如下地址:
    URL 对应的服务器地址 服务器的功能描述
    https://webim.tim.qq.com IM云通讯后台服务地址 用于支持小程序里面的一些消息通讯功能
    https://yun.tim.qq.com/v4/ openim/jsonvideoapp WebRTC测试后台 用于请求进入img 所需的 userSig 和 privateMapKey
    https://xzb.qcloud.com/webrtc/ weapp/webrtc_room WebRTC房间列表后台 一个简单的房间列表功能,方便Demo的测试和使用。

    搭建自己的账号和后台服务器

    这部分我们将介绍如何将Demo默认的测试用服务器地址,换成您自己的服务器,这样一来,您就可以使用自己的腾讯云账号实现上述功能,同时也便于您进行二次开发。

    1. 搭建 的服务器

    1.1 这个服务器能做什么?
    • 点击demo里的互动课堂 功能,您会看到一个房间列表,这个房间列表是怎么实现的呢?
    • 在看到视频房间列表以后,如果你要创建一个视频房间,或者进入一个其他人建好的视频房间,就需要为 所对应的几个属性(sdkAppIDuserIDuserSigroomIDprivateMapKey)传递合法的参数值,这几个参数值怎么获取呢?
    1.2 这个服务器要怎么搭建?
    • 下载 webrtc_server ,这是一份 java 版本的实现,根据 README.md 中的说明就可以了解怎么使用这份源码。
    1.3 服务器建好了我怎么用?

    2. 搭建 的服务器

    2.1 这个服务器能做什么?
    • (用于直播连麦)和 (用于视频通话)都是基于腾讯云 LVB 和 IM 两个基础服务实现的扩展功能,需要一个叫做 RoomService 的后台组件配合才能运行。
    2.2 这个服务器要怎么搭建?
    • 下载 RoomService 的 java 版本源代码,根据 README.md 中的说明就可以了解怎么使用这份源码。
    2.3 服务器建好了我怎么用?

    3. Wafer 零成本服务器部署方案 (Node.js)

    如果您是一位资深的 Web 前端工程师,暂时找不到合适的服务器,但又想快速拥有自己的调试后台,可以使用腾讯云的 Wafer 功能进行零成本的一键部署方案(Wafer 只支持 Node.js 语言的后台代码),您需要你做的只是:

    问答

    小程序码测试?

    相关阅读

    【转】腾讯云 API 3.0实践分享

    彭磊:TencentHub的架构实现

    MySQL 8.0 版本功能变更介绍

    此文已由作者授权腾讯云+社区发布,原文链接:https://cloud.tencent.com/developer/article/1153619?fromSource=waitui

    欢迎大家前往腾讯云+社区或关注云加社区微信公众号(QcloudCommunity),第一时间获取更多海量技术实践干货哦~

    海量技术实践经验,尽在云加社区

  • 相关阅读:
    js的BOM对象完全解析
    转:JavaScript中的this陷阱的最全收集
    转载:冷门js技巧
    MVVM的架构设计与团队协作 with StoryBoard
    ReactiveCocoa & FRP & MVVM
    ReactiveCocoa的冷信号与热信号 探讨
    Git本地项目上传 & SourceTree & GitHub 简单使用
    Monad / Functor / Applicative 浅析
    map & flatMap 浅析
    Swift -> Let & Var 背后编程模式 探讨
  • 原文地址:https://www.cnblogs.com/qcloud1001/p/9322110.html
Copyright © 2011-2022 走看看