Question

我用HTML创建了一个录音机。首先，它将请求流，在允许请求流之后它将显示两个按钮，如“开始”和“停止”。录制后，它会将blob URL转换为base64数据。

现在我想要的是，我有一个表SQLserver我想在该表中存储base64数据。我正在使用ASP .NET MVC创建此网页。 base64数据是javascript。我不知道如何连接到服务器。

请帮帮我。

感谢。

Html页面代码：

  <body>
  <h1> Audio Recorder</h1>
  <p> For now it is supported only in Firefox(v25+) and Chrome(v47+)</p>
  <div id='gUMArea'>
  <div>
  Record:
  </div>
  <button class="btn btn-default mediaAudio" id='gUMbtn'>Request Stream</button>
  </div>
  <div id='btns'>
  <button class="btn btn-default" id='start'>Start</button>
  <button class="btn btn-default" id='stop'>Stop</button>
  </div>
  <div>
  <ul class="list-unstyled" id='ul'></ul>
  </div>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="~/script.js"></script>
  </body>

JavaScript代码：

  'use strict'

  let log = console.log.bind(console),
  id = val => document.getElementById(val),
  ul = id('ul'),
  gUMbtn = id('gUMbtn'),
  start = id('start'),
  stop = id('stop'),
  stream,
  recorder,
  counter=1,
  chunks,
  media;


  gUMbtn.onclick = e => {
  let mv = id('.mediaAudio'),
  mediaOptions = {
  audio: {
  tag: 'audio',
  type: 'audio/mpeg',
  ext: '.mp3',
  gUM: {audio: true}
  }
  };
  media = mediaOptions.audio;
  navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => {
  stream = _stream;

  id('btns').style.display = 'inherit';
  start.removeAttribute('disabled');
  recorder = new MediaRecorder(stream);
  recorder.ondataavailable = e => {
  chunks.push(e.data);
  if (recorder.state == 'inactive') saveLink()
  };
  log('got media successfully');
  }).catch(log);
  }

  start.onclick = e => {
  start.disabled = true;
  stop.removeAttribute('disabled');
  chunks=[];
  recorder.start();
  }


  stop.onclick = e => {
  stop.disabled = true;
  recorder.stop();
  start.removeAttribute('disabled');
  }

  function saveLink() {

  let blob = new Blob(chunks, { type: media.type })
  ;
  var reader = new window.FileReader();
  reader.readAsDataURL(blob);
  reader.onloadend = function () {
  var base64data = reader.result;
  console.log(base64data.substr(base64data.indexOf(',') + 1));
  alert(base64data.substr(base64data.indexOf(',') + 1));
  }
  }

现在它在 base64data 变量中有base64数据，我想存储这个变量sql server。

问候。

Answer 1

您的解决方案包含两部分：

从blob网址中获取blob
将该blob发送到服务器

对于第一部分，您可以使用“伪ajax ”技术，只需将blob url（download.ogg的url）作为ajax的url传递

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        var result = this.response
    }
}
xhr.open('GET', 'blob:http://example.com/bbdaabf8-ddf2-40d3-975d-ade742417c71');
xhr.responseType = 'blob';
xhr.send();

ajax完成后result将保留blob现在你只需使用this answer将其发送到服务器

如何在sql server中存储base64数据

Html页面代码：

JavaScript代码：

1 个答案: