应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

微信小程序云端解决方案教程四:视频应用场景

发布时间:2024-01-01 00:00 浏览次数:21

网站首页 关于我们 小程序案例 小程序解决方案 小程序资讯 联系我们


小程序资讯


部署和运转


整体架构


1. 准备工作域名和证书


2. Nginx 和 Node 代码部署


3. 布局 HTTPS


4. 域名解析


5. 启用 流媒体服务


6. 准备工作 云数据库MySQL


7. 启动新片预告示例 Node 服务


8. 启动新片预告 Demo


主要功能同时实现


以获取视频列表、展现评论、递交评论


播出视频


新片预告就是融合腾讯云流媒体 VOD和云数据库 MySQL制作的一个微信小程序示例。在代码结构上涵盖如下两部分:


app: 新片预告应用领域纸盒代码,可以轻易在微信开发者工具中做为项目关上


server: 构建的Node服务端代码,做为服务器和app通信,提供更多 CGI USB示例用作拉取云数据库上的视频列表、评论列表,将评论数据递交至云数据库


新片预告主要功能如下:


积极支持分页翻转读取视频列表


页面海报重定向至详情页播出视频


对视频展开评论


展现视频的评论列表


部署和运转


领到利斯勒小程序源码的朋友可以尝试自己运转出来。


整体架构


1. 准备工作域名和证书


在微信小程序中,所有的网路命令受严苛管制,不满足条件的域名和协议无法命令,具体内容包含:


只容许和在 MP 中布局不好的域名展开通信,如果还没域名,须要登记注册一个。


网络命令必须跑 HTTPS 协议,所以你还须要为你的域名提出申请一个 SSL 证书。


腾讯云提供更多域名登记注册和证书提出申请服务,还没域名或者证书的可以回去采用


域名登记注册不好之后,可以登入微信公众平台布局通信域名了。


特别注意:须要将 www.qcloud.la 设置为上面提出申请的域名


2. Nginx 和 Node 代码部署


小程序服务必须运转,须要展开以下几步:


部署 Nginx,Nginx 的加装和部署恳请大家自行搜寻(特别注意须要把 SSL 模块也编程进来)


布局 Nginx 逆向代理至 http://127.0.0.1:9994


Node 运转环境,可以加装 Node V6.6.0


部署 server 目录的代码至服务器上,例如 /data/release/qcloud-applet-video


采用 npm install 加装倚赖模块


采用 npm install pm2 -g 加装 pm2


上述环境布局比较麻烦,新片预告的服务器运转代码和布局已经装箱成腾讯云 CVM 镜像,所推荐大家轻易采用。


镜像部署顺利完成之后,云主机上就存有运转 WebSocket 服务的基本环境、代码和布局了。


腾讯云用户可以免费申领礼包,体验腾讯云小程序解决方案。


镜像已涵盖所有小程序的服务器环境与代码,须要体验小程序的朋友无须重复部署


3. 布局 HTTPS


镜像中已经部署了 nginx,须要在 /etc/nginx/conf.d 下修正布局中的域名、证书、私钥。


布局顺利完成后,即可启动 nginx。


nginx


4. 域名解析


我们还须要嵌入域名记录解析至我们的云服务器上,这样才可以采用域名展开 HTTPS 服务。


在腾讯云登记注册的域名,可以轻易采用云解析控制器去嵌入主机记录,轻易挑选上面出售的 CVM。


解析生效后,我们在浏览器采用域名就可以展开 HTTPS 出访。


5. 启用 流媒体服务


新片预告示例的播出资源就是存储在 腾讯云流媒体 上的mp4文件,必须采用 流媒体 服务,须要登入 流媒体 管理控制器,然后在其中顺利完成以下操作方式:


上载视频资源,流媒体几乎积极支持所有主流的视频格式上载


转码顺利后以获取mp4或m3u8源地址


目前微信小程序video组件经测试积极支持mp4和m3u8格式,其中 m3u8 格式就可以在手机上采用,开发者可以采用腾讯云流媒体控制器将视频源转码成 mp4 或 m3u8 格式,并且腾讯云流媒体可以对播出的资源展开CDN快速。


6. 准备工作 云数据库MySQL


示例中拉取的视频和评论列表都就是存储在 云数据库 上,必须采用 云数据库 服务须要顺利完成以下操作方式


出售,特别注意出售的云数据库须要与云服务器同在一个地域分区


初始化流程,本示例采用的就是utf8编码


页面云数据库 控制器操作方式栏的登入按钮,登入至phpMyAdmin建立数据库并在当前数据库中引入本示例中的SQL文件


特别注意:引入SQL文件中涵盖了 流媒体 上载的视频列表,开发者可以基于云数据库自行研发保护一个视频公布管理系统,因为此内容跟本示例暂不有关,所以不再详细描述。


7. 启动新片预告示例 Node 服务


在镜像中,新片预告示例的 Node 服务代码已部署在目录/data/release/qcloud-applet-video之下:


步入该目录:


cd /data/release/qcloud-applet-video


在该目录下有个名叫config.js的配置文件(如下右图),按注解修正对应的 MySQL 布局:


module.exports = {


// Node 监听的端口号


port: '9994',


ROUTE_BASE_PATH: '/applet',


host: '核对启用 MySQL 时分配的内网IP',


user: '核对MySQL用户名',


password: '核对MySQL密码',


database: '核对上一步中建立的MySQL数据名',


};


示例采用pm2管理 Node 进程,继续执行以下命令启动 node 服务:


pm2 start process.json


8. 启动新片预告 Demo


在微信开发者工具将新片预告应用领域纸盒源码嵌入为项目,并把源文件config.js中的通讯域名修正成上面提出申请的域名。


然后页面调试即可关上新片预告Demo已经开始体验。


主要功能同时实现


以获取视频列表、展现评论、递交评论


通过node的mysql模块相连接mysql,展开查阅,填入操作方式


以下就是查阅评论列表的示例代码


const mysql = require('mysql');


const config = require('../../../config');


let vid = this.req.query.vid;


if (!vid) {


this.res.json({ code: -1, msg: 'failed', data: {} });


return;


}


//CDB Mysql布局


let connection = mysql.createConnection({


host: config.host,


password: config.password,


user: config.user,


database: config.database


});


//打开数据库相连接


connection.connect((err) => {


if (err) {


this.res.json({ code: -1, msg: 'failed', data: {} });


}


});


//查阅列表


connection.query('SELECT * from comment where vid = ? order by id desc', [vid], (err, result) => {


if (err) {


this.res.json({ code: -1, msg: 'failed', data: {} });


return;


}


this.res.json({


code: 0,


msg: 'ok',


data: result,


});


});


//查阅回去后停用相连接


connection.end();


播出视频



属性名


类型


src

TAG标签:
阅读推荐