Configurar un cliente básico de Windows

Este tutorial te guiará paso a paso por el proceso de configuración de un cliente básico de Windows que utilice la Video API de Vonage.

Visión general

Todas las aplicaciones que utilizan la Video API de Vonage requieren tanto un cliente y un servidor componente. El código del lado del cliente es el que se carga en la aplicación de Windows del usuario final y se encarga de la mayor parte de las funciones de OpenTok, entre las que se incluyen conectando a la sesión, edición audio-vídeo arroyos a la sesión, y suscribiéndose a a los flujos de otros clientes. Para más información sobre clientes, servidores y sesiones, véase Conceptos básicos de OpenTok.

En este tutorial, utilizará la función SDK de OpenTok para Windows, la biblioteca del lado del cliente de OpenTok para Windows, que permite crear de forma rápida y sencilla una aplicación de vídeo interactiva en tiempo real.

Estos son los temas que se tratarán en este tutorial:

Requisitos
Paso 1: Crear un nuevo proyecto
Paso 2: Añadir el SDK de OpenTok para Windows
Paso 3: Configuración de la autenticación
Paso 4: Conexión a la sesión
Paso 5: Ajustar la interfaz de usuario de la aplicación de ejemplo
Paso 6: Publicación de un flujo en la sesión
Paso 7: Suscribirse a otros flujos de clientes
Paso 8: Ejecutar la aplicación y crear un instalador
Próximos pasos
Configuración del servidor

Tiempo estimado: 25 minutos

¿Quieres saltarte este tutorial? Puedes ir directamente al código completo del cliente de Windows en el Videochat básico de nuestra Repo de aplicaciones de ejemplo para Windows en GitHub. El repositorio incluye un archivo README con documentación sobre cómo ejecutar y explorar el código.

Requisitos

Para completar este tutorial, necesitarás:

Una cuenta de Video API de Vonage válida; si no tienes una, puedes regístrese para una prueba gratuita
Microsoft Visual Studio

Paso 1: Crear un nuevo proyecto

