Video recording applets SDK, v.2.2

  1. Introduction

  2. Video Recording Applet SDK package

  3. Target platform

  4. Video recording applet functionality

  5. Installation

  6. Applet GUI

  7. Applet GUI customization

  8. Video file uploading to the server

  9. Video file name setting

  10. Video recording applet parameters

  11. Public recording applet methods which can be invoked from the JavaScript

  12. Video quality setting

  13. POST variables sending to the server

  14. Watermarking of videos

  15. "Photo camera" mode

  16. "Audio recorder" mode

  17. Status messages processing

  18. How to register the applet

  19. Translation of applet messages on the national languages

  20. Video cameras use

  21. Troubleshooting

Introduction

Video Recording Applet SDK is designed to record the video from the web site in Mp4 format and upload video file to the web server via HTTP. Also, applet captures the images and saves them on the server in JPEG format ("photo camera" mode).

Recorded video file in Mp4 format contains the video in H.264 and audio in AAC formats. To video and audio encoding the x.264 and FAAC encoders are used correspondingly. Video&audio capture, encoding/decoding, image capture and JPEG encoding are implemented as native methods in the video module which will be installed on the client computer when user uses the applet for the first time. The applet is digitally signed.

 

TOP

Video Recording Applet SDK package

  1. VideoApplet.jar - video recording applet.
  2. help.html, videoapplgui.PNG - on-line help.
  3. jvideoWin.tar, jvideoMac_ppc.tar, jvideoMac_x86.tar- video module with native methods and corresponding jvideoWin.hash.txt , jvideoMac_ppc.hash.txt , jvideoMac_x86.hash.txt .
  4. overlayImageLarge.png, overlayImageSmall.png - examples of images for watermarking of video.
  5. retrieve_v.php - server script in PHP.
  6. localization.xml - this file contains all messages and text which are used in the applet. It can be used to national languages translation.
  7. VideoApplet_large.html, VideoApplet_small.html, VideoApplet_compact.html, VideoApplet_photo.html - examples.
  8. Video recording applets SDK User's Guide.html .
  9. Licence_Agreement.html .

TOP

Target platform

Target OS Platform: 2000/ME/XP/2003/Vista/Win7, Mac OS 10.5/10.6

Target browsers:

- on the Windows: Microsoft Internet Explorer 4.0 and up, FireFox, Mozilla, Opera, Safari.

- on the Mac: Safari, FireFox.

Java versions: Java plug-in 1.5 -1.6.

Web Servers: Unix, Microsoft which support PHP.

TOP

Video recording applet functionality

  1. Video recording in Mp4 format (video in H.264, audio in AAC formats). Recording with audio track only is possible.
  2. Playback of recorded video file for video/audio quality and content evaluation.
  3. Uploading of Mp4 file to web server via HTTP. The PHP server script is used to receive Mp4 file on the server. Server script saves video file in the folder specified as applet parameter.
  4. Image capturing in JPEG format and saving it on the server ("Photo camera" mode).

Video recording applet supports web cameras and DV cameras.

Note! Non-licensed applet works in the Demo mode. In the Demo mode applet records 20 sec video only. Also, in the "Photo camera"/Demo mode captured images are watermarked.

To get applet working in the full functional mode you should buy the license. VIMAS Technologies team will send you registration key ( small txt file). After the registration applet will work in the full functional mode without 20 sec limitation and without watermarking of captured images. More info is here How to register the applet

 

TOP

