魔方實時通訊一對一音視訊元件

shellyes發表於2018-12-21
元件

魔方實時通訊/協作引擎(Web SDK)是一個全能力的實時雲端協作引擎

魔方實時通訊，請點選這個

繼上一個im聊天元件增加了發動語音，語音視訊通話功能

專案的原始碼在這裡

線上演示

專案結構如下：

魔方實時通訊一對一音視訊元件

直接開啟瀏覽器訪問index.html頁面，效果圖如下：

魔方實時通訊一對一音視訊元件

音視屏通話效果：

魔方實時通訊一對一音視訊元件

魔方實時通訊一對一音視訊元件

複製index.html就可以用了:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="http://cube.getcube.cn/webSourceCode/cubeComponent/css/reset.css" />
		<link rel="stylesheet" type="text/css" href="http://cube.getcube.cn/webSourceCode/cubeComponent/css/grid.css" />
		<link rel="stylesheet" type="text/css" href="http://cube.getcube.cn/webSourceCode/cubeComponent/css/message.css" />
	</head>

	<body>

		<div id="root">登入中。。。</div>
		<!--sendImg 傳送圖片按鈕 
		sendFile 傳送檔案按鈕 
		sendAudio傳送語音訊息 
		sendVoice語音通話 
		sendVideo視訊通話-->
		<cube-message class="app-drawer" sendImg sendFile sendAudio sendVoice sendVideo></cube-message>

	</body>
	<script type="text/javascript">
		//必填登入資訊
		var loginInfo = {
			'messagePeer': '10255986', //接收方的userId
			'userId': '10255984', //登入使用者的userId
			'appId': '9c2ed36ae5d34131b3768ea432da6cea005',
			'appKey': '5df6d5495fb74b35ad157c94977527ff005',
		};
	</script>
	<!-- 引擎js -->
	<script type="text/javascript" src="http://cube.getcube.cn/webSourceCode/cubeComponent/js/lib/Genie-min.js"></script>
	<script type="text/javascript" src="http://cube.getcube.cn/webSourceCode/cubeComponent/js/lib/cube-core.js"></script>
	<script type="text/javascript" src="http://cube.getcube.cn/webSourceCode/cubeComponent/js/lib/cube-message.js"></script>
	<script type="text/javascript" src="http://cube.getcube.cn/webSourceCode/cubeComponent/js/lib/cube-signaling.js"></script>
	<script type="text/javascript" src="http://cube.getcube.cn/webSourceCode/cubeComponent/js/lib/cube-sipworker.js"></script>

	<!-- 自定義元素 -->
	<script type="text/javascript" src="http://cube.getcube.cn/webSourceCode/cubeComponent/js/component/Component.js"></script>
	<script type="text/javascript" src="http://cube.getcube.cn/webSourceCode/cubeComponent/js/component/CubeMessage.js"></script>
	<script type="text/javascript" src="http://cube.getcube.cn/webSourceCode/cubeComponent/js/base/message.js"></script>
	<script type="text/javascript" src="http://cube.getcube.cn/webSourceCode/cubeComponent/js/base/signaling.js"></script>
	<script type="text/javascript" src="http://cube.getcube.cn/webSourceCode/cubeComponent/js/base/conference.js"></script>

	<script type="text/javascript" src="http://cube.getcube.cn/webSourceCode/cubeComponent/js/base/base.js"></script>

</html>
複製程式碼

在啟動之前，你只需要引入需要的各個js檔案。

lib/Genie-min.js 為引擎依賴庫

lib/cube-core.js 引擎核心庫

lib/cube-message.js 即時訊息庫

lib/cube-signaling.js 音視訊通話

lib/cube-sipworker.js 會議模組

base/base.js 使用者登入的相關資訊配置（loginInfo裡面的資訊去時信魔方官網註冊獲取）

base/message.js 定義一個 AppMessageListener 來監聽訊息的收取、傳送、檔案上傳、訊息撤回等各種事件

component/CubeMessage.js 自定義元素的js

在html引入我們所需要的js，使用<cube-message class="app-drawer" sendImg sendFile sendAudio sendVoice sendVideo></cube-message>聊天介面就搭建好了。

你可以根據需求是否需要傳送圖片，檔案等訊息型別

在cube-message標籤上新增 sendImg屬性就可以傳送圖片

在cube-message標籤上新增 sendFile屬性就可以傳送檔案

在cube-message標籤上新增 sendAudio屬性就可以傳送語音訊息

在cube-message標籤上新增 sendVoice屬性就可以語音通話

在cube-message標籤上新增 sendVideo屬性就可以視訊通話

【注意】：新版本的視訊獲取介面要用HTTPS協議，否則會丟擲錯誤，當然現在在本地訪問通過 localhost, 127.0.0.1 或者檔案協議，都可以正常使用

capturing_audio_video.html:28 getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

相關文章