Abre Visual Studio y selecciona Nuevo > Proyecto del Archivo menú.
En el Nuevo proyecto en el cuadro de diálogo, selecciona Windows > Aplicaciones WPF (Visual C#), asigna un nombre a la aplicación y, a continuación, haz clic en el OK botón.

Paso 2: Añadir el SDK de OpenTok para Windows

Utiliza NuGet para instalar el SDK de OpenTok para Windows, siguiendo uno de los métodos siguientes:

En Visual Studio, desde el Herramientas seleccionar menú Gestor de paquetes NuGet > Gestión de paquetes NuGet para la solución, y luego busca OpenTok.Client. Asigna el paquete OpenTok.Client al Proyecto que estás construyendo.
En la consola del gestor de paquetes de Visual Studio, introduzca el siguiente comando:
Copia
```
Install-Package OpenTok.Client
```
Utiliza las herramientas de línea de comandos de .NET Core para instalar el paquete OpenTok. Ejecuta el siguiente comando desde el directorio de tu proyecto:
Copia
```
dotnet add package OpenTok.Client
```

Añade las clases de OpenTok para Windows a la aplicación: en Visual Studio, abre el archivo MainWindow.xaml.cs archivo. Y añade las siguientes instrucciones:

using OpenTok;

Esto importa las clases del SDK de OpenTok para Windows que utilizará la aplicación.

Paso 3: Configuración de la autenticación

Para conectarse a una sesión de OpenTok, el cliente necesitará tener acceso a unas credenciales de autenticación: un Clave API, ID de sesióny ficha. En una aplicación de producción, estas credenciales deberían generarlas un servidor, pero para agilizar el proceso, por ahora simplemente vamos a introducir los valores de forma fija:

En la clase MainWindow, añade algunas variables estáticas para almacenar la clave API, el identificador de sesión y el token. También añadiremos algunas constantes para nuestro identificador de mensaje de registro y permisos:

public partial class MainWindow : Window { public const string API_KEY = ""; public const string SESSION_ID = ""; public const string TOKEN = "";
Ajuste el código mediante la codificación de los valores para el API_KEY, SESSION_ID y TOKEN.

Para ello, inicia sesión en tu Account de la Video API, crea un nuevo proyecto de la API de OpenTok o utiliza uno ya existente; a continuación, ve a la página de tu proyecto y desplázate hacia abajo hasta la sección Herramientas del proyecto sección. Desde allí, puedes generar manualmente un ID de sesión y un token. Utiliza la clave API del proyecto junto con el ID de sesión y el token que hayas generado.

Importante: Puedes seguir obteniendo los valores del ID de sesión y del token de tu Account durante las fases de prueba y desarrollo, pero antes de pasar a producción debes configurar un servidor. Trataremos este tema en Próximos pasos al final de este tutorial.

Para más información sobre sesiones, tokens y servidores, consulte Conceptos básicos de la Video API.

Paso 4: Conexión a la sesión

A continuación, nos conectaremos a la sesión de OpenTok. Debes hacerlo antes de poder publicar tu transmisión de audio y vídeo en la sesión o ver las transmisiones de los demás participantes.

Añade un Session a la clase MainWindow (justo después de la última línea añadida en Paso 3):

Session Session;

La clase «Session» está definida en el SDK de OpenTok para Windows. Representa una sesión de OpenTok e incluye métodos para interactuar con ella.
En el MainWindow() En la función constructora, añade las siguientes líneas, después de la InitializeComponent() método:

Session = new Session(Context.Instance, API_KEY, SESSION_ID); Session.Connected += Session_Connected; Session.Disconnected += Session_Disconnected; Session.Error += Session_Error; Session.StreamReceived += Session_StreamReceived; Session.Connect(TOKEN);

Este código utiliza el Session() para crear un objeto Session. El constructor toma tres parámetros:
- El contexto de Windows asociado a esta aplicación
- El ID de sesión de OpenTok
- El token
Las siguientes líneas añaden manejadores de eventos relacionados con la sesión. (Los implementaremos en los próximos pasos).

El Session.Connect() método del session El objeto conecta la aplicación cliente a la sesión de OpenTok. Debes conectarte antes de enviar o recibir flujos de audio y vídeo en la sesión (o antes de interactuar con la sesión de cualquier forma). El Connect() El método admite un parámetro: el token de autenticación que permite a este cliente conectarse a la sesión de OpenTok.
A continuación, implementaremos los métodos de la interfaz SessionListener. Añade el siguiente código al final de la clase MainWindow (antes del corchete de cierre de la clase):

private void Session_Connected(object sender, EventArgs e) { Console.WriteLine("Connected to session."); } private void Session_Disconnected(object sender, EventArgs e) { Console.WriteLine("Disconnected from session."); } private void Session_Error(object sender, Session.ErrorEventArgs e) { Console.WriteLine("Session error:" + e.ErrorCode); } private void Session_StreamReceived(object sender, Session.StreamEventArgs e) { Console.WriteLine("Stream received in session."); }
- Cuando el cliente se conecta a la sesión de OpenTok, el Session.Connected se genera el evento (y el Session_Connected() ).
- Cuando el cliente se desconecta de la sesión OpenTok, el Session.Disconnected (y el evento Session_Disconnected() ).
- Si el cliente no consigue conectarse a la sesión de OpenTok, el Session.Error (y el evento Session_Error() ).
- Cuando otro cliente publica una transmisión en la sesión de OpenTok, el Session.StreamReceived se genera el evento (y el Session_StreamReceived() ).
Por ahora, la aplicación muestra un mensaje en la consola del depurador cuando se produce cualquiera de estos eventos.

Depura tu aplicación. Si la aplicación se conecta correctamente a la sesión de OpenTok, el Session_Connected() se registra en la consola de depuración.

Paso 5: Ajustar la interfaz de usuario de la aplicación de ejemplo

De forma predeterminada, el SDK de OpenTok para Windows reproduce los vídeos que publicas y a los que te suscribes mediante la clase `VideoRenderer` (definida en el SDK de OpenTok para Windows). Esta clase reproduce los vídeos en un control de Windows Presentation Framework.

Para esta aplicación de ejemplo, defina los controles de destino en el archivo MainWindow.xaml de la aplicación. En Visual Studio, abra ese archivo y edite su XML para añadir una referencia al archivo OpenTok y añadir dos VideoRenderer objetos principales Grid Control de la aplicación:

Paso 6: Publicación de un flujo en la sesión

Cuando la aplicación se conecte a la sesión de OpenTok, queremos que publique un flujo de audio y vídeo en la sesión, utilizando la cámara y el micrófono:

Añade un Publisher a la clase MainWindow (después de la declaración de la variable miembro Session variable miembro):

Publisher Publisher;

La clase «Publisher» se define en el SDK de OpenTok para Windows.
Modificar el MainWindow() para incluir código para inicializar un capturador de vídeo para el editor y utilizar ese capturador de vídeo en un objeto Publisher:

Publisher = new Publisher(Context.Instance, renderer: PublisherVideo);

El código utiliza el Publisher() para instanciar un objeto Publisher. Se pasan dos parámetros al constructor: el contexto de la aplicación Windows y el renderizador de vídeo (definido en el archivo MainApplication.xaml).
Modificar el Session_Connected() Método para incluir código que permita publicar un flujo en la sesión:

private void Session_Connected(object sender, System.EventArgs e) { Session.Publish(Publisher); }

Cuando la aplicación se conecta a la sesión (y el SessionConnected ), el evento Session_Connected El controlador de eventos llama a la función Session.Publish() método, pasando el objeto Publisher. Esto hace que la aplicación publique un flujo de audio y vídeo en la sesión de OpenTok, utilizando el micrófono y la cámara del dispositivo de captura de vídeo como fuente de audio y fuente de vídeo.

Depura tu aplicación. La aplicación muestra la vista previa local del vídeo del emisor y, cuando se conecta correctamente a la sesión de OpenTok, publica una transmisión en dicha sesión.

Nota: Esta aplicación utiliza el capturador de vídeo predeterminado, que emplea la cámara y el micrófono predeterminados del sistema como fuentes de vídeo y audio para la transmisión publicada.Puedes implementar capturadores de vídeo y renderizadores de vídeo personalizados creando clases que implementen las interfaces IVideoCapturer e IVideoRenderer, definidas en el SDK de OpenTok para Windows. Para ver código de ejemplo, consulta las aplicaciones de ejemplo CustomVideoRenderer y ScreenSharing en el ejemplos-del-SDK-de-vídeo-de-Vonage-para-Windows repositorio en GitHub.

Paso 7: Suscribirse a otros flujos de clientes

Queremos que los clientes puedan suscríbase a para ver las transmisiones de otros clientes en la sesión:

Modificar la aplicación del Session_StreamReceived() para incluir código para suscribirse a los flujos de otros clientes de la sesión:

private void Session_StreamReceived(object sender, Session.StreamEventArgs e) { Subscriber subscriber = new Subscriber(Context.Instance, e.Stream, SubscriberVideo); Session.Subscribe(subscriber); }

Cuando otro cliente publica un flujo en una sesión, el Session.StreamReceived Se envía el mensaje y se invoca este método. Se pasa al controlador de eventos un objeto `Stream`, definido en el SDK de OpenTok para Windows. Este objeto representa un flujo de audio y vídeo en la sesión de OpenTok.

El código inicializa una instancia de la clase «Subscriber», definida en el SDK de OpenTok para Windows. La clase «Subscriber» define un objeto que utiliza un cliente para suscribirse a (ver) las transmisiones publicadas por otros clientes.

El Subscriber() toma tres parámetros:

El contexto de la aplicación Windows.
El objeto Stream.
El renderizador para el objeto suscriptor. En esta aplicación, el renderizador es el SubscriberVideo objeto, definido en el archivo MainWindow.xaml.

Paso 8: Ejecutar la aplicación y crear un instalador

Para añadir un segundo flujo a la sesión (que se mostrará como suscriptor en el emulador), ejecute la aplicación por segunda vez en otro dispositivo Windows o utilice la función OpenTok Playground para conectarse a la sesión en un navegador web compatible siguiendo los pasos que se indican a continuación:

Ir a OpenTok Playground (debe estar conectado a su Account)
Selecciona el Unirse a una sesión existente pestaña
Copia el ID de sesión que has utilizado en tu archivo ViewController.m y pégalo en ID de sesión campo de entrada
Haz clic Unirse a la sesión
En la pantalla siguiente, pulse Conectar, y a continuación haz clic en Publicar flujo
Puede ajustar las opciones del editor (no es necesario) y, a continuación, haga clic en Continúe en para conectarse y empezar a publicar y suscribirse

En este momento deberías ver la transmisión que se está publicando desde tu cámara web, así como la transmisión que está publicando el emulador. Al volver al emulador, también deberías ver el nuevo editor que aparece en la pantalla emulada.

Al crear un instalador para tu aplicación, añade «Visual C++ Redistributable para Visual Studio 2015» como paquete de instalación. Utiliza la versión x86, la versión x64 o ambas, dependiendo de la arquitectura de tu aplicación.

¡Enhorabuena! Has completado el tutorial «Configuración de un cliente básico de Windows».
Puedes seguir jugando y ajustando el código que has desarrollado aquí para el lado del cliente de tu aplicación, pero ten en cuenta que tendrás que implementar la función componente de servidor de su aplicación antes de pasar a producción (véase Configuración del servidor más abajo).

Puede ver una versión completa de esta aplicación de ejemplo en la página BasicVideoChat carpeta de la ejemplos-del-SDK-de-vídeo-de-Vonage-para-Windows en GitHub. Esta versión completa añade código para cargar el ID de sesión, el token y la clave API desde un servicio web (en lugar de utilizar valores codificados).

Próximos pasos

Cuando hayas terminado aquí, sigue desarrollando y mejorando tu aplicación de OpenTok con estos útiles recursos:

Configuración del servidor

En el tutorial anterior, te pedimos que introducir las credenciales de autenticación de forma estática. Sin embargo, en el caso de una aplicación de producción, el sessionId y token Los valores de tu código deben ser generados por el servidor de la aplicación y transmitidos al cliente. A continuación te explicamos un par de razones por las que no es recomendable incluir credenciales codificadas de forma fija en tu aplicación de producción:

Los tokens caducan tras un tiempo determinado (especificado en el momento de su generación), por lo que es necesario generar otros nuevos periódicamente.
No podrás crear nuevas sesiones de forma dinámica, por lo que todos los usuarios de tu aplicación se quedarían atrapados en una única «sala».

Puedes seguir probando tu aplicación con valores fijados de forma estática, pero cuando estés listo para configurar un servidor, hay varias formas de hacerlo:

Opción de servidor 1: poner en marcha un servidor REST sencillo en Heroku con un solo clic

Probablemente esta sea la forma más rápida de poner en marcha un servidor, pero tiene una funcionalidad limitada. Solo tienes que hacer clic en el botón de Heroku que aparece a continuación; se te redirigirá a la página web de Heroku y se te pedirá tu clave API y tu secreto API de OpenTok; puedes encontrar estos valores en la página de tu proyecto en tu Account de la Video API. Si no tienes un Account de Heroku, tendrás que registrarte (es gratis).

¿Quieres echar un vistazo al código? El botón de arriba ejecuta el código del servidor desde el aprender-opentok-php Repositorio de GitHub. Visita el repositorio para revisar el código y consultar la documentación adicional; incluso puedes crear una bifurcación del repositorio y realizar cambios antes de la implementación.

¿Prefieres Node.js? Visita la aprender-opentok-node Repositorio con la misma funcionalidad utilizando Node.js (incluido un botón de implementación en Heroku).

Una vez que el servidor esté implementado en Heroku, tendrás que añadir algo de código a tu proyecto para recuperar las credenciales del servidor. El código debería realizar una solicitud HTTP GET a https://YOURAPPNAME.herokuapp.com/session. El cuerpo de la respuesta es un objeto JSON que incluye propiedades que definen la clave de la API de OpenTok, el ID de sesión y un token:


{
    "apiKey": "8675309",
    "sessionId": "2_MX20NTMyODc3Mn5...",
    "token": "eyJhbG..."
}

Opción 2 para el servidor: compilar desde cero utilizando los SDK del servidor

La opción 1 utiliza puntos finales REST para transmitir las credenciales al cliente, pero esa es solo una de las muchas formas de implementar un servidor con OpenTok. Si deseas un mayor nivel de personalización, puedes consultar la documentación de OpenTok sobre Documentación del SDK del servidor para el lenguaje del lado del servidor que elijas (disponible para PHP, Node.js, Java, .NET, Python y Rubí). La documentación explica el proceso de configuración y los distintos métodos que necesitarás para generar sesiones y tokens, así como otras funcionalidades del lado del servidor.