Video 场景方案

实时音视频通话

场景概览

游密Video SDK可以实现一对一、一对多、多对多的实时通话功能;在相同频道内的用户可自由发言和收看视频画面;适用于实时音视频通话、多人语音视频群聊等场景。

功能列表

主要功能 功能描述
登录房间 用户可以自由登录房间
自由语音视频互动 用户可以自由加入或退出语音视频互动

快速开始

开发环境要求

  • 两个浏览器,用于模拟两个用户进行语音通话
  • 到官网注册账号、并添加应用产品以获得相关到AppKey、AppSecret参数

H5 开发环境集成

** 直接引入 ymrtc.min.js

<script src="path/to/ymrtc.min.js"></script>

实现视频通话(内部采集、内部渲染)

  1. 初始化

本 SDK 只有一个类:YMRTC,只要实例化这个类,就可以使用本 SDK 的全部功能。

若使用方法一直接引入 js 文件,可以直接访问 YMRTC 类:

var rtc = new YMRTC({
    appKey: '[您所申请的 appKey 字符串]',
    video: true,  // true 为视频+语音通讯,false 为仅语音通讯
    debug: true,  // 开启debug日志
    dev: true     // 使用测试环境
});

本 SDK 同时支持 CommonJS 或 AMD 标准,除了上述直接引用,也可以使用这些标准方法初始化:

// CommonJS 规范
var YMRTC = require('path/to/ymrtc.min.js');
var rtc = new YMRTC({
    appKey: '[您所申请的 appKey 字符串]',
    video: true,  // true 为视频+语音通讯,false 为仅语音通讯
    debug: true,  // 开启debug日志
    dev: true     // 使用测试环境
});

或者

// AMD 规范
require(['path/to/ymrtc.min.js'], function(YMRTC) {
    var rtc = new YMRTC({
        appKey: '[您所申请的 appKey 字符串]',
        video: true  // true 为视频+语音通讯,false 为仅语音通讯
        debug: true,  // 开启debug日志
        dev: true     // 使用测试环境
    });
});

或者,若使用 ES6 或 TypeScript,可以使用 import

import YMRTC from 'path/to/ymrtc.min';

const rtc = new YMRTC({
    appKey: '[您所申请的 appKey 字符串]',
    video: true  // true 为视频+语音通讯,false 为仅语音通讯
});

或者,若使用方法二使用 npm 引入,则使用本 SDK 的 npm 名称:

import YMRTC from 'youme-webrtc';

const rtc = new YMRTC({
    appKey: '[您所申请的 appKey 字符串]',
    video: true  // true 为视频+语音通讯,false 为仅语音通讯
});
  1. 用户登录、加入房间、初始化本地媒体(本地摄像头和麦克风)
// 登录
rtc.login('[用户id]', '[token]');
// 加入房间,会自动等待登录成功再加入房间
rtc.joinRoom('[房间号,支持数字、字母、下划线组合]');
// 初始化本地媒体,然后把本地媒体放入 <video>(或 <audio>)
ymrtc.startLocalMedia({
                video: 'stdres' 
                }).catch((err) => {
                    if (err.name === 'NotAllowedError') {
                        alert('浏览器禁用了摄像头和麦克风的访问权限,或者页面没有使用 https 协议,请检查设置。');
                    } else if (err.name === 'NotFoundError') {
                        alert('没有找到摄像头或麦克风,请检查它们的连接。');
                    } else {
                        alert(err.name);
                    }
                });

更多控制 API 请参看下文的 API 文档,亦可以参看示例代码。

  1. 监听事件,播放其他用户传来的视频和语音
// 当房间有人加入,或者当你自己刚刚加入了房间
rtc.on('room.member-join:[房间号]', function (roomId, memberIdList) {
    // memberIdList 为用户ID数组
    memberIdList.forEach(function(memberId) {
        // 监听该位用户的媒体流(stream)变化,若有变则用 <video> (或 <audio>)播放该流
        rtc.on('user.update-stream:' + memberId, function(mId, stream) {
            // 此处省略为该用户新建 <video> 标签的代码
            document.getElementById('[用户 mId 所属 <video> 标签的 id]').srcObject = stream;
        });
    });
});

// 当房间有人退出
rtc.on('room.member-leave:[房间号]', function (roomId, memberId) {
    // memberId 为离开房间的用户ID
    // 此处省略删除该用户所属的 <video> 标签的代码
});

// 事件监听:本地媒体状态,自己的媒体状态
ymrtc.on('local-media.status:*', function (eventFullName, status) {
    E('local-media-status').innerHTML = status;
});
ymrtc.on('local-media.has-stream', function (stream) {
    //显示自己的视频画面
    E('local-media').style.display = 'inline-block';
    E('local-media').srcObject = stream;
    E('local-media-start-stop').innerHTML = '停止';
});
ymrtc.on('local-media.remove-stream', function () {
    E('local-media').style.display = 'none';
    E('local-media-start-stop').innerHTML = '启动';
});
  1. 退出房间
    ymrtc.leaveRoom(roomId);

实时音视频直播

场景概览

