Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ability to set font size and color in setOSD and createOSD methods. #326

Merged
merged 6 commits into from
Jun 14, 2024
Merged

Ability to set font size and color in setOSD and createOSD methods. #326

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
781b0c6
feat: set osd support font size and font color
RotemDoar Jun 10, 2024
4ecc50f
feat: create osd support date and time, font size and font color.
RotemDoar Jun 10, 2024
66988aa
adding colorspace option to createOSD and setOSD set font color.
RotemDoar Jun 11, 2024
429e14e
remove prettier ignore
RotemDoar Jun 11, 2024
a52d665
fix lint
RotemDoar Jun 11, 2024
6236882
fix options details
RotemDoar Jun 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 79 additions & 25 deletions lib/media.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1244,36 +1244,72 @@ module.exports = function(Cam) {
};

/**
* CreateOSD
* ONVIF can handle custom positons, date/time, text, font sizes, transparency, images etc. We only support Plain Text
* @param {Object} [options]
* @param {string} [options.videoSourceConfigurationToken] Token of the Video Source Configuration, which has associated OSDs. Defaults to Active Source
* @param {string} [options.plaintext] Text to overlay
* @param {string} [options.position] UpperLeft, UpperRight, LowerLeft or LowerRight. Default LowerLeft (custom mode currently not implemented)
* @param {Cam~GetOSDOptionsCallback} callback
*/
* CreateOSD
* ONVIF can handle custom positons, date/time, text, font sizes, transparency, images etc.
* Support - Plain Text, DateAndTime, Font size and Font color.
* @param {Object} [options]
* @param {string} [options.videoSourceConfigurationToken] Token of the Video Source Configuration, which has associated OSDs. Defaults to Active Source
* @param {object|string} [options.position] String options: UpperLeft, UpperRight, LowerLeft or LowerRight. Default LowerLeft. Or an object with x and y position
* @param {number} [options.position.x] x position of OSD, range: -1 to 1, counting from left to right
* @param {number} [options.position.y] y position of OSD, range: -1 to 1, counting from up to down
* @param {string} [options.plaintext] Plain text to overlay
* @param {string} [options.dateFormat] Date to overlay. Must be used with timeFormat, otherwise plaintext will be used.
* @param {string} [options.timeFormat] Time to overlay. Must be used with dateFormat, otherwise plaintext will be used.
* @param {number} [options.fontSize] The text font size.
* @param {string} [options.colorspace] Colorspace - RGB or YCbCr. Default RGB.
* @param {object} [options.fontColor] The color of the text font (OSDColor), should be object with properties - X, Y, Z.
* @param {float} [options.fontColor.X] For RGB means R value, For YCbCr means Y value.
* @param {float} [options.fontColor.Y] For RGB means G value, For YCbCr means Cb value.
* @param {float} [options.fontColor.Z] For RGB means B value, For YCbCr means Cr value.
* @param {Cam~GetOSDOptionsCallback} callback
* @example
* await cam.createOSD({
* position: "LowerLeft",
* timeFormat: "HH:mm:ss",
* dateFormat: "YYYY-MM-DD",
* fontSize: 1,
* colorspace: "RGB",
* fontColor: {
* X: 1,
* Y: 0.7,
* Z: 0.9,
* }
* });
*
*/
Cam.prototype.createOSD = function(options, callback) {
if (callback === undefined) { callback = options; options = {}; }
let mediaType = (this.media2Support ? 'media2' : 'media');
let mediaNS = (this.media2Support ? 'http://www.onvif.org/ver20/media/wsdl' : 'http://www.onvif.org/ver10/media/wsdl');
this._request({
service: mediaType
, body: this._envelopeHeader() +
`<wsdl:CreateOSD xmlns:wsdl="${mediaNS}" xmlns:sch="http://www.onvif.org/ver10/schema">
`<wsdl:CreateOSD xmlns:wsdl="${mediaNS}" xmlns:sch="http://www.onvif.org/ver10/schema">
<wsdl:OSD token="">
<sch:VideoSourceConfigurationToken>${(options.videoSourceConfiguationToken || this.activeSource.videoSourceConfigurationToken)}</sch:VideoSourceConfigurationToken>
<sch:Type>Text</sch:Type>
<sch:Position>
<sch:Type>${options.position || 'LowerLeft'}</sch:Type>
</sch:Position>
<sch:TextString IsPersistentText="false">
<sch:Type>Plain</sch:Type>
<sch:PlainText>${options.plaintext}</sch:PlainText>
</sch:TextString>
<sch:VideoSourceConfigurationToken>${options.videoSourceConfiguationToken || this.activeSource.videoSourceConfigurationToken}</sch:VideoSourceConfigurationToken>
<sch:Type>Text</sch:Type>
<sch:Position>
<sch:Type>${ typeof options.position === "object" ? "Custom" : options.position ? options.position : "LowerLeft"}</sch:Type>
${typeof options.position === "object" ? '<sch:Pos x="' + options.position.x + '" y="' + options.position.y + '"/>' : ""}
</sch:Position>
<sch:TextString IsPersistentText="false">
${ options.dateFormat && options.timeFormat ?
`<sch:Type>DateAndTime</sch:Type>
<sch:DateFormat>${options.dateFormat}</sch:DateFormat>
<sch:TimeFormat>${options.timeFormat}</sch:TimeFormat>`
: `<sch:Type>Plain</sch:Type>
<sch:PlainText>${options.plaintext}</sch:PlainText>`}

${options.fontSize ? `<sch:FontSize>${options.fontSize}</sch:FontSize>` : ""}
${ options.fontColor && options.fontColor.X && options.fontColor.Y && options.fontColor.Z ?
`
<sch:FontColor>
${ '<sch:Color Z="' + options.fontColor.Z + '" Y="' + options.fontColor.Y + '" X="' + options.fontColor.X + '" Colorspace="' + `${ options.colorspace === "YCbCr" ? "http://www.onvif.org/ver10/colorspace/YCbCr" : "http://www.onvif.org/ver10/colorspace/RGB" }` + '"/>' }
</sch:FontColor>` : "" }
</sch:TextString>
</wsdl:OSD>
</wsdl:CreateOSD>` +

this._envelopeFooter()
this._envelopeFooter(),
}, function(err, data, xml) {
if (callback) {
callback.call(this, err, err ? null : linerase(data), xml);
Expand All @@ -1283,7 +1319,8 @@ module.exports = function(Cam) {

/**
* SetOSD
* ONVIF can handle custom positons, date/time, text, font sizes, transparency, images etc. Both Plain Text and DateAndTime are supported.
* ONVIF can handle custom positons, date/time, text, font sizes, transparency, images etc.
* Support - Plain Text, DateAndTime, Font size and Font color.
* @param {Object} options
* @param {Object} options.OSDToken
* @param {string} [options.videoSourceConfigurationToken] Token of the Video Source Configuration, which has associated OSDs. Defaults to Active Source
Expand All @@ -1293,7 +1330,14 @@ module.exports = function(Cam) {
* @param {string} [options.plaintext] Plain text to overlay
* @param {string} [options.dateFormat] Date to overlay. Must be used with timeFormat, otherwise plaintext will be used.
* @param {string} [options.timeFormat] Time to overlay. Must be used with dateFormat, otherwise plaintext will be used.
* @param {number} [options.fontSize] The text font size.
* @param {string} [options.colorspace] Colorspace - RGB or YCbCr. Default RGB.
* @param {object} [options.fontColor] The color of the text font (OSDColor), should be object with properties - X, Y, Z.
* @param {float} [options.fontColor.X] For RGB means R value, For YCbCr means Y value.
* @param {float} [options.fontColor.Y] For RGB means G value, For YCbCr means Cb value.
* @param {float} [options.fontColor.Z] For RGB means B value, For YCbCr means Cr value.
* @param {Cam~GetOSDOptionsCallback} callback
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And here link to createOSD method:

* @see {Cam~createOSD}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added the link to create osd method.

* @see {Cam~createOSD}
*/
Cam.prototype.setOSD = function(options, callback) {
let mediaType = (this.media2Support ? 'media2' : 'media');
Expand All @@ -1317,10 +1361,20 @@ module.exports = function(Cam) {
<sch:DateFormat>${options.dateFormat}</sch:DateFormat>
<sch:TimeFormat>${options.timeFormat}</sch:TimeFormat>`
: `<sch:Type>Plain</sch:Type>
<sch:PlainText>${options.plaintext}</sch:PlainText>`}
</sch:TextString>
</wsdl:OSD>
</wsdl:SetOSD>` +
<sch:PlainText>${options.plaintext}</sch:PlainText>`}
${
options.fontSize ?
`<sch:FontSize>${options.fontSize}</sch:FontSize>` : ''
}
${ options.fontColor && options.fontColor.X && options.fontColor.Y && options.fontColor.Z ?
`
<sch:FontColor>
${ '<sch:Color Z="' + options.fontColor.Z + '" Y="' + options.fontColor.Y + '" X="' + options.fontColor.X + '" Colorspace="' + `${ options.colorspace === "YCbCr" ? "http://www.onvif.org/ver10/colorspace/YCbCr" : "http://www.onvif.org/ver10/colorspace/RGB" }` + '"/>' }
</sch:FontColor>` : "" }
</sch:TextString>
</wsdl:OSD>
</wsdl:SetOSD>` +

this._envelopeFooter(),
},
function(err, data, xml) {
Expand Down