Replace POST with GET to easily play stream media on browser

npuichigo · npuichigo · commit dbd9e0b6bc8a · 2019-11-27T03:26:12.000Z
diff --git a/grpc_gateway_demo/proto/demo_service.proto b/grpc_gateway_demo/proto/demo_service.proto
@@ -26,8 +26,7 @@ import "google/api/httpbody.proto";
 service Demo {
   rpc GetSomething(GetRequest) returns (stream google.api.HttpBody) {
     option (google.api.http) = {
-      post: "/get"
-      body: "*"
+      get: "/get"
     };
   }
 }
diff --git a/grpc_gateway_demo/serving/demo_service_impl.cc b/grpc_gateway_demo/serving/demo_service_impl.cc
@@ -26,7 +26,7 @@
 namespace grpc_gateway_demo {
 namespace serving {
 
-static const int kBufferSize = 32 * 1024;
+static const int kBufferSize = 64 * 1024;
 
 ::grpc::Status DemoServiceImpl::GetSomething(
     ::grpc::ServerContext* context,
@@ -57,7 +57,7 @@ ::grpc::Status DemoServiceImpl::GetSomething(
     reply.set_data(buffer, byte_read);
     writer->Write(reply);
     LOG(INFO) << "Send " << byte_read << " bytes";
-    usleep(500 * 1000);
+    usleep(100 * 1000);
   }
   input.close();
   return ::grpc::Status::OK;
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
                 </form>
             </div>
             <div>
-                <audio id="player" autoplay="autoplay"></audio>
+                <audio id="player"></audio>
             </div>
         </div>
         <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
diff --git a/public/js/index.js b/public/js/index.js
@@ -3,84 +3,15 @@ function trim(s) {
   return s.replace(/(^\s*)|(\s*$)/g, "");
 }
 
-/*async function fetchAudio(filename) {
-  const requestOptions = {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({"filename": filename})
-  };
-
-  let url = "http://" + window.location.hostname + ":8080" + "/get";
-  // fetch() returns a promise that resolved once headers have been received
-  return fetch(url, requestOptions)
-    .then(res => {
-      if (!res.ok)
-        throw new Error(`${res.status} = ${res.statusText}`);
-      // response.body is a readable stream.
-      // Calling getReader() gives us exclusive access to
-      // the stream's content
-      var reader = res.body.getReader();
-
-      // read() returns a promise that resolves when a value has been received
-      return reader
-        .read()
-        .then((result) => {
-          return result;
-        });
-    })
-}*/
-
-function fetchAudio(filename, callback) {
-  var url = "http://" + window.location.hostname + ":8080" + "/get";
-  var xhr = new XMLHttpRequest();
-  xhr.open('POST', url, true);
-  xhr.setRequestHeader("Content-Type", "application/json");
-  xhr.responseType = "arraybuffer";
-  xhr.onload = function() {
-    try {
-      switch(this.status) {
-        case 200:
-          callback(xhr.response);
-          break;
-        case 404:
-          throw 'File Not Found';
-        default:
-          throw 'Failed to fetch the file';
-      }
-    } catch(e) {
-      console.error(e);
-    }
-  };
-  var data = JSON.stringify({"filename": filename})
-  xhr.send(data);
-}
-
 function getSomething() {
   var filename = document.getElementById('filename').value;
-  var player = document.getElementById('player');
   if (trim(filename).length == 0) {
     alert("Please input the file name");
   } else {
-    var mediaSource = new MediaSource();
-    player.src = URL.createObjectURL(mediaSource);
-    mediaSource.addEventListener('sourceopen', function() {
-      var sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');
-
-      fetchAudio(filename, buffer => {
-        sourceBuffer.appendBuffer(buffer);
-      });
-
-      /*fetchAudio(filename)
-        .then((response) => {
-          sourceBuffer.appendBuffer(response.value);
-        })
-        .catch((error) => {
-          this.setState({
-            error: error.message
-          });
-        });*/
-    });
+    var url = "http://" + window.location.hostname + ":8080" + "/get?";
+    url += encodeURI("filename=" + filename)
+    var player = document.getElementById('player');
+    player.src = url;
+    player.play();
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -26,8 +26,7 @@ import "google/api/httpbody.proto";`
`26`	`26`	`service Demo {`
`27`	`27`	`rpc GetSomething(GetRequest) returns (stream google.api.HttpBody) {`
`28`	`28`	`option (google.api.http) = {`
`29`		`- post: "/get"`
`30`		`- body: "*"`
	`29`	`+ get: "/get"`
`31`	`30`	`};`
`32`	`31`	`}`
`33`	`32`	`}`