vendredi 24 mars 2017

Upload/Write file to server ASP.NET and Video.JS

I am creating webm/video of users' web-camera using Video.JS my goal is to save the generated video to a file in a designated folder on the server. I have tried different methods such as: BinaryWritter, MemoryBuffer, StreamWritter but unfortunately only 1 KB of the video gets written to the file.

According to Video.JS on GitHub in a Chrome Browser Video.JS generates objects containing properties for both Audio and Video whereas in Firefox Video.JS generates a blob object

The desired outcome is as follows:

Capture users' webcam Done Save users' video to server without using FileUploadControl that is the video should get uploaded to the server automatically I haven't found a solution yet. Could you please help me to achieve the second goal.

Default.aspx

<form id="form1" runat="server">
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <video id="myVideo" class="video-js vjs-default-skin"></video>

            <!-- Video.js & AJAX POST -->
            <script type="text/javascript">
                var player = videojs("myVideo",
                {
                    controls: true,
                    width: 320,
                    height: 240,
                    plugins: {
                        record: {
                            audio: true,
                            video: true,
                            maxLength: 10,
                            debug: true
                        }
                    }
                });

                player.on('deviceError', function () {
                    console.log('device error:', player.deviceErrorCode);
                });
                player.on('error', function (error) {
                    console.log('error:', error);
                });

                player.on('startRecord', function () {
                    console.log('started recording!');
                });

                player.on('finishRecord', function () {
                    console.log('finished recording: ', player.recordedData);

                    $.ajax({
                        type: 'POST',
                        url: 'http://ift.tt/2n4q9k8',
                        data: "{recordedVideo:" + JSON.stringify("testName") + "}",
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        success: function (r) {
                            /*alert(r.d.Name);
                            alert(r.d.Population);*/
                            alert(r.d);
                        }
                    });
                });
            </script>
            <!-- END OF Video.js & AJAX POST -->
        </div>
    </div>
</div>

WebMethod

[System.Web.Services.WebMethod]
public static string GetVideo(RecordedVideo recordedVideo)
{
    var binFormatter = new BinaryFormatter();
    var stream = new MemoryStream();
    binFormatter.Serialize(stream, recordedVideo.Video);

    byte[] b = new byte[stream.Length];
    b = stream.ToArray();

    MemoryStream ms = new MemoryStream(b);

    using (FileStream fs = new FileStream(HttpContext.Current.Server.MapPath(".\\uploadedVideos\\test.webm"), FileMode.Create, System.IO.FileAccess.Write))
    {
        ms.Read(stream.ToArray(), 0, (int)ms.Length);
        fs.Write(stream.ToArray(), 0, (int)ms.Length);
        fs.Close();
        ms.Close();
    }
}

RecordedVideo Class

namespace WebApplication1
{
public class RecordedVideo
{
    private object name;

    public object Name
    {
       get { return name; }
       set { name = value; }
   }
}

} Your help is much appreciated.

Best Regards




Aucun commentaire:

Enregistrer un commentaire