Installation

  1. Create on the server the /recorder folder. For example: www.vimas.com/recorder/.
  2. Put into /recorder folder the following files:
  3. Create on the server the folder for videofiles storing. For example: www.vimas.com/videofiles/
  4. In the "VideoServerFolder" applet parameter define the full path to that folder. For example: <PARAM NAME = "VideoServerFolder" VALUE = "http://www.vimas.com/videofiles/">
  5. In the "UserServerFolder" applet parameter define the subfolder name ( it will be created in the VideoServerFolder folder). For example <PARAM NAME = "UserServerFolder" VALUE = "user1"> . In this case in the /videofiles/ folder the subfolder /user1/ will be created and video/image files will be saved there. The saving of video/image files into subfolders can be usefull in case if each registered web site visitor have to save the recorded video/image in to personal subfolder.
  6. Define the full path to server script. For example: <PARAM NAME = "ServerScript" VALUE = "http://www.vimas.com/recorder/retrive_v.php">
  7. Server script must have the permission to save the video files on the server. It is important! Please, check it. To set permissions use chmod 755 instruction .
  8. To test video recording applet, open VideoApplet_large.html (VideoApplet_small.html, VideoApplet_compact.html, VideoApplet._photo.html) on the client computer.

In case if you need to put VideoApplet.jar and web page are in the different folders – path to applet must be defined in the CODEBASE applet parameter.

