Streaming Decklink Input w/ ffmpeg

General
,
6

How to get live video into HTML template from BMD Decklink Extreme 4k

Here is how I was able to get a live BlackMagic Decklink Extreme 4k video input into an HTML template.

Thank you to @hreinnbeck for pointing me in the right direction.

First we use Media Devices API like discussed above to get all the media sources.

// Use the Media Devices api to get all the sources
navigator.mediaDevices.enumerateDevices()
    .then((deviceInfo) => {
        let arr = [];
        // For each source, create a message to be logged so we can identify it.
        deviceInfo.forEach(item => {
            let message = '';
            if (item.kind === 'audioinput') {
                message += 'Microphone: ' + item.label;
            } else if (item.kind === 'audiooutput') {
                message += 'Speaker '+ item.label
            } else if (item.kind === 'videoinput') {
                message += 'Video: ' + item.label
            }
            message += ' ID: ' + item.deviceId;
            arr.push(message);
        });
        console.log(arr);
    })
    .catch(error => {
        console.error(error);
});

We are looking for something like this:

Video: Decklink Video Capture ID: 1dcad4147c6efaca99d2be784e8bc0b037d0c3a80c4d5ff3426bfe25855fc418

Once we have the ID, we can get the source and add it to our video element in the DOM.

// Tells the stream what video format to use. 
// Get this wrong and you will only see a black screen!
let constraints = {
  audio: true,
  video: {
      deviceId: "1dcad4147c6efaca99d2be784e8bc0b037d0c3a80c4d5ff3426bfe25855fc418",
      width: 1920,
      height: 1080,
      frameRate: 29.97
  }
};
// Attempt to get the device with the current constraints 
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
    Get the video tracks from the source.
    const videoTracks = stream.getVideoTracks();
    const video = document.querySelector('video');
    stream.onremovetrack = function() {
        // Do something about the stream ending
    };
    // Make variable available to browser console
    window.stream = stream; 
    if ("srcObject" in video) {
        video.srcObject = stream;
    } else {
        // Avoid using this in new browsers, as it is going away.
        video.src = window.URL.createObjectURL(stream);
    }
    video.onloadedmetadata = function(e) {
        video.play();
    };
})
.catch(function(error) {
    if (error.name === 'ConstraintNotSatisfiedError') console.error(
        'The resolution ' + constraints.video.width.exact + 'x' +
        constraints.video.width.exact + ' px is not supported by your device.'
    );
    if (error.name === 'PermissionDeniedError') console.error(
        'Permissions have not been granted to use your camera and ' +
        'microphone, you need to allow the page access to your devices in ' +
        'order for the demo to work.'
    );
    console.error(error)
});

Please let me know if anyone has any questions!

Update

May have found a bug. The stream will not work with a 29.97 frame rate out of an ATEM’s SDI output or Aux. It does work on the multi-viewer SDI output oddly enough.
It will work if the switcher is in 1080i 59.94 and the template is requesting 29.97.