游密Video SDK可以实现直播功能,通过屏幕共享分享游戏画面,实时直播游戏全过程,介绍玩法、策略,展示真实操作,同时支持主播和玩家通过弹幕、聊天、活动等形式互动。

功能列表

主要功能 功能描述
登录房间 支持以不同身份如主播/观众登录房间,决定是否只能观看
语音视频 观众可以听到主播的语音,观看主播视频画面
变声 主播可以自由变音
播放背景音乐 主播端支持播放背景音乐,提升直播效果
屏幕共享 主播可以共享自己的画面

快速开始

开发环境要求

  • 两台浏览器,用于模拟两个用户进行语音通话
  • 到官网注册账号、并添加应用产品以获得相关到AppKey、AppSecret参数

开发环境集成

** 直接引入 ymrtc.min.js

<script src="path/to/ymrtc.min.js"></script>

实现视频通话(内部采集、内部渲染)

  1. 初始化

本 SDK 只有一个类:YMRTC,只要实例化这个类,就可以使用本 SDK 的全部功能。

若使用方法一直接引入 js 文件,可以直接访问 YMRTC 类:

var rtc = new YMRTC({
    appKey: '[您所申请的 appKey 字符串]',
    video: true,  // true 为视频+语音通讯,false 为仅语音通讯
    debug: true,  // 开启debug日志
    dev: true     // 使用测试环境
});

本 SDK 同时支持 CommonJS 或 AMD 标准,除了上述直接引用,也可以使用这些标准方法初始化:

// CommonJS 规范
var YMRTC = require('path/to/ymrtc.min.js');
var rtc = new YMRTC({
    appKey: '[您所申请的 appKey 字符串]',
    video: true,  // true 为视频+语音通讯,false 为仅语音通讯
    debug: true,  // 开启debug日志
    dev: true     // 使用测试环境
});

或者

// AMD 规范
require(['path/to/ymrtc.min.js'], function(YMRTC) {
    var rtc = new YMRTC({
        appKey: '[您所申请的 appKey 字符串]',
        video: true  // true 为视频+语音通讯,false 为仅语音通讯
        debug: true,  // 开启debug日志
        dev: true     // 使用测试环境
    });
});

或者,若使用 ES6 或 TypeScript,可以使用 import

import YMRTC from 'path/to/ymrtc.min';

const rtc = new YMRTC({
    appKey: '[您所申请的 appKey 字符串]',
    video: true  // true 为视频+语音通讯,false 为仅语音通讯
});

或者,若使用方法二使用 npm 引入,则使用本 SDK 的 npm 名称:

import YMRTC from 'youme-webrtc';

const rtc = new YMRTC({
    appKey: '[您所申请的 appKey 字符串]',
    video: true  // true 为视频+语音通讯,false 为仅语音通讯
});
  1. 用户登录、加入房间、初始化本地媒体(本地摄像头和麦克风)
// 登录
rtc.login('[用户id]', '[token]');
// 加入房间,会自动等待登录成功再加入房间
rtc.joinRoom('[房间号,支持数字、字母、下划线组合]');
// 初始化本地媒体,然后把本地媒体放入 <video>(或 <audio>)
ymrtc.startLocalMedia({
                video: 'stdres' 
                }).catch((err) => {
                    if (err.name === 'NotAllowedError') {
                        alert('浏览器禁用了摄像头和麦克风的访问权限,或者页面没有使用 https 协议,请检查设置。');
                    } else if (err.name === 'NotFoundError') {
                        alert('没有找到摄像头或麦克风,请检查它们的连接。');
                    } else {
                        alert(err.name);
                    }
                });

更多控制 API 请参看下文的 API 文档,亦可以参看示例代码。

  1. 监听事件,播放其他用户传来的视频和语音
// 当房间有人加入,或者当你自己刚刚加入了房间
rtc.on('room.member-join:[房间号]', function (roomId, memberIdList) {
    // memberIdList 为用户ID数组
    memberIdList.forEach(function(memberId) {
        // 监听该位用户的媒体流(stream)变化,若有变则用 <video> (或 <audio>)播放该流
        rtc.on('user.update-stream:' + memberId, function(mId, stream) {
            // 此处省略为该用户新建 <video> 标签的代码
            document.getElementById('[用户 mId 所属 <video> 标签的 id]').srcObject = stream;
        });
    });
});

// 当房间有人退出
rtc.on('room.member-leave:[房间号]', function (roomId, memberId) {
    // memberId 为离开房间的用户ID
    // 此处省略删除该用户所属的 <video> 标签的代码
});

// 事件监听:本地媒体状态,自己的媒体状态
ymrtc.on('local-media.status:*', function (eventFullName, status) {
    E('local-media-status').innerHTML = status;
});
ymrtc.on('local-media.has-stream', function (stream) {
    //显示自己的视频画面
    E('local-media').style.display = 'inline-block';
    E('local-media').srcObject = stream;
    E('local-media-start-stop').innerHTML = '停止';
});
ymrtc.on('local-media.remove-stream', function () {
    E('local-media').style.display = 'none';
    E('local-media-start-stop').innerHTML = '启动';
});

打开屏幕共享流程

 ymrtc.startLocalMedia({
                    video: 'screen'
                })

退出房间

ymrtc.leaveRoom(roomId);