互动
<p>[TOC]</p>
<h4>示例</h4>
<pre><code class="language-html"><stream
ref="stream"
:roomId="roomInfo.room_id"
:sdkInstance="sdkInstance"
:roleName="roomInfo.role_name"
:nickName="nickName"
:speakerList="roomInfo.speakerList"
:accountId="roomInfo.third_party_user_id"
:mainScreen="roomInfo.main_screen"
:isShowViewChangeBtn="true"
:mainscreenViewType="mainscreenViewType"
></stream></code></pre>
<h4>props</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">参数</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">类型</th>
<th style="text-align: left;">可选值</th>
<th style="text-align: left;">默认值</th>
<th style="text-align: left;">必填</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">sdkInstance</td>
<td style="text-align: left;">互动 SDK 实例</td>
<td style="text-align: left;">object</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">accountId</td>
<td style="text-align: left;">用户 ID</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;"></td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">nickName</td>
<td style="text-align: left;">用户昵称</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;"></td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">roleName</td>
<td style="text-align: left;">用户角色</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">1 主持人 2 观众 3 助理 4 嘉宾</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">roomId</td>
<td style="text-align: left;">房间 ID</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">mainScreen</td>
<td style="text-align: left;">主讲人 ID</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr>
<td style="text-align: left;">interactiveType</td>
<td style="text-align: left;">stream 组件类型</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">all,publish,subscribe</td>
<td style="text-align: left;">all</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">mainscreenViewType</td>
<td style="text-align: left;">主讲人视图类型</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">small,large,cover</td>
<td style="text-align: left;">small</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">streamClass</td>
<td style="text-align: left;">流容器的 ID 和 class</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">publishType</td>
<td style="text-align: left;">推流类型</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">video,desktopStreen</td>
<td style="text-align: left;">video</td>
<td style="text-align: left;"></td>
</tr>
<tr>
<td style="text-align: left;">subscribeType</td>
<td style="text-align: left;">订阅类型</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">video,desktopStreen</td>
<td style="text-align: left;">video</td>
<td style="text-align: left;"></td>
</tr>
<tr>
<td style="text-align: left;">openSetOwner</td>
<td style="text-align: left;">是否开启设置主讲人功能</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;"></td>
</tr>
<tr>
<td style="text-align: left;">isShowViewChangeBtn</td>
<td style="text-align: left;">是否视图切换按钮</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;"></td>
</tr>
<tr>
<td style="text-align: left;">speakerList</td>
<td style="text-align: left;">上麦人员列表</td>
<td style="text-align: left;">array</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">[]</td>
<td style="text-align: left;"></td>
</tr>
</tbody>
</table>
<h5>sdkInstance</h5>
<p>互动 SDK 实例需要在聊天 SDK 实例成功后初始化，即在聊天组件派发的 component_chatSDK_ready 事件中初始化。</p>
<pre><code class="language-javascript">EventBus.$on('component_chatSDK_ready', () => {
initSDK()
})
function initSDK() {
let options = {
accountId: this.roomInfo.third_party_user_id, // 第三方用户ID，必填 *不能是中文
inavId: this.roomInfo.inav_id, // 房间ID，必填
appId: this.roomInfo.app_id, // 应用ID，必填
roomId: this.roomInfo.room_id,
token: this.roomInfo.paas_access_token, // access_token，必填
role: this.roomInfo.role_name == 1 ? VhallRTC.MASTER : VhallRTC.GUEST
}
console.log('初始化互动sdk参数', options)
VhallRTC.createInstance(
options,
res => {
console.log('互动 SDK 初始化成功', res)
},
error => {
console.error('互动 SDK 初始化失败', error)
}
)
}</code></pre>
<h5>interactiveType</h5>
<ul>
<li>all
组件默认包含订阅和推流两部分，使用一行排列的布局。</li>
<li>publish
组件只包含推流部分，适用于同时推桌面共享和其他单个视频流。</li>
<li>subscribe
组件只包含订阅部分，适用于需要单独订阅其他流时使用。目前仅支持订阅两种类型：在推流时增加 attributes 参数的流和单独推的桌面共享。</li>
</ul>
<h5>mainscreenViewType</h5>
<p>只有当 interactiveType 为 all 时有效，会给主讲人流容器增加 vh-interaction-mainscreen<strong>small，vh-interaction-mainscreen</strong>large,vh-interaction-mainscreen__cover 的类名，用来区分小窗口，有订阅流时的大窗口和无订阅流时的大窗口,业务层可以通过定位实现位置变换。</p>
<h5>streamClass</h5>
<p>一般情况下，推流容器 ID 为<code>vh-${this.publishType}</code>,订阅容器 ID 为<code>vh-${this.accountId}</code>。当推多路流或者订阅同一个用户的多路流时，为保证流容器 ID 的唯一性，可以指定流容器 ID 为 streamClass，同时也会赋值到 class 上。</p>
<h5>publishType</h5>
<p>当需要推多路流（比如同时推桌面共享）时，需要再引入一个 stream 组件，并设置 interactiveType 为 publish,publishType 为 video 或者 desktopScreen</p>
<h5>subscribeType</h5>
<p>当需要订阅多路流（比如单独订阅桌面共享或单独订阅某个用户的一路流）时，需要再引入一个 stream 组件，并设置 interactiveType 为 subscribe,subscribeType 为 video 或者 desktopScreen</p>
<h5>openSetOwner</h5>
<p>开启此功能会在流容器上显示设置主讲人按钮</p>
<h5>isShowViewChangeBtn</h5>
<p>开启此功能会在主讲人流容器上显示切换视图按钮。切换视图其实是改变 mainscreenViewType 的值，可以从业务层 prop 传入改变，也可以通过 steam 组件的 exchage 方法自动根据订阅流的数量在 small，large，cover 切换，此时会派发 component_mainscreen_view_change 事件并抛出值</p>
<h5>speakerList</h5>
<p>初始化时获取房间信息的接口会返回当前房间正在上麦的人员，直播过程中需要在业务层根据连麦成功，断开，禁用音视频消息手动维护此列表。</p>
<h5>mainScreen</h5>
<p>只需初始化时传入即可，stream 组件内会维护此 ID</p>
<hr />
<h4>methods</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">方法名</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">参数</th>
<th style="text-align: left;">返回值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">startPushStream</td>
<td style="text-align: left;">开始推流,返回 Promise</td>
<td style="text-align: left;">object，可以覆盖默认推流参数</td>
<td style="text-align: left;">{ streamId }</td>
</tr>
<tr>
<td style="text-align: left;">stopPushStream</td>
<td style="text-align: left;">停止推流,返回 Promise</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">startShareScreen</td>
<td style="text-align: left;">开始桌面共享,返回 Promise</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">stopShareScreen</td>
<td style="text-align: left;">停止桌面共享,返回 Promise</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">speakOn</td>
<td style="text-align: left;">上麦，由两步组成，推流成功，调上麦方法。返回 Promise</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">speakOff</td>
<td style="text-align: left;">下麦，只调下麦方法。返回 Promise</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">setBroadCastLayout</td>
<td style="text-align: left;">设置旁路布局,返回 Promise</td>
<td style="text-align: left;">string ,sdk 的布局常量，eg:VhallRTC.CANVAS_LAYOUT_PATTERN_TILED_5_1T4D</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">setBroadCastScreen</td>
<td style="text-align: left;">设置旁路主屏,返回 Promise</td>
<td style="text-align: left;">string ,流 ID</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">startBroadCast</td>
<td style="text-align: left;">开启旁路混流,主持人页面刷新时，如果只有主持人在推流，也需要再开启一次。返回 Promise</td>
<td style="text-align: left;">object ,可以覆盖默认开启旁路混流参数</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">stopBroadCast</td>
<td style="text-align: left;">停止旁路混流,在结束直播的停止推流错作前调用，返回 Promise</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
</tr>
</tbody>
</table>
<h4>events</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">事件名</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">回调参数</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">component_remote_streams_number</td>
<td style="text-align: left;">订阅流数量变化</td>
<td style="text-align: left;">number,订阅流数量</td>
</tr>
<tr>
<td style="text-align: left;">component_stream_pushed</td>
<td style="text-align: left;">推流成功</td>
<td style="text-align: left;">object,{streamId}</td>
</tr>
<tr>
<td style="text-align: left;">component_mainscreen_view_change</td>
<td style="text-align: left;">切换视图，调 exchange 方法派发</td>
<td style="text-align: left;">string,mainscreenViewType 的值:small,cover,large</td>
</tr>
</tbody>
</table>