Post
Ask Question

Video Recording In Asp.Net without opening file Dialog

Introduction

This blog is used to recording Your own video in ASP.Net(C#). Useful to all .Net Developer to Create a video recording in site.A marketing of your site. You can Update any news, product marketing, offer. Recording File Save in your Database. After some time you can play that video. Recording Video is Browser Compatibility.

This blog is useful to recording your own video in .Net.

How it Work

Step 1 : Adding Js and Css

A Video Recording Script Can Use To Add Your page in Load Script function and Css

  1. < script language = "JavaScript" src = "//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" > < /script> 
  2. <script language="JavaScript" src="/ / ajax.googleapis.com / ajax / libs / swfobject / 2.2 / swfobject.js "></script>  
  3. <script language="JavaScript " src=" //ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>  
  4. <script type = "text/javascript" src = "/jwplayer/jwplayer.js" > < /script>  
  5. <script language="JavaScript" src="scriptcam.js"></script >  
  6. < link href = "//ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery- ui.css" rel = "stylesheet" type = "text/css" / >  

Step 2: Adding Css Used in WebCam

Recording Button and volume control use the css in adding below code. To Website layout can change your css. Please make sure cssclass #webcam not adding backaground color white. it cannot display in chrome browser.

  1. < style type = "text/css" >  
  2. #webcam  
  3. {  
  4.     float: left;  
  5. }  
  6. #volumeMeter  
  7. {  
  8.     background - image: url('images/ledsbg.png');  
  9.     width: 19px;  
  10.     height: 133px;  
  11.     padding - top: 5px;  
  12. }  
  13. #volumeMeter img  
  14. {  
  15.     padding - left: 4px;  
  16.     padding - top: 1px;  
  17.     display: block;  
  18. }  
  19. .ui - slider  
  20. {  
  21.     background: none;  
  22.     background - image: url('images/trackslider.png');  
  23.     border: 0;  
  24.     height: 107px;  
  25.     margin - top: 16px;  
  26. }  
  27. .ui - slider.ui - slider - handle  
  28. {  
  29.     width: 14px;  
  30.     height: 32px;  
  31.     margin - left: 7px;  
  32.     margin - bottom: -16px;  
  33.     background: url(images / volumeslider.png) no - repeat;  
  34. }  
  35. #volumePanel  
  36. {  
  37.     -moz - border - radius: 0px 5px 5px 0px;  
  38.     border - radius: 0px 5px 5px 0px;  
  39.     background - color: #4B4B4B;  
  40.     width: 55px;  
  41.     height: 160px;  
  42.     -moz-box-shadow: 0px 3px 3px # 333333;  
  43.     - webkit - box - shadow: 0px 3px 3px #333333;  
  44.     shadow: 0px 3px 3px # 333333;  
  45. }  
  46. #setupPanel  
  47. {  
  48.     width: 400px;  
  49.     height: 30px;  
  50.     margin: 5px;  
  51. }  
  52. < /style>  

Step 3: Adding Script To Record Your Video.

The page load than ready function can laod scriptcam function to record video. To Flash player adding in your browser.To many function can recording video. such as startrecording,pause,closecamera etc.

  1. < script >  
  2. $(document).ready(function()  
  3. {  
  4.     $("#webcam").scriptcam({  
  5.         fileReady: fileReady,  
  6.         cornerRadius: 20,  
  7.         cornerColor: 'e3e5e2',  
  8.         onError: onError,  
  9.         promptWillShow: promptWillShow,  
  10.         showMicrophoneErrors: false,  
  11.         showDebug: true,  
  12.         onWebcamReady: onWebcamReady,  
  13.         setVolume: setVolume,  
  14.         timeLeft: timeLeft,  
  15.         fileName: 'demo557995',  
  16.         connected: showRecord  
  17.     });  
  18.     setVolume(0);  
  19.     $("#slider").slider({  
  20.         animate: true,  
  21.         min: 0,  
  22.         max: 100,  
  23.         value: 50,  
  24.         orientation: 'vertical',  
  25.         disabled: true  
  26.     });  
  27.     $("#slider").bind("slidechange", function(event, ui) {  
  28.         $.scriptcam.changeVolume($("#slider").slider("option", "value"));  
  29.     });  
  30. });  
  31. function showRecord()   
  32. {  
  33.     $("#recordStartButton").attr("disabled", false);  
  34. }  
  35. function startRecording()   
  36. {  
  37.     $("#recordStartButton").attr("disabled", true);  
  38.     $("#recordStopButton").attr("disabled", false);  
  39.     $("#recordPauseResumeButton").attr("disabled", false);  
  40.     $.scriptcam.startRecording();  
  41. }  
  42. function closeCamera()   
  43. {  
  44.     $("#slider").slider("option", "disabled", true);  
  45.     $("#recordPauseResumeButton").attr("disabled", true);  
  46.     $("#recordStopButton").attr("disabled", true);  
  47.     $.scriptcam.closeCamera();  
  48.     $('#message').html('Please wait for the file conversion to finish...');  
  49. }  
  50. function pauseResumeCamera()   
  51. {  
  52.     if ($("#recordPauseResumeButton").html() == 'Pause Recording')   
  53.     {  
  54.         $("#recordPauseResumeButton").html("Resume Recording");  
  55.         $.scriptcam.pauseRecording();  
  56.     }   
  57.     else   
  58.     {  
  59.         $("#recordPauseResumeButton").html("Pause Recording");  
  60.         $.scriptcam.resumeRecording();  
  61.     }  
  62. }  
  63. function fileReady(fileName)   
  64. {  
  65.     $('#recorder').hide();  
  66.     fileName2 = fileName.replace('mp4', 'gif');  
  67.     $('#message').html('The MP4 file is now dowloadable for five minutes over <a href="' + fileName + '">here</a>. The animated GIF can be downloaded <a href="' + fileName2 + '">here</a>.');  
  68.     var fileNameNoExtension = fileName.replace(".mp4", "");  
  69.     jwplayer("mediaplayer").setup({  
  70.         width: 320,  
  71.         height: 240,  
  72.         file: fileName,  
  73.         image: fileNameNoExtension + '_0000.jpg',  
  74.         tracks: [{  
  75.             file: fileNameNoExtension + '.vtt',  
  76.             kind: 'thumbnails'  
  77.         }]  
  78.     });  
  79.     $('#mediaplayer').show();  
  80. }  
  81. function onError(errorId, errorMsg)   
  82. {  
  83.     alert(errorMsg);  
  84. }  
  85. function onWebcamReady(cameraNames, camera, microphoneNames, microphone, volume)   
  86. {  
  87.     $("#slider").slider("option", "disabled", false);  
  88.     $("#slider").slider("option", "value", volume);  
  89.     $.each(cameraNames, function(index, text) {  
  90.         $('#cameraNames').append($('<option></option>').val(index).html(text))  
  91.     });  
  92.     $('#cameraNames').val(camera);  
  93.     $.each(microphoneNames, function(index, text) {  
  94.         $('#microphoneNames').append($('<option></option>').val(index).html(text))  
  95.     });  
  96.     $('#microphoneNames').val(microphone);  
  97. }  
  98. function promptWillShow()   
  99. {  
  100.     alert('A security dialog will be shown. Please click on ALLOW.');  
  101. }  
  102. function setVolume(value)   
  103. {  
  104.     value = parseInt(32 * value / 100) + 1;  
  105.     for (var i = 1; i < value; i++) {  
  106.         $('#LedBar' + i).css('visibility', 'visible');  
  107.     }  
  108.     for (i = value; i < 33; i++)   
  109.     {  
  110.         $('#LedBar' + i).css('visibility', 'hidden');  
  111.     }  
  112. }  
  113. function timeLeft(value)   
  114. {  
  115.     $('#timeLeft').val(value);  
  116. }  
  117. function changeCamera()   
  118. {  
  119.     $.scriptcam.changeCamera($('#cameraNames').val());  
  120. }  
  121. function changeMicrophone()   
  122. {  
  123.     $.scriptcam.changeMicrophone($('#microphoneNames').val());  
  124. }  
  125. < /script>  

 

Step 4: Html Page

The Html Page inside Body tag you can see the recording appearing to start and stop video.After Record Video can play video.

  1. < div id = "message" > < /div>  
  2. <div id="recorder">  
  3. <div id="webcam">  
  4. </div >  
  5. < div id = "volumePanel" style = "float:left;position:relative;top:10px;" >  
  6. < div id = "volumeMeter" style = "position:absolute;top:10px;left:7px;float:left;" >  
  7. < img id = "LedBar32" src = "ledred.png" >  
  8. < img id = "LedBar31" src = "ledred.png" >  
  9. < img id = "LedBar30" src = "ledred.png" >  
  10. < img id = "LedBar29" src = "ledred.png" >  
  11. < img id = "LedBar28" src = "ledred.png" >  
  12. < img id = "LedBar27" src = "ledred.png" >  
  13. < img id = "LedBar26" src = "ledred.png" >  
  14. < img id = "LedBar25" src = "ledred.png" >  
  15. < img id = "LedBar24" src = "ledred.png" >  
  16. < img id = "LedBar23" src = "ledred.png" >  
  17. < img id = "LedBar22" src = "ledred.png" >  
  18. < img id = "LedBar21" src = "ledred.png" >  
  19. < img id = "LedBar20" src = "ledgreen.png" >  
  20. < img id = "LedBar19" src = "ledgreen.png" >  
  21. < img id = "LedBar18" src = "ledgreen.png" >  
  22. < img id = "LedBar17" src = "ledgreen.png" >  
  23. < img id = "LedBar16" src = "ledgreen.png" >  
  24. < img id = "LedBar15" src = "ledgreen.png" >  
  25. < img id = "LedBar14" src = "ledgreen.png" >  
  26. < img id = "LedBar13" src = "ledgreen.png" >  
  27. < img id = "LedBar12" src = "ledgreen.png" >  
  28. < img id = "LedBar11" src = "ledgreen.png" >  
  29. < img id = "LedBar10" src = "ledgreen.png" >  
  30. < img id = "LedBar9" src = "ledgreen.png" >  
  31. < img id = "LedBar8" src = "ledgreen.png" >  
  32. < img id = "LedBar7" src = "ledgreen.png" >  
  33. < img id = "LedBar6" src = "ledgreen.png" >  
  34. < img id = "LedBar5" src = "ledgreen.png" >  
  35. < img id = "LedBar4" src = "ledgreen.png" >  
  36. < img id = "LedBar3" src = "ledgreen.png" >  
  37. < img id = "LedBar2" src = "ledgreen.png" >  
  38. < img id = "LedBar1" src = "ledgreen.png" >  
  39. < /div>  
  40.   
  41. <div id="slider" style="position:absolute;top:10px;left:30px;"> </div >  
  42.   
  43. < /div>  
  44. <br clear="both"/ >  
  45. < div id = "setupPanel" >  
  46. < img src = "webcamlogo.png" style = "vertical-align:text-top" / >  
  47.   
  48. < select id = "cameraNames" size = "1" onChange = "changeCamera()" style = "width:145px;font-size:10px;height:25px;" >  
  49. < /select>  
  50.   
  51. <img src="miclogo.png" style="vertical-align:text-top;padding-left:45px;"/ >  
  52.   
  53. < select id = "microphoneNames" size = "1" onChange = "changeMicrophone()" style = "width:128px;font-size:10px;height:25px;" >  
  54. < /select>  
  55.   
  56. </div >  
  57.   
  58. < br / >  
  59.   
  60. < button id = "recordStartButton" class = "btn btn-small" onclick = "startRecording()" disabled > Start Recording < /button>   
  61.   
  62. <span style="padding-left:5px;padding-right:5px;">  
  63.   
  64. Time left:  
  65.   
  66. <input type="text" id="timeLeft" style="width:50px;font-size:10px;">   
  67.   
  68. </span >  
  69.   
  70. < button id = "recordPauseResumeButton" class = "btn btn-small" onclick = "pauseResumeCamera()" disabled > Pause Recording < /button>  
  71.   
  72. <button id="recordStopButton" class="btn btn-small" onclick="closeCamera()" disabled>Stop Recording</button >  
  73.   
  74. < /div>  
  75. <div id="mediaplayer" style="display:none;"></div >  
  76. < /body>  
Next Recommended Reading Upload Video File, Audio File and Image File in SQL Server DB