Note!

  • jvideoWin.tar,
  • jvideoMac_ppc.tar,
  • jvideoMac_x86.tar,
  • jvideoWin.hash.txt ,
  • jvideoMac_ppc.hash.txt ,
  • jvideoMac_x86.hash.txt
  • always must be in the same folder with VideoApplet.jar.

    TOP

    Applet GUI

     

    Fig.1

     

     

     

     

     

    Fig.2

    1. Options. Here you can choose the video quality - Low, Normal, High and input audio / video devices.
    2. Indicator of buffer filling during recording. Indicator of current position in the file during playback.
    3. Playback.
    4. Status messages field.
    5. Record.
    6. Pause.
    7. Stop.
    8. Current recording time.
    9. Maximal recording time during recording / video file lenght during playback.
    10. Upload video to server.
    11. Audio input level indicator. Recomended input level is in green zone. You can change input volume by using sound mixer on the Windows or in the system preferences/sound on the Mac.
    12. Video screen.
    13. Help.

    The size of video frame on the Fig.1 is 320x240 pixels. You can change the size of video field to 176õ144 pixels, Fig.2

    To change the size of video field use "FrameSize" applet parameter.

    < PARAM NAME = "FrameSize" VALUE = "small" > - frame size is 176õ144 pixels.

    < PARAM NAME = "FrameSize" VALUE = "large" > - frame size is 320 x 240 pixels.

    The examples are VideoApplet_large.html and VideoApplet_small.html.

     

    TOP

    Applet GUI customization

    You can hide buttons, indicator of buffer filling, menu and use JavaScript buttons, like on the Fig.3 and Fig.4 below. Use the following applet parameter:

    < PARAM NAME = "interface" VALUE = "compact" >

    If applet parameter "interface" is absent, the GUI will be like on the Fig.1 or Fig.2.

    Fig.3

     

     

    Fig.4

     

    "Compact" interface allows to create interaction between your web application and applet via JavaScript functions. Also, you can create your own images of buttons corresponding to your web site style.

    To show the menu ( Options, Help ) in Compact mode, add to the applet parameter the following:

    < PARAM NAME = "showMenu" VALUE = "true" >

    Note! "showMenu" applet parameter works in Compact mode only.

    In the VideoApplet_compact.html example you can find all JavaScript functions which invoke the applet methods.

     

    TOP

    Video file uploading to the server

    Applet records video and saves it into the temporary file, then uploads it to server by using HTTP POST method. On the server side the retrive_v.php server script receives mp4 file. If the file is too large, applet divides it on parts and uploads each part separately. The size of each part in bytes is defined by BlockSize applet parameter.

    Example: <PARAM NAME = "BlockSize" VALUE = "20480">

    Applet uploads video file into the folder, defined by VideoServerFolder and UserServerFolder parameters, like http://www.yourdomain.com/videofiles/User1/

    Applet uploads images to the server in the same manner as video files.

    TOP

    Video file name setting

    1. Regular interface, Fig. 1, Fig.2.

    You have 2 options to set the name of the video/image file.

    a) You can type video/image file name in the pop-up window, which appears when you push "Upload video to server" button (10).

    b) You can pass video/image file name from web page to applet. So, user should not type file name in the pop-up window. To pass video/image file name from web page to applet and eliminate pop-up window, you can use setFileName() JavaScript function . You can see it in the VideoApplet_large.html and VideoApplet_small.html examples. To use setFileName(), please, uncomment it. Use file name as argument for setFileName().

     

    2. "Compact" interface, Fig.3, Fig.4.

    You can pass video/image file name from web page to applet. Use UPLOAD_VIDEO( String filename ) applet method.

    The example of using UPLOAD_VIDEO( String filename ) :

    function UPLOAD_RP() {
    document.VimasVideoApplet.UPLOAD_VIDEO(String(document.Gui_RP.FileName.value));
    }

    Also, see it in the VideoApplet_compact.html example.

    TOP

     

     

    Video recording applet parameters

     

    Applet parameter name Parameter value Parameter description
    "ServerScript" e.g. "http://www.vimas.com/recorder/retrive.php" Server script URL
    "VideoServerFolder"

    e.g. "http://www.vimas.com/videofiles/user1/retrive.php"

    URL of server folder for the video files storing.
    "TimeLimit " 1...N seconds N – is maximal recording time in the seconds. It is hardcoded in the license file.
    "Registration" a) “Demo”

    b) Name of file with registration key. For example, “RegKey.txt”
    a) Applet works as demo, the maximal recording time is 20 sec. If Registration parameter is absent, applet works as demo, too.
    b) The registration key file you will receive after licensing. File must be located on the server in the same directory with applet.
    "BlockSize" E.g. 10240 Applet uploads audiofile portion by portion. This parameter defines the size of portion in bytes.
    "UserPostVariables" Variable names. Ex: "name,age,city" The names of variables to upload to server with voice file. Please, see How to send variables to server with audio file

    "UserServerFolder"

    e.g. "User1"

    Defines the subfolder which is in the VideoServerFolder.

    "FrameSize" "small" or "large" Defines the size of frame. "small" - 176õ144 pixels, "large" - 320x240 pixels.

    "LowQuality , "NormalQuality" "HighQuality"

    e.g. "96,24", "160,32" "256,48" correspondingly. These values are recommended for "large" frame size.

    "32,24", "64, 32", "128,48" - recommended values for "small" frame size.

    Defines the quality of video and audio. First value - video bitrate in kbps, second value - audio bitrate in kbps.
    "PhotoQuality" 0.0....1.0 This parameter defines the quality of JPEG image when applet works in "photo camera" mode
    "interface" "compact" This parameter makes interface like on the Fig.3 and Fig.4
    "showMenu" "true" It allows to show the Option and Help menu if GUI like on the Fig.3 and Fig.4 . In case if "showMenu" applet parameter is "false" or absent the menu is hidden. "showMenu" applet parameter works only if "interface"applet parameter is "compact".
    "OverlayImageURL" e.g "http://vimas.com/testVideo/overlayImage.png" This parameter defines the URL of image for watermarking of video.
    "NoVideo" "true" Switch off the video recording. Applet records audio only. If applet parameter is "false" or it is absent, applet records video and audio.

     

    TOP

    Public recording applet methods which can be invoked from the JavaScript

    Applet methods Applet action
    RECORD_VIDEO()
    Start to record video clip
    PLAY_VIDEO() Start to play recorded video clip
    PAUSE_VIDEO() Record/Playback pause
    STOP_VIDEO() Record/Playback stop
    UPLOAD_VIDEO( String filename ) Uploads video/image file on the web server.
    jPhoto () Captures still image
    ERASE_PHOTO () Erases still image in case if user does not like it

     

    Video/audio quality setting

    User can choose the quality of video/audio recording in the menu "Option". In the menu 3 levels of video/audio quality are offered: Low, Normal and High. The video/audio quality levels are defined in the applet parameters "LowQuality" , "NormalQuality" "HighQuality" by using video/audio bitrates. If these applet parameters are absent, default parameters will be used. They are in the table below.

    Quality parameter

    Large frame size. Video,audio in kbps

    Small frame size. Video,audio in kbps

    LowQuality 96, 24 32, 24
    NormalQuality 160, 32 64, 32
    HighQuality 256, 48 128, 48

    To set the image quality in the "Photo camera" mode use "PhotoQuality" applet parameter. Its value should be in the range 0... 1.0

    TOP

     

    POST variables sending to the server

    SENDING

    You can send your own POST variables with video file via applet parameters by using:

    1. Declare your variables names in UserPostVariables applet parameter:
      Example: <PARAM NAME = "UserPostVariables" VALUE = "name,country">
    2. Define every variable with it's applet parameter.
      Example: <PARAM NAME = "name" VALUE = "miha">
      <PARAM NAME = "country" VALUE = "Ukraine">
    3. NOTE! Every parameter, which is declared in UserPostVariables variables, should have it's own parameter with it's value.

      NOTE! If video file transmitted to server portion by portion, the variables will be sent with each portion.

     

    PROCESSING ON THE SERVER

    You can process video file variables in the retrieve_v.php. For example, this code will print all received variables:

    while(list($key,$val)=each($_POST))
    {
    AddLogs($errfile,"POST variable received >".$key." = ".$val);
    }

    ADDITIONAL INFORMATION

    1. Video file and all variables are retrieved by server script by POST request.
    2. Once you've set up variable you cannot undefine or redefine it.

    TOP

     

    Watermarking of videos

    To make watermarking of video ( e.g. put on the video the logo of your company or advertisement ) you should prepare the picture in the PNG format on the transparent background. The size of picture should be the same as frame size. Put this picture on the server and add to the applet call the following applet parameter:

    < PARAM NAME = "OverlayImageURL" VALUE = "http://path_to_folder_with_image/ImageName.png" >

    Note! The top-left corner of picture will be superposed with top-left corner of video frame.

     

    "Photo camera" mode

    The Video Recording Applet can be used on the web site to make a photo ( to capture the image in JPEG format) and save it on the server. To understand how to use Video Recording Applet in the "Photo camera" mode please use the example web page VideoApplet_photo.html.

    To pass image file name from the web page to applet, please use UPLOAD_VIDEO( String filename ) method in the same manner as in video recording mode.

    To set image quality use "PhotoQuality" applet parameter. Its value should be in the range 0... 1.0

    In the "Photo camera" mode applet uses 2 specific buttons: "Photo" and "Erase" . To make photo click on the "Photo" button. If you do not like the photo you did, click on the "Erase" button and make photo again.

    In case if applet works in the demo mode, the captured image will be with special watermarking. After licensing of applet this watermarking will be removed automatically.

    TOP

     

    "Audio recorder" mode

    Video Recording Applet can record audio only, without video. In this case the Mp4 file will contain the audio track only.

    Applet can record audio only in a few cases:

    1. No camera connected to computer or camera is used by another application.

    2. User choosed "No device" in the menu Option->Video device.

    3. Web site developer set the following applet parameter:

    <PARAM NAME = "NoVideo" value="true">

    Note! In case 3 the field for video frame will be hidden.

    So, if you want to use Video Recording Applet as Audio Recording Applet, the case 3 is recommended.

     

    TOP

     

    Status messages processing

    Status messages are displayed in the status messages field. Also, a few messages can be passed from applet to special JavaScript function SetStatus(num,s). So, web site developer can intercept these status messages to use them as events to synchronize the applet work with other elements of web page.

    Message Code of message
    Start upload
    0
    File uploaded
    1
    Start record
    2
    Start play
    3
    Pause
    4
    Stopped
    5
    Ready
    6

    TOP

    How to register the applet

    The video recording applet can be used in the demo or full functional mode. To use applet in demo mode , you should add to applet parameters the following parameter:

    <PARAM NAME = "Registration" VALUE = "Demo">

    Applet also works in demo mode if "Registration" parameter is absent.

    In demo mode the applets will work with limited to 20 sec recording (playback) time. In the "Photo camera" mode the captured images in demo mode are watermarked.

    It is single difference between demo and full functional applet modes.

    To use applet as full functional you must :

    TOP

    Translation of applet messages on the national languages

     

    All applet text messages are collected in the localization.xml file. You can translate them on the any languagel.

    The localization.xml file have to be located on the server. The path to this file have to be defined in the "LocalizationFile" applet parameter. For instanse:

    <PARAM NAME = "LocalizationFile" VALUE = "http://vimas.com/recorder/video/localization.xml">

    If this applet parameter is absent, english text messages will be used. They are hardcoded in the applet.

    The Help is in the help.html file. So, you can create your own help.html file in your national language.

    Note! Do not change the file name. Applet always calls help.html file.

    TOP

     

    Video cameras use

    Video Recording Applet supports web video cameras and DV cameras.

    Applet supports almost all types of web video cameras. If you have problems with some type of web video camera, please inform us.

    You can use the DV camera in the following ways:

    a) real time passing video from DV camera to computer and recording video by Video Recording Applet ( it is the same as you use web camera).

  • connect DV camera to computer via FireWire ( IEEE 1394 ) port,
  • open web page with video recording applet,
  • choose in the Option applet menu the DV camera as video input device and audio input device,
  • push Record button on the DV camera. You will see the video on the applet screen in preview mode,
  • click Record button on the applet control panel. The recording of video by applet will be started,
  • to stop record click on the Stop button of applet and switch off the DV camera.
  •  

    b) passing prerecorded video from DV camera to computer and recording video by Video Recording Applet .

  • connect DV camera to computer via FireWire ( IEEE 1394 ) port,
  • open web page with video recording applet,
  • choose in the Option applet menu the DV camera as video input device and audio input device,
  • push Play button on the DV camera. You will see the video on the applet screen in preview mode,
  • click Record button on the applet control panel. The recording of video by applet will be started,
  • to stop record click on the Stop button of applet and switch off the DV camera.
  • TOP

     

    Troubleshooting

    1.Applet does not appear in the browser.

    a) Check if Java plug-in is installed on your computer.

    b) Check, if applet using in the browser is permitted.

    c) Check if applet file VideoApplet.jar is located on the server in the same folder with web page which calls the applet.

    2. Video module could not be loaded.

    a) Check if jvideoWin.tar and jvideoMac_ppc.tar, jvideoMac_x86.tar and jvideoWin.hash.txt , jvideoMac_ppc.hash.txt , jvideoMac_x86.hash.txt are on the server in the same folder with VideoApplet.jar applet file.

    b) Check if it is possible to download jvideoWin.tar or jvideoMac_ppc.tar, jvideoMac_x86.tar from server via browser. Enter to address field of browser the URL of jvideoWin.tar. For instanse:

    http://www.vimas.com/recorder/jvideoWin.tar. If browser can not download that file, applet also can not do it. Figure out why jvideoWin.tar can not be downloaded.

    3. No video in the applet window.

    a) Check if video camera is connected to your computer.

    b) Check video camera with other application. Note! applet will not work if video camera captured by other program.

    4. Video file can not be loaded.

    a) Check if in the "ServerScript" applet parameter the correct path to retrive_v.php is defined.

    b) Check ifon the server the file saving is permitted to folder and subfolder which are defined in the "VideoServerFolder" and "UserServerFolder".

    c) Server script retrive_v.php is developed in PHP. So, check if server supports the PHP.

    TOP

    For support: info@vimas.com