web获取媒体流

1. 下面例子演示了录屏和截图功能:

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webRTCtitle>
head>
<body>
  
  <video id="localVideo" autoplay playsinline muted>video>
  
  <div id="imgContainer">div>
  <button id="screenshotBtn" style="position: fixed;right: 0;top: 50%;">截图button>

  <script>
    const constraints = {
      audio: true,
      video: { width: 1280, height: 720 }
    }

    getLocalStream(constraints)


    // 获取本地音视频流
    async function getLocalStream(constraints) {
      // 获取媒体流
      const stream = await navigator.mediaDevices.getUserMedia(constraints)
      // 将媒体流设置到 video 标签上播放
      playLocalStream(stream)
    }

    // 播放本地视频流
    function playLocalStream(stream) {
      const videoEl = document.getElementById('localVideo')
      videoEl.srcObject = stream
    }

  script>
  <script>
    var imgList = []
    var screenshotBtn = document.getElementById('screenshotBtn')
    screenshotBtn.addEventListener('click', generatePhotos)
    // 拍照
    function generatePhotos () {
      // 添加滤镜
      var filterList = [
        'blur(5px)', // 模糊
        'brightness(0.5)', // 亮度
        'contrast(200%)', // 对比度
        'grayscale(100%)', // 灰度
        'hue-rotate(90deg)', // 色相旋转
        'invert(100%)', // 反色
        'opacity(90%)', // 透明度
        'saturate(200%)', // 饱和度
        'saturate(20%)', // 饱和度
        'sepia(100%)', // 褐色
        'drop-shadow(4px 4px 8px blue)', // 阴影
      ]
      var videoEl = document.getElementById('localVideo')
      var canvas = document.createElement('canvas')
      canvas.width = videoEl.videoWidth
      canvas.height = videoEl.videoHeight
      var ctx = canvas.getContext('2d')
      // 原图
      ctx.drawImage(videoEl, 0, 0, canvas.width, canvas.height)
      imgList.push(canvas.toDataURL('image/png'))
      for (let i = 0; i < filterList.length; i++) {
        ctx.filter = filterList[i]
        ctx.drawImage(videoEl, 0, 0, canvas.width, canvas.height)
        imgList.push(canvas.toDataURL('image/png'))
      }
      insertImgs(imgList)
    }

    function insertImgs(list) {
      const container = document.createDocumentFragment
      var imgContainer  = document.getElementById('imgContainer'); 
      var fragment = document.createDocumentFragment();

      list.forEach((img) => {
          var imgEl = document.createElement('img');
          imgEl.src = img;
          fragment.appendChild(imgEl);
      });

      imgContainer.appendChild(fragment)
    }
  script>
body>
html>

