vue.js下集成腾讯云实时音视频TRTC(step by step )

2019-12-09 10:17:58 浏览数 (1)

本文适用于vue.js新人,因为作者也是刚刚接触vue.js,也只记录作者学习过程。

将介绍在linux下如何安装vue.js环境、如何集成trtc、如何使用trtc

安装vue.js环境

1、购买腾讯云CVM,选择CentOS 7.5 64位公共镜像即可

购买CVM并选择镜像初始化服务器购买CVM并选择镜像初始化服务器

2、在https://nodejs.org/en/download/ 获取已编译好的最新版Nodejs,本文 https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz 为例

下载到/usr/local/src/,并解压到nodejs目录即可使用

代码语言:javascript复制
cd /usr/local/src
wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz
tar -xf node-v10.16.0-linux-x64.tar.xz 
mv node-v10.16.0-linux-x64 nodejs
./nodejs/bin/node -v      //检查版本号
v10.16.0  

创建软链接到/usr/local/bin

代码语言:javascript复制
ln -s /usr/local/src/nodejs/bin/npm /usr/local/bin/
ln -s /usr/local/src/nodejs/bin/node /usr/local/bin/
ln -s /usr/local/src/nodejs/bin/npx /usr/local/bin/

此时,我们就安装好了node.js

安装所需模块

你可以使用npm install [name] 命令来安装模块,加-g 命令可安装到全局,若模块安装较慢,可使用腾讯云软件源加速

安装webpack

代码语言:javascript复制
npm install webpack -g
ln -s /usr/local/src/nodejs/bin/webpack /usr/local/bin

安装vue脚手架

代码语言:javascript复制
npm install vue-cli -g
ln -s /usr/local/src/nodejs/bin/vue /usr/local/bin

创建项目

在服务器找到合适的目录,根据模板创建项目,这里以/data/home/hellovue为例

代码语言:javascript复制
mkdir -p /data/home/
cd /data/home/
vue init webpack-simple hellovue

会有几个提示你输入的地方,如果你不需要自定义,直接敲回车即可

根据模板创建项目,提示输入的地方,直接回车即可根据模板创建项目,提示输入的地方,直接回车即可

跑通hellovue

先在腾讯云服务器控制台开放安全组的8080端口限制,操作可参考文档

https://cloud.tencent.com/document/product/213/34601

放通8080端口放通8080端口

然后修改package.json文件

增加dev的配

代码语言:javascript复制
--host 0.0.0.0
增加dev的配置增加dev的配置

然后执行命令即可看到服务running at http://0.0.0.0:8080

代码语言:javascript复制
npm run dev 
启动服务启动服务

通过浏览器访问你的服务即可发现hellovue已经正常启动

可对外访问可对外访问

安装trtc-sdk

trtc的npm官网是 https://www.npmjs.com/package/trtc-js-sdk

本文待及时更新到4.x版本

0 人点赞