请选择 进入手机版 | 继续访问电脑版

ChinaFFmpeg

 找回密码
 立即注册

QQ登录

只需一步,快速开始

12
返回列表 发新帖
楼主: zy3287

ffmpeg 合并视频之后没有声音,而且不能直接使用QQ影音播放

[复制链接]
 楼主| 发表于 2020-8-11 08:14:22 | 显示全部楼层
孙悟空 发表于 2020-8-10 17:36
本地录制然后上传文件么?

是的是的,录制上传之后,和提问视频通过ffmpeg合并
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>视频录制</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <style>
  8. html,body{margin:0;padding:0;height:100%}
  9. video{height:calc(100% - 60px);width:100%}
  10. .recorderControl{height:30px;width:100%;background:#ccc;text-align:center}
  11. button,a{display:inline-block;width:30%;margin:0 1%;border:1px solid #eee;text-align:center;line-height:2;font-size:14px}
  12. </style>
  13. </head>

  14. <body>
  15. <div class="layui-body">
  16.     <div id="container">
  17.         <video id="gum" autoplay muted></video>
  18.     <div>
  19.     <button id="record">开始录制</button>
  20.     <button id="upload" disabled>上传</button>
  21.         <a id="download" onclick="downloads()">下载</a>
  22. </div>

  23. <script>
  24. //var mediaSource = new MediaSource();
  25. //mediaSource.addEventListener('sourceopen', handleSourceOpen, false);
  26. var mediaRecorder;
  27. var recordedBlobs;
  28. var sourceBuffer;

  29. var gumVideo = document.querySelector('video#gum');

  30. var recordButton = document.querySelector('button#record');
  31. var uploadButton = document.querySelector('button#upload');
  32. recordButton.onclick = toggleRecording;
  33. uploadButton.onclick = upload;

  34. // window.isSecureContext could be used for Chrome
  35. var isSecureOrigin = location.protocol === 'https:' || location.hostname === 'localhost';
  36. if (!isSecureOrigin) {
  37.     alert('getUserMedia() must be run from a secure origin: HTTPS or localhost.' + '\n\nChanging protocol to HTTPS');
  38.     location.protocol = 'HTTPS';
  39. }

  40. var constraints = {
  41.     audio: true,
  42.     video: {
  43.       width:480,//视频宽度
  44.       height:480,//视频高度
  45.       frameRate:60,//每秒60帧
  46.   }
  47. };

  48. function handleSuccess(stream) {
  49.     recordButton.disabled = false;
  50.     window.stream = stream;
  51.     gumVideo.srcObject = stream;
  52. }

  53. function handleError(error) {
  54. }

  55. //navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);

  56. function handleSourceOpen(event) {
  57.     sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
  58. }


  59. function handleDataAvailable(event) {
  60.     if (event.data && event.data.size > 0) {
  61.         recordedBlobs.push(event.data);
  62.     }
  63. }

  64. function handleStop(event) {
  65. }

  66. function toggleRecording() {
  67.     if (recordButton.textContent === '开始录制') {
  68.         startRecording();
  69.     } else {
  70.         stopRecording();
  71.         recordButton.textContent = '开始录制';
  72.         uploadButton.disabled = false;
  73.     }
  74. }

  75. function startRecording() {
  76.         navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
  77.         recordedBlobs = [];
  78.         var options = {mimeType: 'video/webm;codecs=h264'};
  79.         try {
  80.                 mediaRecorder = new MediaRecorder(window.stream, options);
  81.         } catch (e) {
  82.             return;
  83.         }
  84.         recordButton.textContent = '结束录制';
  85.         uploadButton.disabled = true;
  86.         mediaRecorder.onstop = handleStop;
  87.         mediaRecorder.ondataavailable = handleDataAvailable;
  88.         mediaRecorder.start(10);
  89. }

  90. function stopRecording() {
  91.     mediaRecorder.stop();
  92. }

  93. function downloads() {
  94.         var blob = new Blob(recordedBlobs, {type: 'video/mp4'});
  95.         var url  = window.URL.createObjectURL(blob);
  96.         var down = document.getElementById("download");
  97.         down.href = url;
  98.         down.download = 'media.mp4';
  99. }

  100. function upload(){
  101.     //保存在本地,通过post请求
  102.     //还可以用append方法添加一些附加信息参数为(name,value),如下面的代码:
  103.     var blob = new Blob(recordedBlobs, {type: 'video/mp4'});
  104.         uploadButton.disabled = true;
  105.     var formData = new FormData();
  106.         formData.append('video', blob);

  107.     var req = new XMLHttpRequest();
  108.     req.open("POST", "/api/index/index");
  109.     req.send(formData);
  110. }

  111. </script>
  112. </body>
  113. </html>
复制代码
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|Archiver|ChinaFFmpeg

GMT+8, 2022-9-28 16:46 , Processed in 0.041970 second(s), 11 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表