谷歌获取直播流数据包（摄像头，音频）

大浪淘沙1024

618人浏览 · 2020-05-28 12:07:46

大浪淘沙1024 · 2020-05-28 12:07:46 发布

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>测试 采取摄像头信息</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <!-- 直播界面 -->
    <video width="400" height="300" controls id="video" autoplay></video>
    <div>
      <button type="button" id="record">record</button>
      <button type="button" id="pause">pause</button>
      <button type="button" id="resume">resume</button>
      <button type="button" id="stop">stop</button>
      <button type="button" id="finish">finish</button>
      <a href="#" target="_blank" id="download">download</a>
    </div>
    <div>
      <button type="button" id="info">info</button>
      <button type="button" id="isTypeSupported">isTypeSupported</button>
    </div>

    <script type="text/javascript">
      (function () {
        let mediaRecorder = null;
        let mediaStream = null;
        let chunks = [];
 
        function getMediaStream(params) {
          var constraints = {
            audio: true,
            video: true
          };
 
          return navigator
            .mediaDevices
            .getUserMedia(constraints);
        }
 
        function attachMedia() {
          getMediaStream()
            .then(stream => {
              document.querySelector('#video').srcObject = stream;
              mediaStream = stream;
            })
            .catch(err => alert(`${err.name}: ${err.message}`));
        }
 
        function record() {
          // console.log(document.getElementById('video'))
          // var video = document.getElementById('video')

          // rtmp = 'rtmp://live.push.teacherasked.cn/live/6412fef87392ae8c987b0ecc79da1902'
          // let urls = rtmp.split('/');
          // let name = urls.pop();
          // let url = urls.join("/");
          // video.publish(url, name);
          // 推流测试 1 

          mediaRecorder = new MediaRecorder(mediaStream, { mimeType:"video/webm" });
 
          mediaRecorder.addEventListener('dataavailable', e => {
            console.log('dataavailable %o', e);
                chunks.push(e.data);
          });
          mediaRecorder.addEventListener('error', e => console.log('error %o', e));
          mediaRecorder.addEventListener('pause', e => console.log('pause %o', e));
          mediaRecorder.addEventListener('resume', e => console.log('resume %o', e));
          mediaRecorder.addEventListener('start', e => console.log('start %o', e));
          mediaRecorder.addEventListener('stop', e => console.log('stop %o', e));
 
          // 调用时可以通过给timeslice参数设置一个毫秒值,如果设置这个毫秒值,那么录制的媒体会按照你设置的值进行分割成一个个单独的区块, 而不是以默认的方式录制一个非常大的整块内容.
          mediaRecorder.start(10);
        }
 
        function stop() {
          mediaRecorder.stop();
        }
 
        function pause() {
          mediaRecorder.pause();
        }
 
        function resume() {
          mediaRecorder.resume();
        }
 
        function stop() {
          mediaRecorder.stop();
        }
        
        function download() {
          var blob = new Blob(chunks, {type: "video/webm"});
          
          chunks = [];
 
          var downloadLink = document.querySelector('a#download');
          var videoURL = window.URL.createObjectURL(blob);
          var rand =  Math.floor((Math.random() * 10000000));
          var name  = "video_"+rand+".webm" ;
          
          downloadLink.href = videoURL;
          downloadLink.setAttribute( "download", name);
          downloadLink.setAttribute( "name", name);
        }
 
        function info() {
          console.log(`mimeType ${mediaRecorder.mimeType}`);
          console.log(`state ${mediaRecorder.state}`);
          console.log(`stream ${mediaRecorder.stream}`);
          console.log(`videoBitsPerSecond %o`, mediaRecorder.videoBitsPerSecond);
          console.log(`audioBitsPerSecond ${mediaRecorder.audioBitsPerSecond}`);
        }
 
        function isTypeSupported() {
          var types = [
            "video/webm", 
            "audio/webm", 
            "video/webm\;codecs=vp8", 
            "video/webm\;codecs=daala", 
            "video/webm\;codecs=h264", 
            "audio/webm\;codecs=opus", 
            "video/mpeg"
          ];
 
          for (var i in types) { 
            console.log(`Is ${types[i]} supported? ${MediaRecorder.isTypeSupported(types[i] ? "Maybe!" : "No")}`); 
          }
        }
 
        document.querySelector('#record').addEventListener('click', e => record());
        document.querySelector('#pause').addEventListener('click', e => pause());
        document.querySelector('#resume').addEventListener('click', e => resume());
        document.querySelector('#stop').addEventListener('click', e => stop());
        document.querySelector('#finish').addEventListener('click', e => download());
        
        document.querySelector('#info').addEventListener('click', e => info());
        document.querySelector('#isTypeSupported').addEventListener('click', e => isTypeSupported());
        
        attachMedia();
      })()
    </script>
  </body>
</html>

存在问题：

目前没有直接推流到服务器的方法

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模