从零开始创建一个超简单的TRTC音视频通讯程序(web篇)

原创

F颜

修改于 2020-06-19 12:01:30

4.3K6

修改于 2020-06-19 12:01:30

文章被收录于专栏：跟颜哥学习云开发跟颜哥学习云开发

1、前置条件

1.1、浏览器支持问题

WebRTC 技术由 Google 最先提出，目前主要在桌面版 Chrome 浏览器、桌面版 Safari 浏览器以及移动版的 Safari 浏览器上有较为完整的支持，其他平台（例如 Android 平台的浏览器）支持情况均比较差。

所以，如果是移动端，建议使用小程序或者安卓开发和IOS开发等。

我们目前暂时以Chrome 浏览器为例。

1.1、通过控制台创建应用

进入腾讯云实时音视频控制台创建一个新的应用，获得sdkAppId并记录

请记录右侧sdkAppId

点击快速上手，查看秘钥，复制秘钥

点击复制密钥，并记录

2、下载SDK并配置

2.1、下载SDK

单击下载

npm install trtc-js-sdk --save

2.2、创建主页面文件（index.html）并引入SDK

import 引入方式(配合上面npm包管理)

import TRTC from 'trtc-js-sdk';

html引用方式（配合上面单击下载方式）

<script src="trtc.js"></script>
<script src="vue.min.js"></script><!-- 以vue框架为例 -->
<script src="lib-generate-test-usersig.min.js"></script><!-- 前端签名生成工具 -->
<script src="debug/GenerateTestUserSig.js"></script><!-- 调用前端签名生成工具(配置) -->

2.3、那么开发前期工作就准备好了，具体结构如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个web音视频通讯</title>
	</head>
	<body>
		
		<script src="trtc.js"></script>
		<script src="vue.min.js"></script>
		<script src="lib-generate-test-usersig.min.js"></script>
		<script src="debug/GenerateTestUserSig.js"></script>
	</body>
</html>

3、直接开始写代码

3.1、创建本地连接对象Client。

const client = TRTC.createClient({
  mode: 'videoCall',
  sdkAppId:'', // 开通实时音视频服务创建应用后分配的 SDKAppID
  userId:'', // 用户 ID，可以由您的帐号系统指定
  userSig:'' // 身份签名，相当于登录密码的作用
});

3.2、加入房间

client.join({ roomId:'1002' }).catch(error => {//暂时写死房间号为1002做测试
  console.error('进房失败 ' + error);
}).then(() => {
  console.log('进房成功');
  //
});

3.3、发布本地音视频流

const localStream = TRTC.createStream({ userId, audio: true, video: true });//创建本地音视频流对象

localStream.initialize().catch(error => {//初始化本地音视频流
  console.error('初始化本地流失败 ' + error);
}).then(() => {
  console.log('初始化本地流成功');
  
  //成功后，播放并发布本地流。
  localStream.play('local_stream');//播放本地视频流
  
  client.publish(localStream).catch(error => {
    console.error('本地流发布失败 ' + error);
  }).then(() => {
    console.log('本地流发布成功');
  });
  
});

3.4、订阅远端音视频流(官方建议在进入房间之前订阅，以免错过远端用户进房通知)

client.on('stream-added', event => {
  const remoteStream = event.stream;
  console.log('远端流增加: ' + remoteStream.getId());
  //订阅远端流
  client.subscribe(remoteStream);
});
client.on('stream-subscribed', event => {
  const remoteStream = event.stream;
  console.log('远端流订阅成功：' + remoteStream.getId());
  // 播放远端流
  remoteStream.play('remote_stream-' + remoteStream.getId());
});

4、最终网页代码如下(vue版)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个web音视频通讯</title>
		<style type="text/css">
			.video-view {
				width: 600px;
				height: 600px;
				float: left;
				margin-left: 5px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-for="vv in videoView" v-if="!vv.close" :id="vv.id" class="video-view"></div>
		</div>
		<script src="trtc.js"></script>
		<script src="vue.min.js"></script>
		<script src="lib-generate-test-usersig.min.js"></script>
		<script src="debug/GenerateTestUserSig.js"></script>
		<script>
			const vm = new Vue({
				el:"#app",
				data:{
					userId:'test_web',// 用户 ID，可以由您的帐号系统指定
					videoView:[{id:'local_stream'}]//视频容器对象组
				},
				created(){
					let Signature = genTestUserSig(this.userId);//根据用户id{test_web}生成签名
					const client = TRTC.createClient({
					  mode: 'videoCall',//模式为视频通话
					  sdkAppId:Signature.sdkAppId, // 开通实时音视频服务创建应用后分配的 SDKAppID
					  userId:this.userId, // 用户 ID，可以由您的帐号系统指定
					  userSig:Signature.userSig // 身份签名，相当于登录密码的作用
					});
					
					client.on('stream-added', event => {//监听远端流增加
					  const remoteStream = event.stream;
					  console.log('远端流增加: ' + remoteStream.getId());
					  //订阅远端流
					  client.subscribe(remoteStream);
					});
					client.on('stream-subscribed', event => {//监听订阅远端流成功
					  const remoteStream = event.stream;
					  console.log('远端流订阅成功：' + remoteStream.getId());
						let viewId = 'view_'+remoteStream.getId();
						this.videoView.push({id:viewId});
						this.$nextTick(()=> {// DOM 更新后再播放远端流
						　　// 播放远端流
								remoteStream.play(viewId);
						 })
					  
					});
					
					client.join({ roomId:'1002' }).catch(error => {//暂时写死房间号为1002做测试
					  console.error('进房失败 ' + error);
					}).then(() => {
					  console.log('进房成功');
					  //
					});
					
					const localStream = TRTC.createStream({ userId: this.userId, audio: true, video: true });//创建本地音视频流对象
					
					localStream.initialize().catch(error => {//初始化本地音视频流
					  console.error('初始化本地流失败 ' + error);
					}).then(() => {
					  console.log('初始化本地流成功');
					  
					  //成功后，播放并发布本地流。
					  localStream.play('local_stream');//播放本地视频流
					  
					  client.publish(localStream).catch(error => {
					    console.error('本地流发布失败 ' + error);
					  }).then(() => {
					    console.log('本地流发布成功');
					  });
					});
				}
			});
		</script>
	</body>
</html>

ps：v-if="!vv.close" 是为了退房之后清除退房人的视频流容器，v-show也行，暂时没有写监听退房事件，那就自己看官方文档扩展功能咯。