@dongido/vue-viaudio

vue-viaudio

Dynamically/Reactively render videos and audios.

Project setup

Install the package:

Using npm

  npm i @dongido/vue-viaudio

OR Using yarn

  yarn add @dongido/vue-viaudio

On the browser

<script src="https://cdn.jsdelivr.net/npm/@dongido/vue-viaudio@0.3.4/dist/vue-viaudio.umd.js"></script>

• Example usage

Demos

• Basic usage demo
• Reactive example
• Dynamically Render Video source
• Take photo using WebRTC to access the camera on a computer or mobile phone

Example Usage

Basic usage - Play a video (:src)

<script>
import Media from '@dongido/vue-viaudio'

export default {
  name: 'app',
  components: {
    Media
  },
}
</script>

<template>
  <div id="app">
    <Media 
      :kind="'video'"
      :controls="true"
      :src="['https://www.w3schools.com/html/mov_bbb.mp4']"
    >
    </Media>
  </div>
</template>

Basic usage - Play an audio

<script>
import Media from '@dongido/vue-viaudio'

export default {
  name: 'app',
  components: {
    Media
  },
}
</script>

<template>
  <div id="app">
    <Media 
      :kind="'audio'"
      :controls="true"
      :src="['https://www.w3schools.com/html/mov_bbb.mp4']"
    >
    </Media>
  </div>
</template>

Play a video - WebRTC example (:srcObject)

<template>
  <div class="example">
    <Media
      :kind="'video'"
      :srcObject="streamObject"
      autoplay
      playinline
    />
  </div>
</template>

<script>
import Media from './vue-viaudio'
import { setTimeout } from 'timers';

export default {
  components: {
   Media
  },
  name: 'Example',
  data() {
    return {
      streamObject: {}
    }
  },
  mounted() {
    navigator.mediaDevices
      .getUserMedia({ video: true, audio: false })
      .then(stream => {
        this.streamObject = stream;
      })
      .catch(function(err) {
        console.log("An error occurred: " + err);
      })
  },
}
</script>

A bit advanced usage - with events

<template>
  <div id="app">
    <Media 
      :kind="'video'"
      :muted="(false)"
      :src="['https://www.w3schools.com/html/mov_bbb.mp4']"
      :poster="'https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217'"
      :autoplay="true"
      :controls="true"
      :loop="true"
      :ref="'fish'"
      :style="{width: '500px'}"
      @pause="handle()"
    >
    </Media>
  </div>
</template>

<script>
import Media from '@dongido/vue-viaudio'

export default {
  name: 'app',
  components: {
    Media
  },
  methods: {
    handle() {
      console.log('Video paused!, playing in 2 sec...')

      setTimeout( () => {
        this.$refs.fish.play() 
      }, 2000)
    }
  }
}
</script>

<style>
#app {
  width: 100%;
  text-align: center;
  margin-top: 40vh;
}
</style>

Media sources

This package can accept its source of media from either the :src or :srcObject property.

The src property can be either a string or an array.

The :srcObject is particularly useful when you need to render a stream source like from WebRTC.

Properties - supports all Video and Audio Element properties.

It accepts all video and audio attributes. You just need to pass the one you need. You can also bind them if you need some reactivity.

Video Events

You can listen to video element events when they happen. These events are available when you pass the prop kind as video.

You can read more about these events here.

Example usage

Assuming, you want to listen to when the user pauses a video. You can do that using:

<script>
import Media from '@dongido/vue-viaudio'

export default {
  name: 'app',
  components: {
    Media
  },
  methods: {
    handlePauseEvent() {
      console.log('The video is now paused.')
    }
  }
}
</script>

<template>
  <div id="app">
    <Media 
      :kind="'video'"
      :controls="true"
      :src="'https://www.w3schools.com/html/mov_bbb.mp4'"
      @pause="handlePauseEvent()" // The event
    >
    </Media>
  </div>
</template>

Audio Events

You can also listen to audio element events when they happen. These events are available when you pass the prop kind as audio. You can listen to it same way as the video events.

You can read about these events here.

Contribute

GitHub

Changelog

Notable changes:

[0.2.4] - 2019-04-10

Added

• Added srcObject props use-case using WebRTC.

Changed

• Updated the props required types
• Fix srcObject that was not working

Removed

[0.3.2] - 2019-07-16

Fixes

• StreamObject not playing by default

Changed

• isMuted props is now muted

Removed