JavaScript VueJS SDK
Integrations of Ziggeo's Video JavaScript SDK with VueJS
Ziggeo's VueJS SDK is the ultimate video recording/playback SDK out there for VueJS.
Ziggeo's VueJS JavaScript SDK is managed publicly on GitHub here.
You can find a demo application on Github as well.
Documentation
Setup
Install vue-ziggeo
via npm
and include below files in your root main.js
file
import Ziggeo from 'vue-ziggeo';
Vue.use(Ziggeo);
Recorder
Replace ZIGGEO_API_KEY with your own by Ziggeo API key
<template>
<ziggeo-recorder
:apiKey="'ZIGGEO_API_KEY'"
:width="110"
:height="80"
@camera_unresponsive="recorderCameraUnresponsive"
@access_forbidden="recorderAccessForbidden"
@upload_selected="recorderUploadSelected"
></ziggeo-recorder>
</template>
<script>
export default {
...
methods: {
// starting vue-ziggeo@2.0.0 version embedding argument also accessible
recorderCameraUnresponsive: function(embedding /* only starting from vue-ziggeo@2.0.0 */) {
console.log('camera unresponsive');
},
recorderAccessForbidden: function (embedding /* only starting from vue-ziggeo@2.0.0 */) {
console.log('access forbidden');
},
recorderUploadSelected: (embedding /* only starting from vue-ziggeo@2.0.0 */, file) => {
console.log('upload selected', file);
}
...
}
...
}
</script>
Recorder Application Settings
You can set application settings based on your requirement
:applicationOptions="{
'webrtc_streaming': boolean (default: false),
'webrtc_streaming_if_necessary': boolean (default: false),
'webrtc_on_mobile': boolean (default: false),
'auth': boolean (default: false),
'debug': boolean (default: false)
}"
Screen Recorder
Using Ziggeo you can also record your screen.
In development mode with localhost
you can test it with Ziggeo
chrome/opera extensions which will be set automatically, FireFox support it by default.
For production environment you have to generate your own extensions. For more details
Setup Vue recorder:
:allowscreen=true
:applicationOptions="{
chrome_extension_id: 'your_chrome_extension_id',
chrome_extension_install_link: 'your_chrome_extension_install_link',
opera_extension_id: 'your_opera_extension_id',
opera_extension_install_link: 'your_opera_extension_install_link'
}"
Player
Replace ZIGGEO_API_KEY and VIDEO_TOKEN provided by Ziggeo App
<template>
<ziggeo-player
:apiKey="'ZIGGEO_API_KEY'"
:video="'VIDEO_TOKEN'"
:width="330"
:height="210"
@attached="playerAttached"
@playing="playerPlaying"
...
></ziggeo-player>
</template>
<script>
export default {
...
methods: {
// starting vue-ziggeo@2.0.0 version embedding argument also accessible
playerAttached: function (embedding /* only starting from vue-ziggeo@2.0.0 */, data) {
console.log('player attached', data)
},
playerPlaying: (embedding /* only starting from vue-ziggeo@2.0.0 */) => {
console.log('player playing');
},
...
}
...
}
</script>
Additional Parameters
You can add all available Ziggeo-related parameters here:
- Ziggeo Parameters
- Ziggeo Events
- Only
key
parameter was replaced with_key
, asVue
use it as reserved variable
Demo
A demo is located in the root demo
folder.
Changing versions
Our Vue SDK is updated as new revisions of our client JS SDK come out, however you might want to grab a specific one, even before it is added or afterwards. If that is the case you can do that by modifying your package.json file to specify the version you want to use.
In your package.json
file you will have a section called "devDependencies": {}
in it just add the specific details you want to be used like so (an example only):
"devDependencies": {
...
"ziggeo-client-sdk": "2.32.1"
}
- This would make your own repository use our 2.32.1 version of our system. In case our Vue SDK requires higher version that you have set up you would be alerted when you do
npm install
.
Changelog
- v0.1.0 upgraded to ziggeo 0.0.30 version and added screen recorder option
- v0.2.0 Fixed countdown related conflict
- v1.0.1 Upgraded
ziggeo-client-sdk
SDK to2.31.*
pre-release version. - v1.1.0 Upgraded
ziggeo-client-sdk
SDK to2.32.*
version. Fixed try/catch variable name conflict - v2.0.1 Added
embedding
argument for each method, read more... - v2.1.0 Added
applicationOptions
property which will accept application settingswebrtc_streaming
,webrtc_streaming_if_necessary
,webrtc_on_mobile
,auth
,debug
,testing_application
andscreenRecord
settings likechrome_extension_id
. Upgraded to Ziggeo stable r33 - v2.1.1 Upgraded
ziggeo-client-sdk
SDK to2.34.8
version. Fixed some bugs - v2.2.0 Upgraded
ziggeo-client-sdk
SDK to2.34.14
version. Added_key
parameter usability, fixed minor bug