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

原创

F颜

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

4.5K70

代码可运行

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

运行总次数：0

代码可运行

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也行，暂时没有写监听退房事件，那就自己看官方文档扩展功能咯。