Skip to content

Commit

Permalink
Merge pull request #13 from newrelic/develop
Browse files Browse the repository at this point in the history
v3.0.0 releases stable released
  • Loading branch information
mlychndnnr authored Feb 21, 2025
2 parents e7d6f4b + 152b875 commit a93b4f2
Show file tree
Hide file tree
Showing 8 changed files with 372 additions and 86 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,13 @@

All notable changes to this project will be documented in this file.

## [3.0.0] - 2025/02/20

### New Event Type Introduced [VideoAction, VideoErrorAction, VideoAdAction, VideoCustomAction]

- PageAction Deprecated.
- New Attributes Introduced.

## [0.3.0] - 2024/12/05

### Update
Expand Down
225 changes: 225 additions & 0 deletions DATAMODEL.md

Large diffs are not rendered by default.

48 changes: 48 additions & 0 deletions DEVELOPING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
[![Community Project header](https://github.com/newrelic/opensource-website/raw/master/src/images/categories/Community_Project.png)](https://opensource.newrelic.com/oss-category/#community-project)

# New Relic Bitmovin Tracker

New Relic video tracking for Bitmovin Player.

## Requirements

This video monitor solutions works on top of New Relic's **Browser Agent**.

## Build

Install dependencies:

```
$ npm install
```

And build:

```
$ npm run build:dev
```

Or if you need a production build:

```
$ npm run build
```

## Usage

Load **scripts** inside `dist` folder into your page.

```html
<script src="../dist/newrelic-video-bitmovin.min.js"></script>
```

```javascript
nrvideo.Core.addTracker(new nrvideo.BitmovinTracker(player));
```

## Release

- Create a PR.
- Once approved, Update the package version according to the semver rules.
- Update the CHANGELOG in the repo (all web repos have a changelog file).
- Create a github tag with the version.
121 changes: 59 additions & 62 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,80 +1,77 @@
[![New Relic Experimental header](https://github.com/newrelic/opensource-website/raw/master/src/images/categories/Experimental.png)](https://opensource.newrelic.com/oss-category/#new-relic-experimental)

# New Relic Bitmovin Tracker

New Relic video tracking for Bitmovin.

## Requirements

This video monitor solutions works on top of New Relic's **Browser Agent**.

## Build

Install dependencies:

```
$ npm install
[![Community Project header](https://github.com/newrelic/opensource-website/raw/master/src/images/categories/Community_Project.png)](https://opensource.newrelic.com/oss-category/#community-project)

# New Relic Bitmovin Tracker Agent

The New Relic Bitmovin Tracker enhances your media applications by tracking video events, playback errors, and other activities, providing comprehensive insights into performance and user interactions.

- The Bitmovin tracker is available as a ready-to-use JavaScript snippet for easy copy-paste integration.
- New Relic Bitmovin tracker auto-detects events emitted by Bitmovin Player.
- Ensure that the **Browser agent** is successfully instrumented before deploying the media tracker.
- For questions and feedback on this package, please visit the [Explorer's Hub](https://discuss.newrelic.com), New Relic's community support forum.
- Looking to contribute to the Player Name agent code base? See [DEVELOPING.md](./DEVELOPING.md) for instructions on building and testing the browser agent library, and Contributors.

## Adding The Bitmovin Tracker To Your Project

To integrate New Relic Tracker Agent into your web application effectively, you'll need to instrument the Browser Agent code first and then add the player script. Below is a guide on how to do this within your HTML file:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>New Relic Tracker Integration</title>
<script src="path/to/browser-agent.js"></script>
<!-- snippet code generated -->
<script src="path/to/Bitmovin-tracker.js"></script>
</head>
<body>
<!-- Your HTML content -->
</body>
</html>
```

And build:
## Instantiating the Bitmovin Tracker

```
$ npm run build:dev
```
```javascript
// Add a BitmovinTracker
nrvideo.Core.addTracker(new nrvideo.BitmovinTracker(player));

Or if you need a production build:
// For setting userId
nrvideo.Core.addTracker(new nrvideo.BitmovinTracker(player)).setUserId(
'userId'
);

```
$ npm run build
```
//For setting custom attributes const tracker
const tracker = new nrvideo.BitmovinjsTracker(player, {
customData: {
contentTitle: 'Override Existing Title',
customPlayerName: 'myGreatPlayer',
customPlayerVersion: '9.4.2',
},
});

## Usage

Load **scripts** inside `dist` folder into your page.

Init the tracker as follows:

```js
var conf = {
key: "...key...",
source: {
dash: "//bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
hls: "//bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8",
progressive: "//bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4",
poster: "//bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg"
}
};
// Init player
const player = new bitmovin.player.Player(document.getElementById('player'), conf);
// Init tracker
nrvideo.Core.addTracker(new nrvideo.BitmovinTracker(player))
// Load content
player.load(conf.source)
```
// For Sending custom Action with Attributes

### Report init errors
const tracker = new nrvideo.BitmovinTracker(player);

You can use bitmovin's promise error callback to report failed player setups:
nrvideo.Core.addTracker(tracker);

```js
player.load(conf.source).then(
player => {
console.log('Successfully created Bitmovin Player instance')
},
reason => {
console.log('Error while creating Bitmovin Player instance')
}
tracker.sendCustom('CUSTOM_ACTION', 'state time', {
test1: 'value1',
test2: 'value2',
});
```

### Buffering
## Data Model

If the players works with *progressive download* files (mp3, webm...) you may encounter `buffering` events after a seek, as that's the player behavior.
To understand which actions and attributes are captured and emitted by the Bitmovin Player under different event types, see [DataModel.md](./DATAMODEL.md).

## Support

New Relic has open-sourced this project. This project is provided AS-IS WITHOUT WARRANTY OR DEDICATED SUPPORT. Issues and contributions should be reported to the project here on GitHub.
New Relic hosts and moderates an online forum where customers can interact with New Relic employees as well as other customers to get help and share best practices. Like all official New Relic open source projects, there's a related Community topic in the New Relic [Explorer's Hub](https://discuss.newrelic.com).

We encourage you to bring your experiences and questions to the [Explorers Hub](https://discuss.newrelic.com) where our community members collaborate on solutions and new ideas.
We encourage you to bring your experiences and questions to the [Explorer's Hub](https://discuss.newrelic.com) where our community members collaborate on solutions and new ideas.

## Contributing

Expand All @@ -84,7 +81,7 @@ We encourage your contributions to improve New Relic Bitmovin Tracker! Keep in m

As noted in our [security policy](../../security/policy), New Relic is committed to the privacy and security of our customers and their data. We believe that providing coordinated disclosure by security researchers and engaging with the security community are important means to achieve our security goals.

If you believe you have found a security vulnerability in this project or any of New Relic's products or websites, we welcome and greatly appreciate you reporting it to New Relic through [HackerOne](https://hackerone.com/newrelic).
If you believe you have found a security vulnerability in this project or any of New Relic's products or websites, we welcome and greatly appreciate you reporting it to New Relic through [our bug bounty program](https://docs.newrelic.com/docs/security/security-privacy/information-security/report-security-vulnerabilities/).

## License

Expand Down
10 changes: 5 additions & 5 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"name": "newrelic-video-bitmovin",
"version": "0.3.0",
"version": "3.0.0",
"description": "New relic tracker for bitmovin",
"main": "src/index.js",
"scripts": {
"build": "webpack -p",
"build": "webpack --mode production",
"build:dev": "webpack --mode development",
"watch": "webpack -p --progress --color --watch",
"watch:dev": "webpack --progress --color --watch",
Expand All @@ -20,7 +20,7 @@
"author": "Jordi Aguilar",
"license": "MIT",
"dependencies": {
"newrelic-video-core": "git+https://github.com/newrelic/video-core-js.git#develop"
"newrelic-video-core": "github:newrelic/video-core-js#stable"
},
"devDependencies": {
"@babel/core": "^7.24.5",
Expand Down
3 changes: 3 additions & 0 deletions samples/sample.html
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,9 @@
progressive: "//bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4",
poster: "//bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg"
}
// source:{
// dash:'https://bitmovin-a.akamaihd.net/content/sintel/sintel.mpd'
// }
};

// Init player
Expand Down
38 changes: 22 additions & 16 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,41 +1,47 @@
var path = require("path");
var webpack = require("webpack");
var path = require('path');
var webpack = require('webpack');
var TerserPlugin = require('terser-webpack-plugin');

var pkg = require("./package.json");
var pkg = require('./package.json');
var license =
"@license " +
'@license ' +
pkg.license +
"\n" +
'\n' +
pkg.name +
" " +
' ' +
pkg.version +
"\nCopyright New Relic <http://newrelic.com/>" +
"\n@author " +
'\nCopyright New Relic <http://newrelic.com/>' +
'\n@author ' +
pkg.author;

module.exports = {
entry: "./src/index.js",
entry: './src/index.js',
output: {
path: path.resolve(__dirname, "./dist"),
filename: pkg.name + ".min.js",
library: "nrvideo",
libraryTarget: "umd",
path: path.resolve(__dirname, './dist'),
filename: pkg.name + '.min.js',
library: 'nrvideo',
libraryTarget: 'umd',
},
devtool: "source-map",
devtool: 'source-map',
module: {
rules: [
{
test: /\.(?:js|mjs|cjs)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
loader: 'babel-loader',
options: {
presets: [["@babel/preset-env", { targets: "defaults" }]],
presets: [['@babel/preset-env', { targets: 'defaults' }]],
},
},
},
],
},
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},

plugins: [
new webpack.BannerPlugin({
banner: license,
Expand Down

0 comments on commit a93b4f2

Please sign in to comment.