janus web客户端开发指南

    janus是一套完整的音视频会议系统，包括了WebRTC流媒体服务器和客户端API两大部分，官方提供了web、安卓、ios标准的SDK接口，以及详细的开发文档。

    通过查看janus源码，我们可以了解到关于web端的官方demo主要放在html目录下，其中janus.js即是核心库，封装了浏览器与janus流媒体服务器之间的底层通信接口。阅读demo可以看出官方使用的web开发技术还比较传统，和目前百花齐放的web前端框架相比显得太单调，无法快速开发出更美观更现代化的前端界面，也为了更深入理解web端与流媒体服务器交互的流程，我决定用熟悉vue框架重写janus的Echo Test模块来练练手。

    web端接入官方文档：https://janus.conf.meetecho.com/docs/JS.html

 

一、创建vue项目

//创建的工程名为janus-client
vue init webpack janus-client

//安装必要插件
npm install webpack --save-dev
npm install vue --save
npm install axios --save

//下面是可选插件
npm install vue-material --save
npm install sass-loader@7.3.1 --save-dev
npm install node-sass@4.14.1 --save-dev    //需要*

 vue-material是一个实现 Google 的像素材料设计的 Vue 组件库，我很喜欢这种很有质感的界面，所以一般都会安装它。感兴趣的可以去官网体验下：https://vuematerial.io/

 

二、导入janus.js库

从最新的janus源代码中找到janus.js文件，拷贝到我们创建的vue项目的src目录下。

我们自定义的组件Echo.vue如果想引用该库文件，该怎么做呢？

首先我们得把janus.js库中的Janus类导出来，暴露给其他vue组件。在janus.js文件的尾部，我们需要添加一行：export default Janus;

接着在Echo.vue的<script></script>中，我们添加：import Janus from "../janus";

即可成功将Janus类导入到我们的vue工程中了。

 

三、Janus初始化

我们需要在mounted()中创建并初始化Janus对象，这里坑也不少，需要详细看官方给的文档。

Janus.init({
   debug: true,
   dependencies: Janus.useDefaultDependencies(), // or: Janus.useOldDependencies() to get the behaviour of previous Janus versions
   callback: function() {
           // Done!
   });

这里第二个参数依赖关系需要重点关注下，官方给了两个可选配置，分别是使用默认依赖关系和使用老的依赖关系，详细说明请看：https://janus.conf.meetecho.com/docs/js-dependencies.html。

简单来说就是：

useDefaultDependencies依赖于：1、Promise  2、fetch  3、WebSocket  4、document.querySelector  5、adapter

useOldDependencies依赖于：1、jQuery  2、WebSocket  3、adapter

我使用的是默认的依赖关系，其中只有adapter需要额外安装插件:

npm install webrtc-adapter --save

接着将其引入到工程中

import adapter from 'webrtc-adapter';

所以初始化Janus的写法如下：

Janus.init({
	debug: true,
	dependencies: Janus.useDefaultDependencies({
	  adapter: adapter
	}),
	callback: ()=> {
	  if(!Janus.isWebrtcSupported()) {
		console.log('is not Supported Webrtc!');
		return;
	  }
	}
});

所谓万事开头难，剩下工作只需要仿照echotest.js写就ok了。

 

 

本文地址：https://blog.csdn.net/A18373279153/article/details/109632409