How to use openvidu-browser - 10 common examples

video.addEventListener('play', () => {
          const loop = () => {
            if (!video.paused && !video.ended) {
              ctx.drawImage(video, 0, 0, 300, 170);
              setTimeout(loop, 100); // Drawing at 10fps
            }
          };
          loop();
        });
        const grayVideoTrack = canvas.captureStream(30).getVideoTracks()[0];
        this.OV.initPublisher(
          document.body,
          {
            audioSource: false,
            videoSource: grayVideoTrack,
            insertMode: VideoInsertMode.APPEND
          });
      })
      .catch(error => {

joinSession() {
    this.OV = new OpenVidu();
    this.OVSession = this.OV.initSession();

    this.OVSession.on('streamCreated', (event: StreamEvent) => {
      console.warn("OpenVidu stream created: ", event.stream);

      this.OVSession.subscribe(event.stream, 'nothing');

      let stream: Stream = event.stream;
      if (JSON.parse(stream.connection.data).isTeacher) {
        // Teacher's stream
        this.teacherStream = stream;
        if (this.studentAccessGranted) {
          // There's a student publishing: setup the 2 videos
          this.smallStream = stream;
        } else {
          // There's no student publishing: setup only big video for the teacher

joinSession() {
        // --- 1) Get an OpenVidu object ---

        this.OV = new OpenVidu();

        // --- 2) Init a session ---

        this.session = this.OV.initSession();

        // --- 3) Specify the actions when events take place in the session ---

        // On every new Stream received...
        this.session.on('streamCreated', (event: StreamEvent) => {
            // Subscribe to the Stream to receive it. Second parameter is undefined
            // so OpenVidu doesn't create an HTML video on its own
            const subscriber: Subscriber = this.session.subscribe(event.stream, undefined);
            this.subscribers.push(subscriber);
        });

        // On every Stream destroyed...

joinSession() {
        // --- 1) Get an OpenVidu object ---

        this.OV = new OpenVidu();

        // --- 2) Init a session ---

        this.setState(
            {
                session: this.OV.initSession(),
            },
            () => {
                var mySession = this.state.session;

                // --- 3) Specify the actions when events take place in the session ---

                // On every new Stream received...
                mySession.on('streamCreated', (event) => {
                    // Subscribe to the Stream to receive it. Second parameter is undefined
                    // so OpenVidu doesn't create an HTML video by its own

joinSession() {
        // --- 1) Get an OpenVidu object ---

        this.OV = new OpenVidu();

        // --- 2) Init a session ---

        this.setState(
            {
                session: this.OV.initSession(),
            },
            () => {
                var mySession = this.state.session;
                // --- 3) Specify the actions when events take place in the session ---

                // On every new Stream received...
                mySession.on('streamCreated', (event) => {
                    // Subscribe to the Stream to receive it. Second parameter is undefined
                    // so OpenVidu doesn't create an HTML video by its own
                    const subscriber = mySession.subscribe(event.stream, undefined);

joinSessionShared(cameraOptions) {

    this.toggleVideo = this.joinWithVideo;
    this.toggleAudio = this.joinWithAudio;

    this.openVidu = new OpenVidu("wss://" + location.hostname + ":8443/");

    this.openVidu.connect((error, openVidu) => {

      if (error)
        return console.log(error);

      let camera = openVidu.getCamera(cameraOptions);

      camera.requestCameraAccess((error, camera) => {

        if (error)
          return console.log(error);

        var sessionOptions = {
          sessionId: this.sessionId,
          participantId: this.participantId

if (typeof this.videoSource === 'string') {
            if (!!this.videoSource) {
                this.publisherProperties.videoSource = this.videoSource;
            } else {
                this.publisherProperties.videoSource = undefined;
            }
        }
        try {
            this.filter.options = JSON.parse(this.stringOptions);
        } catch (e) {
            console.error('Invalid JSON object in "Filter options" field');
        }
        if (!this.filter.type) {
            delete this.publisherProperties.filter;
        } else {
            this.publisherProperties.filter = new Filter(this.filter.type, this.filter.options);
        }
        return this.publisherProperties;
    }

private joinSessionShared(token): void {

    this.OV = new OpenVidu();

    this.session = this.OV.initSession();

    this.addSessionEvents(this.session);

    this.session.connect(token, this.clientData)
      .then(() => {
        this.changeDetector.detectChanges();

        if (this.publishTo) {

          this.audioMuted = !this.activeAudio;
          this.videoMuted = !this.activeVideo;
          this.unpublished = false;
          this.updateAudioIcon();
          this.updateVideoIcon();

this.getToken().then(token => {

        const startTimeForUser = Date.now();

        const OV = new OpenVidu();

        if (this.turnConf === 'freeice') {
          OV.setAdvancedConfiguration({ iceServers: 'freeice' });
        } else if (this.turnConf === 'manual') {
          OV.setAdvancedConfiguration({ iceServers: [this.manualTurnConf] });
        }
        const session = OV.initSession();

        this.OVs.push(OV);
        this.sessions.push(session);

        session.on('connectionCreated', (event: ConnectionEvent) => {
          if (this.connections.indexOf(event.connection.connectionId) === -1) {
            this.connections.push(event.connection.connectionId);
          }
        });

joinSession() {
    this.OV = new OpenVidu();
    this.session = this.OV.initSession();

    this.subscribeToUserChanged();
    this.subscribeToStreamCreated();
    this.subscribedToStreamDestroyed();
    this.connectToSession();
  }