2. 下面的例子演示了录屏的功能

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webRTCtitle>
head>
<body>
  <h2>录屏h2>
  <video id="screenVideo" autoplay playsinline>video>
  <button id="recorderStartBtn" style="position: fixed;right: 0;top: 46%;">开始录制button>
  <button id="recorderStopBtn" style="position: fixed;right: 0;top: 48%;">停止录制button>
  <button id="recorderPauseBtn" style="position: fixed;right: 0;top: 52%;">暂停录制button>
  <button id="recorderResumeBtn" style="position: fixed;right: 0;top: 54%;">继续录制button>
  
  
  <script>
    // 录屏

    // 获取视频流
    var localStream
    shareScreen()
    
    async function shareScreen() {
      localStream =  await navigator.mediaDevices.getDisplayMedia({
        audio: true,
        video: true,
      })
      // 播放录屏视频流
      playStream(localStream)
    }

    // 在视频标签中播放视频流
    function playStream(stream) {
      const video = document.querySelector('#screenVideo')
      video.srcObject = stream
    }

    
  script>

  <script>
    // 录屏保存

    // 这里我们使用 MediaRecorder 来进行录制,它是一个用于录制媒体流的 API,它可以将媒体流中的数据进行录制,然后将录制的数据保存成一个文件。
    // 由于 MediaRecorder api 的对 mimeType 参数的支持是有限的。所以我们需要通过 MediaRecorder.isTypeSupported 来判断当前浏览器是否支持我们需要的 mimeType
    function getSupportedMimeTypes() {
      const media = 'video'
      // 常用的视频格式
      const types = [
        'webm',
        'mp4',
        'ogg',
        'mov',
        'avi',
        'wmv',
        'flv',
        'mkv',
        'ts',
        'x-matroska',
      ]
      // 常用的视频编码
      const codecs = ['vp9', 'vp9.0', 'vp8', 'vp8.0', 'avc1', 'av1', 'h265', 'h264']
      // 支持的媒体类型
      const supported = []
      const isSupported = MediaRecorder.isTypeSupported
      // 遍历判断所有的媒体类型
      types.forEach((type) => {
        const mimeType = `${media}/${type}`
        codecs.forEach((codec) =>
          [
            `${mimeType};codecs=${codec}`,
            `${mimeType};codecs=${codec.toUpperCase()}`,
          ].forEach((variation) => {
            if (isSupported(variation)) supported.push(variation)
          }),
        )
        if (isSupported(mimeType)) supported.push(mimeType)
      })
      return supported
    }

    console.log(getSupportedMimeTypes())

    function getRecorder () {
      const kbps = 1024
      const Mbps = kbps * kbps
      const options = {
        audioBitsPerSecond: 128000,
        videoBitsPerSecond: 2500000,
        mimeType: 'video/webm; codecs="vp8,opus"',
      }
      // https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder
      return new MediaRecorder(localStream, options)
    }

    var mediaRecorder = getRecorder()

    // 开始录制
    var recorderStartBtn = document.getElementById('recorderStartBtn')
    recorderStartBtn.addEventListener('click', handleRecorderStart)
    // 暂停录制
    var recorderPauseBtn = document.getElementById('recorderPauseBtn')
    recorderPauseBtn.addEventListener('click', handleRecorderPause)
    // 继续录制
    var recorderResumeBtn = document.getElementById('recorderResumeBtn')
    recorderResumeBtn.addEventListener('click', handleRecorderResume)
    // 停止录制
    var recorderStopBtn = document.getElementById('recorderStopBtn')
    recorderStopBtn.addEventListener('click', handleRecorderStop)

    // 录制媒体流
    function handleRecorderStart() {
      // 开始录制媒体,这个方法调用时可以通过给timeslice参数设置一个毫秒值,如果设置这个毫秒值,那么录制的媒体会按照你设置的值进行分割成一个个单独的区块,而不是以默认的方式录制一个非常大的整块内容。
      mediaRecorder.start()
      // 调用它用来处理 dataavailable 事件,该事件可用于获取录制的媒体资源 (在事件的 data 属性中会提供一个可用的 Blob 对象.)
      mediaRecorder.ondataavailable = (e) => {
        // 将录制的数据合并成一个 Blob 对象
        // const blob = new Blob([e.data], { type: e.data.type })
        // 重点是这个地方,我们不要把获取到的 e.data.type设置成 blob 的 type,而是直接改成 mp4
        const blob = new Blob([e.data], { type: 'video/mp4' })
        downloadBlob(blob)
      }
      mediaRecorder.onstart = (e) => {
        console.log("开始录制", e)
      }
      mediaRecorder.onstop = (e) => {
        console.log("停止录制", e)
      }
      mediaRecorder.onpause = (e) => {
        console.log("暂停录制", e)
      }
      mediaRecorder.onresume = (e) => {
        console.log("继续录制", e)
      }
      
    }
    
    function handleRecorderPause() {
      mediaRecorder.pause()
    }
    
    function handleRecorderResume() {
      mediaRecorder.resume()
    }
    
    function handleRecorderStop() {
      mediaRecorder.stop()
    }


    // 下载 Blob
    function downloadBlob(blob) {
      // 将 Blob 对象转换成一个 URL 地址
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      // 设置 a 标签的 href 属性为刚刚生成的 URL 地址
      a.href = url
      // 设置 a 标签的 download 属性为文件名
      a.download = `${new Date().getTime()}.${blob.type.split('/')[1]}`
      // 模拟点击 a 标签
      a.click()
      // 释放 URL 地址
      URL.revokeObjectURL(url)
    }

  script>
body>
html>

3. 下面的例子演示了保存(下载)录像流(录屏流也可)到本地

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webRTCtitle>
head>
<body>
  <h1>录像h1>
  <video id="cameraVideo" autoplay playsinline muted>video>
  <button id="recorderStartBtn" style="position: fixed;right: 0;top: 52%;">开始录制button>
  <button id="recorderPauseBtn" style="position: fixed;right: 0;top: 54%;">暂停录制button>
  <button id="recorderResumeBtn" style="position: fixed;right: 0;top: 56%;">继续录制button>
  <button id="recorderStopBtn" style="position: fixed;right: 0;top: 58%;">停止录制button>

  <script>
    // 录像
    const constraints = {
      audio: true,
      video: { width: 1280, height: 720 }
    }

    var cameraStream
    getLocalStream(constraints)


    // 获取本地音视频流
    async function getLocalStream(constraints) {
      // 获取媒体流
      cameraStream = await navigator.mediaDevices.getUserMedia(constraints)
      // 将媒体流设置到 video 标签上播放
      playLocalStream(cameraStream)
    }

    // 播放本地视频流
    function playLocalStream(stream) {
      const videoEl = document.getElementById('cameraVideo')
      videoEl.srcObject = stream
    }

  script>

  <script>
    // 录屏保存
    // 这里我们使用 MediaRecorder 来进行录制,它是一个用于录制媒体流的 API,它可以将媒体流中的数据进行录制,然后将录制的数据保存成一个文件。
    // 由于 MediaRecorder api 的对 mimeType 参数的支持是有限的。所以我们需要通过 MediaRecorder.isTypeSupported 来判断当前浏览器是否支持我们需要的 mimeType

    function getSupportedMimeTypes() {
      const media = 'video'
      // 常用的视频格式
      const types = [
        'webm',
        'mp4',
        'ogg',
        'mov',
        'avi',
        'wmv',
        'flv',
        'mkv',
        'ts',
        'x-matroska',
      ]
      // 常用的视频编码
      const codecs = ['vp9', 'vp9.0', 'vp8', 'vp8.0', 'avc1', 'av1', 'h265', 'h264']
      // 支持的媒体类型
      const supported = []
      const isSupported = MediaRecorder.isTypeSupported
      // 遍历判断所有的媒体类型
      types.forEach((type) => {
        const mimeType = `${media}/${type}`
        codecs.forEach((codec) =>
          [
            `${mimeType};codecs=${codec}`,
            `${mimeType};codecs=${codec.toUpperCase()}`,
          ].forEach((variation) => {
            if (isSupported(variation)) supported.push(variation)
          }),
        )
        if (isSupported(mimeType)) supported.push(mimeType)
      })
      return supported
    }

    console.log(getSupportedMimeTypes())

    var mediaRecorder
    function getRecorder () {
      const kbps = 1024
      const Mbps = kbps * kbps
      const options = {
        audioBitsPerSecond: 128000,
        videoBitsPerSecond: 2500000,
        mimeType: 'video/webm; codecs="vp8,opus"',
      }
      // https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder
      return new MediaRecorder(cameraStream, options)
    }

    // 开始录制
    var recorderStartBtn = document.getElementById('recorderStartBtn')
    recorderStartBtn.addEventListener('click', handleRecorderStart)
    // 暂停录制
    var recorderPauseBtn = document.getElementById('recorderPauseBtn')
    recorderPauseBtn.addEventListener('click', handleRecorderPause)
    // 继续录制
    var recorderResumeBtn = document.getElementById('recorderResumeBtn')
    recorderResumeBtn.addEventListener('click', handleRecorderResume)
    // 停止录制
    var recorderStopBtn = document.getElementById('recorderStopBtn')
    recorderStopBtn.addEventListener('click', handleRecorderStop)

    // 录制媒体流
    function handleRecorderStart() {
      mediaRecorder = getRecorder()
      // 开始录制媒体,这个方法调用时可以通过给timeslice参数设置一个毫秒值,如果设置这个毫秒值,那么录制的媒体会按照你设置的值进行分割成一个个单独的区块,而不是以默认的方式录制一个非常大的整块内容。
      mediaRecorder.start()
      // 调用它用来处理 dataavailable 事件,该事件可用于获取录制的媒体资源 (在事件的 data 属性中会提供一个可用的 Blob 对象.)
      mediaRecorder.ondataavailable = (e) => {
        // 将录制的数据合并成一个 Blob 对象
        // const blob = new Blob([e.data], { type: e.data.type })
        // 重点是这个地方,我们不要把获取到的 e.data.type设置成 blob 的 type,而是直接改成 mp4
        const blob = new Blob([e.data], { type: 'video/mp4' })
        downloadBlob(blob)
      }
      mediaRecorder.onstart = (e) => {
        console.log("开始录制", e)
      }
      mediaRecorder.onstop = (e) => {
        console.log("停止录制", e)
      }
      mediaRecorder.onpause = (e) => {
        console.log("暂停录制", e)
      }
      mediaRecorder.onresume = (e) => {
        console.log("继续录制", e)
      }
      
    }
    
    function handleRecorderPause() {
      mediaRecorder.pause()
    }
    
    function handleRecorderResume() {
      mediaRecorder.resume()
    }
    
    function handleRecorderStop() {
      mediaRecorder.stop()
    }


    // 下载 Blob
    function downloadBlob(blob) {
      // 将 Blob 对象转换成一个 URL 地址
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      // 设置 a 标签的 href 属性为刚刚生成的 URL 地址
      a.href = url
      // 设置 a 标签的 download 属性为文件名
      a.download = `${new Date().getTime()}.${blob.type.split('/')[1]}`
      // 模拟点击 a 标签
      a.click()
      // 释放 URL 地址
      URL.revokeObjectURL(url)
    }

  script>
body>
html>

你可能感兴趣的:(前端,webrtc)